webRTC实现一对一通话视频流程

WebRTC 需要一个 信令服务器(使用 WebSocket、Socket.io 或 WebRTC SDP 交换),用于两端互相交换连接信息(SDP、ICE)。

具体流程

1. 获取本地音视频流
  • 设备 A 和 B 通过 getUserMedia() 获取摄像头和麦克风的音视频流。
  • 显示本地视频流。
2. 创建 PeerConnection
  • A 和 B 各自创建 RTCPeerConnection 实例。
  • 将本地音视频流添加到 RTCPeerConnection
3. 交换 SDP(信令过程)(媒体协商)
  1. A 创建 Offer
    • A 生成 SDP Offer(包含音视频编码信息)。
    • A 通过 信令服务器 发送 Offer 给 B。
  2. B 处理 Offer 并创建 Answer
    • B 收到 Offer 并设置为远端描述。
    • B 生成 SDP Answer 并通过 信令服务器 发送给 A。
  3. A 处理 Answer
    • A 收到 Answer 并设置为远端描述。
4. 交换 ICE 候选(用于 NAT 穿透)(网络协商)
  • A 和 B 监听 onicecandidate 事件,获取 ICE 候选信息。
  • 通过 信令服务器 互相交换 ICE 候选信息。
  • A 和 B 分别将对方的 ICE 候选信息添加到 RTCPeerConnection,尝试建立 P2P 连接。
5. 建立 P2P 连接并传输音视频
  • A 和 B 成功建立 WebRTC 连接。
  • B 的 ontrack 事件触发,接收 A 的音视频流并显示。
  • A 的 ontrack 事件触发,接收 B 的音视频流并显示。
6. 关闭连接(可选)
  • A 或 B 关闭连接时,调用 peerConnection.close() 释放资源。
  • 关闭摄像头和麦克风,断开 WebSocket 连接(如果有)。

补充:

1、信令协议设计

相关推荐
却道天凉_好个秋5 分钟前
音视频学习(八十三):视频压缩:MJPEG技术
学习·音视频·mjpeg·视频压缩
qianbo_insist5 分钟前
基于图像尺寸的相机内参拼接视频
数码相机·音视频·拼接
水中加点糖34 分钟前
RagFlow实现多模态搜索(文、图、视频)与(关键字/相似度)搜索原理(二)
python·ai·音视频·knn·ragflow·多模态搜索·相似度搜索
却道天凉_好个秋38 分钟前
音视频学习(八十二):mp4v
学习·音视频·mp4v
winfredzhang1 小时前
从零构建:基于 Node.js 的全栈视频资料管理系统开发实录
css·node.js·html·音视频·js·收藏,搜索,缩略图
行业探路者14 小时前
二维码标签是什么?主要有线上生成二维码和文件生成二维码功能吗?
学习·音视频·语音识别·二维码·设备巡检
Android系统攻城狮19 小时前
Android16音频之获取Record状态AudioRecord.getState:用法实例(一百七十七)
音视频·android16·音频进阶
liefyuan20 小时前
【RV1106】rkipc:分析(一)
音视频
aqi0021 小时前
FFmpeg开发笔记(九十八)基于FFmpeg的跨平台图形用户界面LosslessCut
android·ffmpeg·kotlin·音视频·直播·流媒体
广州服务器托管21 小时前
比较优秀的视频音频播放器PotPlayer64-v1.7.22764绿色版
运维·windows·计算机网络·电脑·音视频·可信计算技术