webrtc音视频通话(二)简单音视频通话
全球位置系统: WebRTC语音视频通话(一)搭建TURN服务器 WebRTC语音视频通话(二)简单音视频通话 WebRTC语音视频通话(三)整合websocket
git地址
这是一个位于GitHub上的项目存储空间
这里不做深入介绍websocket的知识内容, 仅专注于 websocket 与 rtc 的整合方案. 如果只是想了解基本概念, 可以参考 springboot 整合 websocket (一) 简单聊天室
如需进一步了解 websocket 的具体实现细节, 可访问上述链接获取详细教程.
1、简单说下webrtc的流程
Webrtc represents peer-to-peer communication, meaning in actual practice only two parties are involved in the exchange. To establish a communication link between these two individuals, they must engage in necessary information exchange to ensure the security of the connection. Moreover, in the adoption of Webrtc technology, it is imperative to ensure that its encryption is achieved through SSH mechanisms, typically using HTTPS and WebSockets protocols.
借用一幅图

1.1 创建端点的解析
以下解析不包括websockt,只针对stun做解析。与上图略有不同
第一步是让Client A首先创建端点(Create PeerConnection),随后添加音视频流(Add Streams)。然后告知Client B,请其也创建一个端点。
当Client B接收到相关通知后,该客户端会建立连接(Create PeerConnection),以配置音频和视频流(Add Streams)。
接下来,Client B生成一个用于回答的SDP对象(Create Answer),完成保存并发送到Client A。
Client A收到用于answer的SDP后,保存下来。
随后
最后,Client B保存收到的用于offer的SDP对象
以上步骤完成之后:
rtc自行收集了Candidate信息,并由回调函数告知你需要参与的信息交换。
在完成候选人信息的交换后, 从而实现了P2P连接的建立, 并通过回调函数调用, 将来自远程端的视频流传给你
1.2 交换Candidate信息
Candidate信息是在完成交换后SDP对象被交换完毕时会被自动收集的信息。当创建端点时(即生成PeerConnection),会注册关联的Callback函数onIceCandidate。
创建回调函数(onIceCandidate)
将Candidate信息发送给另一端(a发给b,b发给a)
请将接收到的候选人信息(addIceCandidate)作为操作对象。
交换完Candidate信息后,P2P连接就建立好了。
在文末名片处可免费索取音视频开发学习资料,请注意该资料包含(FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs)以及其他相关资源
见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
2、新建springboot项目,并开启ssh
因为rtc必须使用ssh,所以springboot需要使用https协议才可以
2.1 生成ssh自签名文件
在终端中执行
执行时,会要求输入密码;
执行后,会在根目录下生成一个webrtc.keystore 的文件

2.2 配置ssh信息
将webrtc.keystore 文件放在resource目录下

在application.yaml 中填写配置信息
2.3 检测一下能不能跑起来
运行就行,能跑起来就OK。
3、编写websocket服务类
这个简单的演示程序仅针对单个房间设计,并未实现房间自动控制功能。因此WebSocket通信代码相对简洁,并且主要的逻辑实现集中在JavaScript文件中。
3.1 先放一下Message实体类
3.2 服务类
主要有以下信息:
加入房间(into)
发送 sdp 对象(send-sdp)
交换 candidate 信息(send-candidate)
4、页面
4.1 html
这部分不太重要,就直接放上来了
4.2 webrtc工具类 webrtc-util.js
包括以下方法:
打开本地音视频流
创建PeerConnection对象
创建用于office的SDP对象
创建用于answer的SDP对象
保存SDP对象
保存Candidate信息
收集 candidate 的回调
获得远程视频流的回调
特别需要注意的是,在创建PeerConnection对象之后,并且在打开本地音视频流之前完成这两个回调操作。
4.2.1 本地变量
其中的 ice对象,根据上一篇测试通过的stun服务器信息填写。
4.2.2 打开本地音视频流
4.2.3 创建 PeerConnection 对象
4.2.4 创建用于 offer 的 SDP 对象
4.2.5 创建用于 answer 的 SDP 对象
4.2.6 保存远程的 SDP 对象
4.2.7 保存 candidate 信息
4.2.8 收集 candidate 的回调
4.2.9 获得 远程视频流 的回调
以上代码都写在 webrtc-util.js 中,是可以复用滴
随后,在HTML环境中加载该JavaScript脚本,并将其与WebSocket进行集成。包括但不限于通知信息及候选者数据等具体内容,请确保所有相关信息均通过WebSocket协议向另一方发送以实现数据同步功能。
End
全球定位:
在本次webrtc音视频通话系列文章的第一篇(一)中, 本文将介绍如何在本次webrtc音视频通话系列文章的第一篇(一)的基础上, 完成Turn服务器的搭建工作
基于Webrtc的简短语音和视频通信在Part II中介绍了一个简单的实现方法
将webrtc支持的语音与视频通话(第三部分)与websocket技术进行集成
基于Webrtc技术的语音与视频通话(二)深入探讨基本的语音与视频通信
★文末名片可免费领取音视频开发学习资源,并包含(FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs)等技术参数及音视频学习路线图等信息
见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
