js实现WebRTC点对点视频通话

先看页面代码,这里使用的webRTC原生的API。目前信令服务器使用的是websocket实现的，后续改成将socket.io。socket.io默认含有房间的概念。
源代码

    
    


播放页面


    

        
        
    




    建立连接
    断开连接




    对方id: 

再看看服务器代码，这里使用Java语言开发，spring boot框架，使用websocket转发信令。
websocket连接类

@ServerEndpoint("/websocket/{id}")
@Controller
@Slf4j
public class WebsocketController {

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "id") String id) {
        //获取连接的用户
        log.info("加入session:" + id );
        SocketManager.setSession(id, session);
    }

    @OnClose
    public void onClose(Session session) {
        log.info("移除不用的session:" + session.getId());
        SocketManager.removeSession(session.getId());
    }


    //收到客户端信息
    @OnMessage
    public void onMessage(String message,Session session) throws IOException {
        log.info("message,{}",message);
        JSONObject jsonObject = JSON.parseObject(message);
        SocketManager.sendMessage(jsonObject.getString("toUserId"),jsonObject.toJSONString());
    }

    //错误时调用
    @OnError
    public void onError(Session session, Throwable throwable) {
        log.error("webSocket 错误,{}", throwable.getMessage());
        SocketManager.removeSession(session.getId());
    }

}

SocketManager类代码

public class SocketManager {

    /**
     * 客户端连接session集合 
     */
    private static Map sessionMap = new ConcurrentHashMap();

    /**
     * 存放新加入的session 便于以后对session管理
     * @param userId 用户id
     * @param session 用户session
     */
    public synchronized static void setSession(String userId,Session session){
        sessionMap.put(userId,session);
    }

    /**
     * 根据session ID移除session
     * @param sessionId
     */
    public static void removeSession(String sessionId){
        if(null == sessionId){
            return;
        }
        sessionMap.forEach((k,v) -> {
            if(sessionId.equals(v.getId())){
                sessionMap.remove(k);
            }
        });
    }

    /**
     * 给用户发送消息
     * @param userId 用户id
     * @param message 消息
     */
    public  static void sendMessage(String userId, String message) {
        log.info("给用户发送消息,{},{}",userId,message);
        Session session = sessionMap.get(userId);
        if(session != null){
            synchronized (session){
                try {
                    session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    log.info("发送websocket消息是异常,{}",e);
                }
            }
        }
    }
}

最后看下实现效果打开页面，在另一台电脑打开或者浏览器新建一个标签页，输入对方的id点击建立连接就可以实现音视频通话了。

1612319194(1).jpg