一对一WebRTC视频通话系列（二）——websocket和join信令实现

最新推荐文章于 2024-05-13 22:57:57 发布
最新推荐文章于 2024-05-13 22:57:57 发布
阅读量1.6k 收藏 11
点赞数 40
分类专栏： webrtc 文章标签： websocket 网络协议 spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45087381/article/details/138290208
版权

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

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

一对一WebRTC视频通话系列（一）—— 创建页面并显示摄像头画面

websocket和join信令实现

一、websocket实现

1.1客户端

在main.js文件中，定义了一个名为ZeroRTCEngine的类，该类使用WebSocket进行通信。ZeroRTCEngine类的实例化过程如下：

  1. 首先，声明并定义一个名为zeroRTCEngine的类，接受一个wsUrl参数。
  2. 在ZeroRTCEngine类中，定义一个init方法，用于初始化WebSocket地址。
  3. 定义ZeroRTCEngine类的方法createWebsocket，用于创建WebSocket对象。
  4. 在createWebsocket方法中，定义多种WebSocket事件处理函数.
  5. 定义onopen、onmessage、onclose和onerror方法，用于处理WebSocket连接状态和接收到的消息。

在实际使用中，通过调用ZeroRTCEngine类的createWebsocket方法来创建一个WebSocket实例，并监听各种事件（如打开、消息传递、关闭和错误）。

	//定义 ZeroRTCEngine 的 init 方法
	//参数 wsUrl：WebSocket 的地址
	ZeroRTCEngine.prototype.init = function(wsUrl) {
	    //设置 WebSocket url
	    this.wsUrl = wsUrl;
	    this.signaling =null;
	}
	
	//定义 ZeroRTCEngine 的 createWebsocket 方法
	ZeroRTCEngine.prototype.createWebsocket = function() {
	    //创建 WebSocket 对象
	    zeroRTCEngine = this;
	    zeroRTCEngine.signaling = new WebSocket(this.wsUrl);
	
	    //设置打开函数
	    zeroRTCEngine.signaling.onopen = function () {
	        zeroRTCEngine.onopen();
	    }
	
	    //设置关闭函数
	    zeroRTCEngine.signaling.onclose = function (event) {
	        zeroRTCEngine.onclose(event);
	    }
	    //设置错误函数
	    zeroRTCEngine.signaling.onerror = function (event) {
	        zeroRTCEngine.onerror(event);
	    }
	    //设置消息传递函数
	    zeroRTCEngine.signaling.onmessage = function (event) {
	        zeroRTCEngine.onmessage(event);
	    }
	}
	
	
	ZeroRTCEngine.prototype.onopen = function() {
	    console.log("WebSocket connection established.");
	}
	
	ZeroRTCEngine.prototype.onmessage = function(event) {
	    console.log("Received message:" + event.data);
	    //解析收到的消息
	    var message = JSON.parse(event.data);
	}
	
	ZeroRTCEngine.prototype.onclose = function(event) {
	    console.log("WebSocket connection closed." + event.data + ", reason" + EventCounts.reason);
	}
	
	ZeroRTCEngine.prototype.onerror = function(event) {
	    console.log("WebSocket connection error:" + event.data);  
	}
	
	zeroRTCEngine = new ZeroRTCEngine("ws://192.168.3.181:8099");
	zeroRTCEngine.createWebsocket();

1.2服务端

创建一个名为signal_server.js的js新文件，搭建简单的WebSocket服务器，用于处理客户端连接、消息发送和接收、连接关闭等基本操作。在实际应用中，可能需要根据需求对代码进行修改和扩展。

  1. 使用ws.createServer()方法创建一个WebSocket服务器。这个方法接受一个回调函数作为参数，该回调函数在客户端连接到服务器时被调用。
  2. 在回调函数中，使用console.log()输出一条connection established的消息，表示连接已建立。然后，向客户端发送一条消息，例如"我收到你的连接了"。
  3. 使用conn.on("text", function (str) {...})监听客户端发送的消息。
    当客户端发送消息时，会触发这个回调函数。使用console.info()输出一条消息，表示收到的消息。
  4. 在连接关闭时，使用conn.on("close", function (code, reason) {...})监听连接关闭。
    当客户端关闭连接时，会触发这个回调函数。使用console.log()输出一条消息，表示连接已关闭。
  5. 使用了conn.on("error", function (err) {...})来监听连接错误。当发生错误时，会触发这个回调函数，输出错误信息。
  6. 使用server.listen()方法将服务器绑定到一个指定的端口。在实际应用中，通常需要根据不同的需求来修改这个端口。
	// 引入ws模块
	var ws = require("nodejs-websocket");
	// 定义端口号
	var port =8099;
	
	// 创建一个WebSocket服务器
	var server = ws.createServer(function (conn) {
	    // 连接建立时的输出
	    console.log("New connection");
	    // 向客户端发送消息
	    conn.sendText("我收到你的连接了")
	    // 监听客户端发送的消息
	    conn.on("text", function (str) {
	        console.info("Received msg:"+str);
	    });
	
	    // 连接关闭时的输出
	    conn.on("close", function (code, reason) {
	        console.log("Connection closed,code:" + code + " reason:" + reason);
	    });
	    // 监听连接错误
	    conn.on("error", function (error) {
	        console.error("发生错误:", error);
	    })
	}).listen(port);

在ubuntu中使用下列指令开启服务端：

	node signal_server.js

在这之前切记先用以下两行命令初始化：

	sudo npm init -y
	sudo npm install nodejs-websocket

在这里插入图片描述
在这里插入图片描述

二、join信令实现

2.1 客户端

修改按钮点击事件

document.getElementById('joinBtn').onclick = function () {
    roomId = document.getElementById('roomId').value;
    if(roomId == '' || roomId == "Please enter the room ID"){
        alert('Please enter the room ID');
        return;
    }

    console.log("joinBtn clicked,roomId: " + roomId);
    //初始化本地码流
    initLocalStream();
}

首先创建一个JSON对象，包含命令（cmd）、房间ID（roomId）和用户ID（uid），然后将这个JSON对象转换为字符串。接着，调用zeroRTCEngine.sendMessage方法将这个字符串发送给服务器，表示用户要加入房间。最后，在控制台输出一条消息，表明用户已经成功加入房间。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";

var localUserId = Math.random().toString(36).substr(2);//本地ID   
var remoteUserId = -1; //对方用户ID
var roomId = -1; //房间ID

ZeroRTCEngine.prototype.sendMessage = function(message) {
    this.signaling.send(message);
}

function doJoin(roomId) {
    var jsonMsg = {
        'cmd': 'join',
        'roomId': roomId,
        'uid': localUserId,
    }; 
    var message = JSON.stringify(jsonMsg); //将json对象转换为字符串
    zeroRTCEngine.sendMessage(message);   //设计方法：用实现方法而不是直接用变量    
    console.info("doJoin message: " + message);
}

运行效果：
在这里插入图片描述

2.2 服务端

修改signal_server.js
1.添加相关宏定义，以及WebRTC所需要用到的Map类。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";


/** ----- ZeroRTCMap ----- */
var ZeroRTCMap = function () {
    this._entrys = new Array();

    this.put = function (key, value) {
        if (key == null || key == undefined) {
            return;
        }
        var index = this._getIndex(key);
        if (index == -1) {
            var entry = new Object();
            entry.key = key;
            entry.value = value;
            this._entrys[this._entrys.length] = entry;
        } else {
            this._entrys[index].value = value;
        }
    };
    this.get = function (key) {
        var index = this._getIndex(key);
        return (index != -1) ? this._entrys[index].value : null;
    };
    this.remove = function (key) {
        var index = this._getIndex(key);
        if (index != -1) {
            this._entrys.splice(index, 1);
        }
    };
    this.clear = function () {
        this._entrys.length = 0;
    };
    this.contains = function (key) {
        var index = this._getIndex(key);
        return (index != -1) ? true : false;
    };
    this.size = function () {
        return this._entrys.length;
    };
    this.getEntrys = function () {
        return this._entrys;
    };
    this._getIndex = function (key) {
        if (key == null || key == undefined) {
            return -1;
        }
        var _length = this._entrys.length;
        for (var i = 0; i < _length; i++) {
            var entry = this._entrys[i];
            if (entry == null || entry == undefined) {
                continue;
            }
            if (entry.key === key) {// equal
                return i;
            }
        }
        return -1;
    };
}

2.定义Client函数，用于初始化用户信息

function Client(uid, conn, roomId) {
    this.uid = uid;     // 用户所属的id
    this.conn = conn;   // uid对应的websocket连接
    this.roomId = roomId;
}

3.处理加入房间请求
监听客户端发送的消息，如果时加入房间的，利用handleJoin()函数进行处理

// 监听客户端发送的消息
    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;
            
        }
    });

定义handleJoin()函数,处理加入房间请求。它首先获取房间ID和用户ID，然后获取房间Map。如果房间不存在，则创建一个新的房间。如果房间已满，给出提示并拒绝加入请求。如果房间未满，创建一个新的客户端并将其添加到房间。如果房间中用户数大于1，则通知房间中的其他用户有新人加入。

实现原理：
1.从传入的message和conn参数中获取房间ID和用户ID。
2.尝试获取roomId对应的房间Map。如果房间Map不存在，则创建一个新的房间Map。
3.检查房间是否已满。如果已满，给出提示并返回；否则，创建一个新的客户端并将其添加到房间。
4.如果房间中用户数大于1，则遍历房间中的所有用户，通知他们有新人加入。同时，通知自己房间中有新人加入。

function handleJoin(message, conn){
    // 获取房间ID和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    console.log(" uid:"+uid + "try to join room: "+roomId);

    // 获取房间Map
    var roomMap = roomTableMap.get(roomId);
    // 如果房间不存在，则创建一个新的房间
    if(roomMap == null){
        roomMap = new ZeroRTCMap();
        roomTableMap.put(roomId, roomMap);
    }

    // 如果房间已满,给出提示
    if(roomMap.size() >= 1){
        console.error("roomId:" + roomId + " is full");

        conn.sendText('roomId:' + roomId + ' is full');
        return;
    }

    // 创建一个新的客户端
    var client = new Client(uid, conn, roomId);
    // 将用户添加到房间
    roomMap.put(uid, client);
    // 如果房间中的用户数大于1，则通知房间中的其他用户
    if(roomMap.size() > 1){
        
        // 获取房间中的所有用户
        var clients = roomMap.getEntrys();
        for(var i in clients){
            var remoteUid = clients[i].key;
            if(remoteUid != uid){
                // 通知已经在房间的人，有新人加入
                var jsonMsg = {
                    'cmd':SIGNAL_TYPE_NEW_PEER,
                    'remoteUid':uid
                };
                var msg = JSON.stringify(jsonMsg);

                // 通知自己，房间里有的人
                jsonMsg = {
                    'cmd':SIGNAL_TYPE_RESP_JOIN,
                    'remoteUid':remoteUid
                };
                msg = JSON.stringify(jsonMsg);
                console.info("resp-join"+msg);
                conn.sendText(msg);
            }
        }
    }
}

整体代码：

// 引入ws模块
var ws = require("nodejs-websocket");
// 定义端口号
var port =8099;

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";


/** ----- ZeroRTCMap ----- */
var ZeroRTCMap = function () {
    this._entrys = new Array();

    this.put = function (key, value) {
        if (key == null || key == undefined) {
            return;
        }
        var index = this._getIndex(key);
        if (index == -1) {
            var entry = new Object();
            entry.key = key;
            entry.value = value;
            this._entrys[this._entrys.length] = entry;
        } else {
            this._entrys[index].value = value;
        }
    };
    this.get = function (key) {
        var index = this._getIndex(key);
        return (index != -1) ? this._entrys[index].value : null;
    };
    this.remove = function (key) {
        var index = this._getIndex(key);
        if (index != -1) {
            this._entrys.splice(index, 1);
        }
    };
    this.clear = function () {
        this._entrys.length = 0;
    };
    this.contains = function (key) {
        var index = this._getIndex(key);
        return (index != -1) ? true : false;
    };
    this.size = function () {
        return this._entrys.length;
    };
    this.getEntrys = function () {
        return this._entrys;
    };
    this._getIndex = function (key) {
        if (key == null || key == undefined) {
            return -1;
        }
        var _length = this._entrys.length;
        for (var i = 0; i < _length; i++) {
            var entry = this._entrys[i];
            if (entry == null || entry == undefined) {
                continue;
            }
            if (entry.key === key) {// equal
                return i;
            }
        }
        return -1;
    };
}

var roomTableMap = new ZeroRTCMap();

function Client(uid, conn, roomId) {
    this.uid = uid;     // 用户所属的id
    this.conn = conn;   // uid对应的websocket连接
    this.roomId = roomId;
}

// 处理加入房间请求
function handleJoin(message, conn){
    // 获取房间ID和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    console.log(" uid:"+uid + "try to join room: "+roomId);

    // 获取房间Map
    var roomMap = roomTableMap.get(roomId);
    // 如果房间不存在，则创建一个新的房间
    if(roomMap == null){
        roomMap = new ZeroRTCMap();
        roomTableMap.put(roomId, roomMap);
    }

    // 如果房间已满,给出提示
    if(roomMap.size() >= 1){
        console.error("roomId:" + roomId + " is full");

        conn.sendText('roomId:' + roomId + ' is full');
        return;
    }

    // 创建一个新的客户端
    var client = new Client(uid, conn, roomId);
    // 将用户添加到房间
    roomMap.put(uid, client);
    // 如果房间中的用户数大于1，则通知房间中的其他用户
    if(roomMap.size() > 1){
        
        // 获取房间中的所有用户
        var clients = roomMap.getEntrys();
        for(var i in clients){
            var remoteUid = clients[i].key;
            if(remoteUid != uid){
                // 通知已经在房间的人，有新人加入
                var jsonMsg = {
                    'cmd':SIGNAL_TYPE_NEW_PEER,
                    'remoteUid':uid
                };
                var msg = JSON.stringify(jsonMsg);

                // 通知自己，房间里有的人
                jsonMsg = {
                    'cmd':SIGNAL_TYPE_RESP_JOIN,
                    'remoteUid':remoteUid
                };
                msg = JSON.stringify(jsonMsg);
                console.info("resp-join"+msg);
                conn.sendText(msg);
            }
        }
    }
}

// 创建一个WebSocket服务器
var server = ws.createServer(function (conn) {
    // 连接建立时的输出
    console.log("New connection");
    // 向客户端发送消息
    conn.sendText('我收到你的连接了')
    // 监听客户端发送的消息
    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;
            
        }
    });
    
    // 连接关闭时的输出
    conn.on("close", function (code, reason) {
        console.log("Connection closed,code:" + code + " reason:" + reason); 
    });
    // 监听连接错误
    conn.on("error", function (error) {
        console.error("发生错误:", error);
    })
}).listen(port);

运行效果：

客户1：
第一个创建，刚开始没有红框的内容。在客户2新加入后，收到服务端发来的信令。
在这里插入图片描述

客户2：
创建后，会收到服务端发来的，房间内已有的客户1的信息。
在这里插入图片描述
客户3：
房间内已经有2个客户了，会提示房间已满，无法加入房间。
在这里插入图片描述
服务端：
在这里插入图片描述

君莫笑lucky
关注
  • 40
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于websocket+webrtc实现音视频通话demo，下载即可用
03-02
基于Java WebSocket 做信令服务器，使用webrtc浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。从而实现音视频通话。下载启动 输入http://localhost 就可使用
webRTC信令服务器实现音视频聊天
04-23
本Demo使用Nodejs +socket.io搭建webRTC信令服务器， 实现了局域网的音视频聊天，可在局域网下两台电脑浏览器互相视频通话
websocket（简介，数据交互，分房间群聊）
weixin_64037609的博客
10-26 609
websocket是一个互联网传输协议（http也是一个互联网传输协议）websocket是一个持续性互联网传输协议 不像httphttp是一个单次传输协议 每次想进行数据交互都必须先建立浏览器和服务器之间的连接 并且 这个连接会在数据交互结束之后 断开websocket是一个持续性传输协议 相当于在服务器和浏览器之间 建立起了一个持续存在的连接 我们可以在这个连接之上 进行无限制的数据交互。
微信小程序入门六: WebSocket应用
热门推荐
王乐平 技术博客
01-20 7万+
实例内容今天主要说一下微信的WebSocket接口以及在小程序中的使用。WebSocket是什么（简述）微信的WebSocket接口和HTML5的WebSocket基本一样，是HTTP协议升级来的，做为一个新的Socket在B/S上使用，它实现了浏览器与服务器全双工通信。因为这里是做小程序，所以就不对WebSocket的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的WebSocket可以参
websocket
weixin_44978043的博客
11-04 893
1.什么是websocket websocket是一个网络协议，主要用于客户端和服务器之间保持连接的情况下完成数据交互的一种网络协议，经常被用于网络客服应用中 HTTP:超文本传输协议，经常在浏览器和服务器之间的数据交互 HTTP是一种短链接协议，一个请求发送之后，一旦服务器返回数据，连接就会断开 更新网页数据：必须发送请求，获取响应后才能更新网页中展示的数据 解决方案：不能使用HTTP短连接，需要通过长连接的形式，完成连接保持，服务器才能通过保持的连接，给对应的客户端主动推送消息，长连接的实现方式比较常
spring Websocket 使用
join_null的博客
01-03 336
https://www.jianshu.com/p/60799f1356c5
websocket学习（二）
我是渣渣
11-19 995
websocket客户端，服务端通信的最小单位是帧，由1个或者多个帧组成一个条完成的消息(message) 发送端，将消息切割成多个帧，并发送给接收端 接收端，接受消息帧，并将关联的症组装成完整的消息 websocket数据帧格式 单位是比特，比如FIN，RSV1各占一个bit，opcode占据四个bit。 0 1 ...
一对一WebRTC视频通话系列（三）——leave和peer-leave信令实现
君莫笑lucky的博客
05-04 1306
本篇博客主要分为两部分，第一部分为leave信令的实现，即当有客户端离开房间后，服务端和其他在房间内的客户需知晓。第二部分为媒体协商和网络协商相关API。
一对一WebRTC视频通话系列（四）——offer、answer、candidate信令实现
君莫笑lucky的博客
05-05 1314
本篇博客主要讲解offer、answer、candidate信令实现，涵盖了媒体协商和网络协商相关实现。本系列博客主要记录一对一WebRTC视频通话实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。
WebRTC 实现P2P音视频通话——原生IOS端使用WebRTC实现一对一音视频通话
FF_lz的博客
06-02 2091
WebRTC 实现P2P音视频通话——原生IOS端使用WebRTC实现一对一音视频通话
webRTC_ManyToMany:webrtc配合websocket实现多对多视频通话
04-17
webrtc配合websocket实现多对多视频通话 项目目录说明 index.html // 页面地址 index.js // ws服务端 多对多实现方案 一个RTCPeerConnection对应一个人，创建多个RTCPeerConnection对接多个人进行链接。
使用WebRTC搭建前端视频聊天室——信令篇1
08-03
1. 浏览器之间交换建立通信的元数据（信令）必须通过服务器 2. 为了穿越NAT和防火墙 1. 用来控制通信开启或者关闭的连接控制消息 2. 发生错误时用来彼此
WebRtc.rar_WEBSOCKET 视频_webRTC服务器_webrtc与websocket_websocket_web
09-24
实现webrtc的视频通信 采用websocket技术连接 服务器端使用java 客户端基于chrome浏览器
【计算机网络】计算机网络概述、计算机网络性能指标 习题1
2302_76305195的博客
05-11 989
18.在下图所示的采用存储转发方式的分组交换网中，主机A向B发送两个长度为1000B的分组、路由器处理单个分组的时延为 10ms(假设路由器同时最多只能处理一个分组.若在处理某个分组时有新的分组到达，则存入缓存区)，忽略链路的传播时延，所有链路的数据传输速率为1Mb/s，则分组从A发送开始到B接收完为止，需要的时间至少是( )。17.有一个点对点链路的长度为 50km，若数据在此链路上的传播速率为2×10⁸m/s,要使发送512B分组的发送时延和传播时延相等，则该链路的带宽是 ( )。
TCP是如何实现可靠传输的 UDP面向报文 TCP面向字节流是什么意思 TCP和UDP分别适用于什么场合
dianqicyuyan的博客
05-10 398
UDP是用户数据报协议，它是一种无连接的传输层协议，它面向报文，也就是说，UDP对应用层交下来的报文，在添加UDP头之后直接发送出去，不会对数据进行拆分和合并。而TCP是传输控制协议，它也是一种传输层协议，它面向字节流，也就是说，TCP对应用层交下来的数据进行拆分和合并后再发送出去。因此，TCP传输的数据单位是字节流，数据流之间没有明显的界限，需要应用层自己解决数据的边界问题。在应用场景上，UDP适合对实时性要求较高的场景，比如音视频传输，而TCP适合对数据完整性和可靠性要求较高的场景，比如文件传输等。
总结 UDP 的报文结构和注意事项
weixin_73775528的博客
05-11 806
UDP 传输的过程类似于寄信。，不需要建立连接；没有任何安全机制，发送端发送数据报以后，如果因为网络故障该段无法发到对方， UDP 协议层也不会给应用层返回任何错误信息，应用层交给 UDP 多长的报文， UDP 原样发送，既不会拆分，也不会合并；用 UDP 传输 100 个字节的数据：如果发送端一次发送100个字节，那么接收端也必须一次接收100个字节；而不能循环接收10次，每次接收10个字节。大小不能变UDP只有接收缓冲区，没有发送缓冲区：UDP没有真正意义上的。
计算机网络（第八版 谢希仁 编著） 期末复习大纲
最新发布
m0_74000825的博客
05-13 224
期末复习大纲，祝大家考试顺利！
RTSP和RTP/UDP有什么区别
xie__jin__cheng的博客
05-07 666
RTSP通过建立客户端和服务器之间的会话来实现流媒体的控制，可以在不同的媒体服务器之间进行切换和控制。综上所述，RTSP和RTP/UDP在流媒体传输中各自承担不同的角色，RTSP负责流媒体的控制和管理，而RTP/UDP则负责音视频数据的实时传输。它使用可靠的传输协议（如TCP）来传输控制流（如播放、暂停等命令），而数据流（如音视频数据）则通过其他协议（如RTP/UDP）进行传输。- RTP则专注于音视频数据的传输，其数据包包含了时间戳、序列号、负载类型等信息，以便接收端能够正确地重建音视频数据。
用 webRTC 写一个一对一的视频通话
03-31
要使用 webRTC 进行一对一的视频通话，需要以下步骤： 1. 建立本地媒体流对象 使用 getUserMedia() 方法获取本地视频和音频流对象。 ```javascript navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(function(localStream) { // localStream 是本地媒体流对象 }) .catch(function(error) { console.log(error); }); ``` 2. 建立 peer connection 对象 使用 RTCPeerConnection() 方法创建 peer connection 对象，并将本地媒体流对象添加到 peer connection 中。 ```javascript var pc = new RTCPeerConnection(); localStream.getTracks().forEach(function(track) { pc.addTrack(track, localStream); }); ``` 3. 建立远程媒体流对象 通过 peer connection 对象，监听远程的媒体流对象。 ```javascript pc.addEventListener('track', function(event) { // event.streams 是一个媒体流对象数组 var remoteStream = event.streams[0]; }); ``` 4. 发送 offer 和 answer 通过 peer connection 对象，发送 offer 和 answer 信令，建立连接。 ```javascript pc.createOffer() .then(function(offer) { return pc.setLocalDescription(offer); }) .then(function() { // 发送 offer 信令 }) .catch(function(error) { console.log(error); }); // 接收到 offer 信令后，回复 answer 信令 pc.setRemoteDescription(offer) .then(function() { return pc.createAnswer(); }) .then(function(answer) { return pc.setLocalDescription(answer); }) .then(function() { // 发送 answer 信令 }) .catch(function(error) { console.log(error); }); // 接收到 answer 信令后，设置远程描述 pc.setRemoteDescription(answer) .catch(function(error) { console.log(error); }); ``` 5. 连接成功后，进行视频通话 当连接成功后，就可以在页面中显示本地视频和远程视频，并进行视频通话了。 ```javascript // 添加本地视频和远程视频 var localVideo = document.getElementById('localVideo'); var remoteVideo = document.getElementById('remoteVideo'); localVideo.srcObject = localStream; remoteVideo.srcObject = remoteStream; ``` 完整的一对一视频通话示例代码请参考：https://webrtc.github.io/samples/src/content/peerconnection/pc1/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君莫笑lucky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值