WebRTC实现多人视频聊天之客户端设计

写在前面

在开始之前，需要对如何建立点对点连接有一个了解，参考我的另一篇博文：WebRTC之点对点连接。下图是来自参考博文中的一张图片。

基础想法

基础架构如下：

客户端主要在于处理从WebSockets接收到的消息，并且有着发起连接和被动接受连接的功能。

实现

连接建立成功时，注册用户身份，表明想加入的房间号。

ws.onopen = function () {console.log("connect success ... ");// 初始化当前用户身份let urlParams = urlSearch();user = {name: urlParams['name'],roomId: urlParams['roomId']};console.log("current user...", user);ws.send(JSON.stringify({msgType: requestType.USER_IDENTITY,msgBody: user}));};

通过web sockets 发起创建多个连接的请求。

// call 按钮的点击事件中执行
ws.send(JSON.stringify({msgType: requestType.CLIENT_MULTIPLY_CONNECTION_CREATEQUE,msgBody: user}));

接收服务器响应的房间成员信息，并创建多个用户连接（封装一个具有username和连接属性的对象），发送多个用户offer（username和offer）给信令服务器

// web socket 接收到该消息
ws.onmessage = function (evt) {// 接收到成员消息响应，创建多个连接if(result.msgType === requestType.SERVER_CALLEESRESP){console.log("接收到创建多个连接消息响应" + result.msgBody);createConnections(result.msgBody).catch((error)=>{console.log("创建成员连接出错..." , result.msgBody,error);});}};// 创建多个点对点连接和video元素
async function createConnections(userNames) {const tempPcs = [];userNames.forEach(function (username){tempPcs.push({userName: username,pc: createRTCPeerConnection(username,createRemoteVideo(username))});});// 发送多个用户的username和offerconst offers = [];for (let i = 0; i < tempPcs.length; i++) {const pcc = tempPcs[i];const offer = await pcc.pc.createOffer(offerOptions);pcc.pc.setLocalDescription(offer).catch(()=>{console.log(pcc.userName + ">>> setLocalDescription error" , offer);});console.log("offer 创建完成...",offer);offers.push({userName: pcc.userName,sdp: offer});}if(offers.length !== 0){console.log("发送 多个offer消息...",offers);ws.send(JSON.stringify({msgType: requestType.SDP_OFFER,msgBody: offers}));}
}// 创建点对点连接
function createRTCPeerConnection(username,remoteVideo){const configuration = getSelectedSdpSemantics();console.log('RTCPeerConnection configuration:', configuration);const pc = new RTCPeerConnection(configuration);console.log(username+'>>> Created peer connection object pc');pc.addEventListener('icecandidate', e => onIceCandidate(e,username));pc.addEventListener('iceconnectionstatechange', e => onIceStateChange(pc, e));pc.addEventListener('track', e => {if (remoteVideo.srcObject !== e.streams[0]) {remoteVideo.srcObject = e.streams[0];console.log(username+'>>> pc received remote stream');}});localStream.getTracks().forEach(track => pc.addTrack(track, localStream));pcs.push({userName: username,pc: pc});return pc;
}
//
function createRemoteVideo(id) {let remoteVideo = document.createElement('video');remoteVideo.playsinline = true;remoteVideo.autoplay = true;remoteVideo.id=id;//获取body节点localVideo.parentNode.insertBefore(remoteVideo, localVideo.nextSibling);return remoteVideo;
}

客户端接收到offer消息时，创建连接，响应answer；并发起创建多个连接的请求消息,收到信令服务器响应的成员信息，创建多个连接，发送多个用户offer给信令服务器，并将之前创建的用户连接放入连接池中。

// 接收到offer消息时if(result.msgType === requestType.SDP_OFFER){console.log("接收到offer消息" , result.msgBody);// 创建const rtcPeerConnection = createRTCPeerConnection(result.msgBody.userName, createRemoteVideo(result.msgBody.userName));rtcPeerConnection.setRemoteDescription(JSON.parse(msgBody.sdp)).catch((error)=>{console.log(result.msgBody.userName + ">>> setRemoteDesc error" , msgBody.sdp,error);});// 应答rtcPeerConnection.createAnswer().catch((error)=>{console.log(result.msgBody.userName + ">>> createAnswer error" , error);}).then(answer=>{rtcPeerConnection.setLocalDescription(answer).catch(()=>{console.log(result.msgBody.userName + ">>> setLocalDesc error" , answer);});// 响应answerws.send(JSON.stringify({msgType: requestType.SDP_ANSWER,msgBody: {userName:msgBody.userName,sdp: answer}}));});// 发送创建多个请求消息console.log("发送创建多个请求消息...");ws.send(JSON.stringify({msgType: requestType.CLIENT_MULTIPLY_CONNECTION_CREATEQUE,msgBody: user}));}

客户端收到单个answer消息时，放入对应用户连接的desc中

// 接收到answer消息时if(result.msgType === requestType.SDP_ANSWER){console.log("接收到answer消息...");pcs.forEach(function (pcc) {if(pcc.userName === msgBody.userName){pcc.pc.setRemoteDescription(JSON.parse(msgBody.sdp)).catch(()=>{console.log(msgBody.userName + ">>> setRemoteDesc error" + msgBody.sdp);});}});}

客户端设置发送candidate（包含用户信息和candidate）

async function onIceCandidate(event,username) {try {console.log(username+">>> event.candidate..." + event.candidate);ws.send(JSON.stringify({msgType: requestType.SDP_CANDIDATE,msgBody: {userName: username,sdp: event.candidate}}));console.log(username+">>> send candidate msg success");} catch (e) {onAddIceCandidateError(pc, e);}
}

客户端收到单个candidate消息时，添加到对应用户连接的IceCandidate中

// 接收到candidate消息时if(result.msgType === requestType.SDP_CANDIDATE){console.log("接收到candidate消息...");pcs.forEach(function (pcc) {console.log(pcc.userName + "----" + msgBody.userName);if(pcc.userName === msgBody.userName){pcc.pc.addIceCandidate(JSON.parse(msgBody.sdp)).catch((error)=>{console.log(msgBody.userName + ">>> addIceCandidate error" , msgBody.sdp,error);});console.log(`${pcc.pc} addIceCandidate success`);}});}

推荐博文

参考博文

https://blog.csdn.net/heqinghua217/article/details/52174541 webRtc+websocket多人视频通话

WebRTC实现多人视频聊天之客户端设计相关推荐

WebRTC实现多人视频聊天
写在前面实现房间内人员的视频聊天,由于并未很完善,所以需要严格按照步骤来,当然基于此完善,就是时间的问题了. 架构整个设计架构如下: 图片来自于参考博文.我使用的是第一种Mesh 架构,无需任何流 ...
WebRTC实现多人视频聊天之信令服务器设计
基础设想信令服务器主要负责转发 SDP ,当然,我也可以选择将我的业务逻辑写在里面(生产环境不推荐这样做).选择基于Web Sockets主要是因为这块比较熟悉,并且双向连接,我们能够基于此做的事非 ...
教你用WebRTC撸一个多人视频聊天
之前公司准备用 webRTC 来实现视频聊天,研究了几天,撸了个 demo 出来,(虽然最后并没有采用这项技术,囧),但是还是写一个出来吧! WebRTC简单介绍 WebRTC (Web Real-T ...
实践：《从头到脚撸一个多人视频聊天 — 前端 WebRTC 实战（一）》
2019独角兽企业重金招聘Python工程师标准>>> 请先阅读原文,链接:从头到脚撸一个多人视频聊天 - 前端 WebRTC 实战(一),本文只涉及实践过程中的问题 1.video ...
Android 集成 Agora SDK 快速体验 RTC 版多人视频聊天|掘金技术征文
RTC (Real-Time Communication) 作为实时通讯领域的"新贵",在互动直播.远程控制.多人视频会议.屏幕共享等领域广受好评,如果你还不了解 RTC ,Tak ...
【游戏开发实战】Unity从零开发多人视频聊天功能，无聊了就和自己视频聊天（附源码 | Mirror | 多人视频 | 详细教程）
文章目录一.前言二.思考问题与解决方案 1.思考问题 2.解决方案 2.1.Unity中如何开启摄像头并对图像进行采样 2.2.图像如何中转给其他客户端 2.3.如何实现清晰度切换 2.4.客户端 ...
(Agora声网)多人视频聊天应用的开发（二）一对一聊天
转载于:Android多人视频聊天应用的开发(二)一对一聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095626 本系列文章结合声网官方在G ...
Android多人视频聊天应用的开发（二）一对一聊天
在上一篇<Android多人视频聊天应用的开发(一)快速集成>中我们讨论了如何配置Agora Android SDK,本文我们将探索使用Agora进行一对一视频聊天的奥秘. 鉴权 APP ...
都秀多人视频聊天软件【常用软件】
都秀视频聊天软件是北京都秀网络科技有限公司基于宽带网络推出的"全新网络多人视频聊天工具".都秀聊天室整合了文本.语音.视频等多种互联网通信形式于一身,旨在为广大互联网用户提供融合数 ...

WebRTC实现多人视频聊天之客户端设计

基础想法

实现

WebRTC实现多人视频聊天之客户端设计相关推荐

最新文章

热门文章