08月14日科技常识：WebRTC：一个视频聊天的简单例子

2024-09-16 15:28:07

导读摘要今天小编跟大家讲解下有关WebRTC：一个视频聊天的简单例子，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关WebRTC：一...

摘要今天小编跟大家讲解下有关WebRTC：一个视频聊天的简单例子，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关WebRTC：一个视频

今天小编跟大家讲解下有关WebRTC：一个视频聊天的简单例子，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关WebRTC：一个视频聊天的简单例子的相关资料，希望小伙伴们看了有所帮助。

相关API简介

在前面的章节中，已经对WebRTC相关的重要知识点进行了介绍，包括涉及的网络协议、会话描述协议、如何进行网络穿透等，剩下的就是WebRTC的API了。

WebRTC通信相关的API非常多，主要完成了如下功能：

信令交换通信候选地址交换音视频采集音视频发送、接收

相关API太多，为避免篇幅过长，文中部分采用了伪代码进行讲解。详细代码参考文章末尾，也可以在笔者的Github上找到，有问题欢迎留言交流。

信令交换

信令交换是WebRTC通信中的关键环节，交换的信息包括编解码器、网络协议、候选地址等。对于如何进行信令交换，WebRTC并没有明确说明，而是交给应用自己来决定，比如可以采用WebSocket。

发送方伪代码如下：

const pc = new RTCPeerConnection(iceConfig);const offer = await pc.createOffer();await pc.setLocalDescription(offer);sendToPeerViaSignalingServer(SIGNALING_OFFER, offer); // 发送方发送信令消息

接收方伪代码如下：

const pc = new RTCPeerConnection(iceConfig);await pc.setRemoteDescription(offer);const answer = await pc.createAnswer();await pc.setLocalDescription(answer);sendToPeerViaSignalingServer(SIGNALING_ANSWER, answer); // 接收方发送信令消息候选地址交换服务

当本地设置了会话描述信息，并添加了媒体流的情况下，ICE框架就会开始收集候选地址。两边收集到候选地址后，需要交换候选地址，并从中知道合适的候选地址对。

候选地址的交换，同样采用前面提到的信令服务，伪代码如下：

// 设置本地会话描述信息const localPeer = new RTCPeerConnection(iceConfig);const offer = await pc.createOffer();await localPeer.setLocalDescription(offer);// 本地采集音视频const localVideo = document.getElementById('local-video');const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true});localVideo.srcObject = mediaStream;// 添加音视频流mediaStream.getTracks().forEach(track => { localPeer.addTrack(track, mediaStream);});// 交换候选地址localPeer.onicecandidate = function(evt) { if (evt.candidate) { sendToPeerViaSignalingServer(SIGNALING_CANDIDATE, evt.candidate); }}音视频采集

可以使用浏览器提供的getUserMedia接口，采集本地的音视频。

const localVideo = document.getElementById('local-video');const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true});localVideo.srcObject = mediaStream;音视频发送、接收

将采集到的音视频轨道，通过addTrack进行添加，发送给远端。

mediaStream.getTracks().forEach(track => { localPeer.addTrack(track, mediaStream);});

远端可以通过监听ontrack来监听音视频的到达，并进行播放。

remotePeer.ontrack = function(evt) { const remoteVideo = document.getElementById('remote-video'); remoteVideo.srcObject = evt.streams[0];}完整代码

包含两部分：客户端代码、服务端代码。

1、客户端代码

2、服务端代码

// 添加ws服务const io = require('socket.io')(server);let connectionList = [];const CLIENT_RTC_EVENT = 'CLIENT_RTC_EVENT';const SERVER_RTC_EVENT = 'SERVER_RTC_EVENT';const CLIENT_USER_EVENT = 'CLIENT_USER_EVENT';const SERVER_USER_EVENT = 'SERVER_USER_EVENT';const CLIENT_USER_EVENT_LOGIN = 'CLIENT_USER_EVENT_LOGIN';const SERVER_USER_EVENT_UPDATE_USERS = 'SERVER_USER_EVENT_UPDATE_USERS';function getOnlineUser() { return connectionList .filter(item => { return item.userName !== ''; }) .map(item => { return { userName: item.userName }; });}function setUserName(connection, userName) { connectionList.forEach(item => { if (item.connection.id === connection.id) { item.userName = userName; } });}function updateUsers(connection) { connection.emit(SERVER_USER_EVENT, { type: SERVER_USER_EVENT_UPDATE_USERS, payload: getOnlineUser()}); }io.on('connection', function (connection) { connectionList.push({ connection: connection, userName: '' }); // 连接上的用户，推送在线用户列表 // connection.emit(SERVER_USER_EVENT, { type: SERVER_USER_EVENT_UPDATE_USERS, payload: getOnlineUser()}); updateUsers(connection); connection.on(CLIENT_USER_EVENT, function(jsonString) { const msg = jsON.parse(jsonString); const {type, payload} = msg; if (type === CLIENT_USER_EVENT_LOGIN) { setUserName(connection, payload.loginName); connectionList.forEach(item => { // item.connection.emit(SERVER_USER_EVENT, { type: SERVER_USER_EVENT_UPDATE_USERS, payload: getOnlineUser()}); updateUsers(item.connection); }); } }); connection.on(CLIENT_RTC_EVENT, function(jsonString) { const msg = jsON.parse(jsonString); const {payload} = msg; const target = payload.target; const targetConn = connectionList.find(item => { return item.userName === target; }); if (targetConn) { targetConn.connection.emit(SERVER_RTC_EVENT, msg); } }); connection.on('disconnect', function () { connectionList = connectionList.filter(item => { return item.connection.id !== connection.id; }); connectionList.forEach(item => { // item.connection.emit(SERVER_USER_EVENT, { type: SERVER_USER_EVENT_UPDATE_USERS, payload: getOnlineUser()}); updateUsers(item.connection); }); });});写在后面

WebRTC的API非常多，因为WebRTC本身就比较复杂，随着时间的推移，WebRTC的某些API(包括某些协议细节)也在改动或被废弃，这其中也有向后兼容带来的复杂性，比如本地视频采集后加入传输流，可以采用 addStream 或 addTrack 或 addTransceiver，再比如会话描述版本从plan-b迁移到unified-plan。

建议亲自动手撸一遍代码，加深了解。