一对一WebRTC视频通话系列(三)——leave和peer-leave信令实现

本篇博客主要分为两部分,第一部分为leave信令的实现,即当有客户端离开房间后,服务端和其他在房间内的客户需知晓。第二部分为媒体协商和网络协商相关API。

本系列博客主要记录一对一WebRTC视频通话实现过程中的一些重点,代码全部进行了注释,便于理解WebRTC整体实现。


一对一WebRTC视频通话系列往期博客

一对一WebRTC视频通话系列(一)------ 创建页面并显示摄像头画面
一对一WebRTC视频通话系列(二)------websocket和join信令实现


一对一WebRTC视频通话系列(三)------leave和peer-leave信令实现

一、leave信令实现

1.1 客户端:

javascript 复制代码
//监听离开按钮点击事件
document.getElementById('leaveBtn').onclick = function () {
    console.log("leaveBtn clicked");
    doLeave();
}
javascript 复制代码
function doLeave() {
    var jsonMsg = {
        'cmd': 'leave',
        'roomId': roomId,
        'uid': localUserId,
    };
    var message = JSON.stringify(jsonMsg); //将json对象转换为字符串
    zeroRTCEngine.sendMessage(message);   //设计方法:用实现方法而不是直接用变量    
    console.info("doLeave message: " + message);
}

1.2 服务端

修改signal_server.js文件,在监听客户端发送的消息处添加leave信令代码

javascript 复制代码
// 监听客户端发送的消息
conn.on("text", function (str) {
    console.info("Received msg:"+str);
    var jsonMsg = JSON.parse(str);

    switch(jsonMsg.cmd){
        case SIGNAL_TYPE_JOIN:
            handleJoin(jsonMsg, conn); 
            break;
        case SIGNAL_TYPE_LEAVE:
            handleLeave(jsonMsg);
            break;
    }
});

handleLeave()函数:在某个用户离开房间时,向其他房间内在线的用户发送通知,告知某个用户离开了当前房间。实现原理是通过哈希表(roomMap)来存储房间内的用户信息,当某个用户离开房间时,从哈希表中移除该用户,并遍历房间内其他在线用户,发送通知。

首先,代码会打印一条日志,显示用户ID(uid)和房间ID(roomId)。

然后,代码会获取存储房间信息的Map(roomMap)。

如果房间不存在,代码会打印一条错误日志,然后返回。

roomMap中移除用户ID(uid)。

如果房间内还有其他在线用户,遍历房间内所有用户(clients)。

对于每个在线用户,会创建一个JSON消息,内容包括用户离开房间的事件类型(SIGNAL_TYPE_PEER_LEAVE)和离开的用户ID(remoteUid)。

将JSON消息转换为字符串(msg),并通过WebSocket发送给该用户(remoteClient)。

最后,代码会打印一条日志,通知用户离开房间。

javascript 复制代码
// 处理用户离开房间
function handleLeave(message){
    // 获取房间ID和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    console.log(" uid:" + uid + " leave room: "+roomId);

    // 获取房间Map
    var roomMap = roomTableMap.get(roomId);
    if(roomMap == null){
        console.error("roomId:" + roomId + " is not exist");
        return;
    }
    roomMap.remove(uid);
    if(roomMap.size() >= 1){
        var clients = roomMap.getEntrys();
        for(var i in clients){
            jsonMsg = {
                'cmd':SIGNAL_TYPE_PEER_LEAVE,
                'remoteUid':uid
            }
            // 给所有房间内其他用户发送用户离开消息
            var msg = JSON.stringify(jsonMsg);
            var remoteUid = clients[i].key;
            var remoteClient =roomMap.get(remoteUid);
            if(remoteClient){
                console.info("notify peer"+ remoteClient.uid +"uid" + uid + "leave room");
                remoteClient.conn.sendText(msg);
            }
        }
    }
}

运行结果:

客户1:

客户2:

服务端:

二、媒体协商和网络协商API

媒体协商

  • createOffer
    基本格式:aPromise = myPeerConnection.createOffer([options]);
javascript 复制代码
	var options = {
		offerToReceiveAudio: true, // 告诉另一端,你是否想接收音频,默认true
		offerToReceiveVideo: true, // 告诉另一端,你是否想接收视频,默认true
		iceRestart: false, // 是否在活跃状态重启ICE网络协商
	};
  • createAnswer
    基本格式:aPromise = RTCPeerConnection .createAnswer([ options ]); 目前createAnswer的options是无效的。
  • setLocalDescription
    基本格式:aPromise = RTCPeerConnection .setLocalDescription(sessionDescription);
  • setRemoteDescription
    基本格式:aPromise = pc.setRemoteDescription(sessionDescription);

https://webrtc.github.io/samples/src/content/peerconnection/restart­ice/

活跃状态下,页面源代码中iceRestart默认为true

javascript 复制代码
offerOptions.iceRestart = true

修改iceRestartflase,则响应如下,不再进行ice candidate交换

网络协商

  • addIceCandidate
    基本格式:aPromise = pc.addIceCandidate(候选人);
    candidate
    注意AndroidWeb端的不同。
属性 说明
candidate 候选者描述信息
sdpMid 与候选者相关的媒体流的识别标签
sdpMLineIndex 在SDP中 m=的索引值
usernameFragment 包括了远端的唯一标识
javascript 复制代码
	var candidateJson = {
		'label': event.candidate.sdpMLineIndex,
		'id': event.candidate.sdpMid,
		'candidate': event.candidate.candidate
	};
相关推荐
逼子格1 小时前
五种音频器件综合对比——《器件手册--音频器件》
嵌入式硬件·音视频·硬件工程师·硬件测试·电子器件·硬件笔试真题·音频器件
EasyGBS2 小时前
视频设备轨迹回放平台EasyCVR打造视频智能融合新平台,驱动智慧机场迈向数字新时代
网络·人工智能·安全·音视频
EasyGBS2 小时前
视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
网络·安全·音视频
SKYDROID云卓小助手6 小时前
三轴云台之相机技术篇
运维·服务器·网络·数码相机·音视频
yunteng5217 小时前
音视频(一)ZLMediaKit搭建部署
音视频·zlmediakit·安装搭建
Merokes11 小时前
关于Gstreamer+MPP硬件加速推流问题:视频输入video0被占用
c++·音视频·rk3588
EasyGBS14 小时前
NVR接入录像回放平台EasyCVR视频系统守护舌尖上的安全,打造“明厨亮灶”云监管平台
安全·音视频
鹅肝手握高V五色16 小时前
Wireshark入门教程:如何抓取和过滤网络数据包
websocket·网络协议·tcp/ip·http·网络安全·https·udp
cuijiecheng201817 小时前
音视频入门基础:MPEG2-TS专题(26)——通过FFmpeg命令使用RTP发送TS流
ffmpeg·音视频
18538162800余。18 小时前
矩阵碰一碰发视频源码搭建技术解析
音视频