WebRTC API分析

主题

本文详细描述常用的webrtc api

媒体协商类

myPeerConnection.createOffer([options]);

var options = {

offerToReceiveAudio: true, // 告诉另一端,你是否想接收音频,默认true

offerToReceiveVideo: true, // 告诉另一端,你是否想接收视频,默认true

iceRestart: false, // 是否在活跃状态重启ICE网络协商

};

iceRestart:只有在处于活跃的时候,iceRestart=false才有作用。

RTCPeerConnection .createAnswer([ options ]);

options :

voiceActivityDetection (布尔型,默认 true): 是否启用语音活动检测。

offerToReceiveAudio (整型,默认 1): 希望接收的音频流数量。

offerToReceiveVideo (整型,默认 1): 希望接收的视频流数量。

RTCPeerConnection .setLocalDescription 设置本地sdp描述

RTCPeerConnection .setRemoteDescription设置对端sdp描述

RTCPeerConnection.addTrack(track, ...streams) 用于将一个或多个媒体轨道添加到 RTCPeerConnection
track: 要添加的 MediaStreamTrack 对象。
...streams: 可选的 MediaStream 对象列表,表示该轨道属于哪些流。
例子:
//添加本地轨道
localStream.getTracks().forEach((track) => pc.addTrack(track, localStream));

网络协商类

RTCPeerConnection.addIceCandidate(candidate) 添加一个 ICE 候选人

candidate

注意Android和Web端的不同。

RTCPeerConnection补充

pc = new RTCPeerConnection([ configuration ]);

configuration可选

bundlePolicy 一般用maxbundle

banlanced:音频与视频轨使用各自的传输通道

maxcompat:每个轨使用自己的传输通道

maxbundle:都绑定到同一个传输通道
iceTransportPolicy 一般用all

指定ICE的传输策略

relay:只使用中继候选者

all:可以使用任何类型的候选者

iceServers

其由RTCIceServer组成,每个RTCIceServer都是一个ICE代理的服务器

rtcpMuxPolicy一般用require

rtcp的复用策略,该选项在收集ICE候选者时使用

使用例子:

复制代码
var defaultConfiguration = {
        bundlePolicy: "max-bundle",
        rtcpMuxPolicy: "require",
        iceTransportPolicy: "all",//relay 或者 all
        // 修改ice数组测试效果,需要进行封装
        iceServers: [
            {
                "urls": [
                    "turn:192.168.1.25:3478?transport=udp",
                    "turn:192.168.1.25:3478?transport=tcp"     // 可以插入多个进行备选
                ],
                "username": "jbj",
                "credential": "123456"
            },
            {
                "urls": [
                    "stun:192.168.1.25:3478"
                ]
            }
        ]
    };

    pc = new RTCPeerConnection(defaultConfiguration);

重要事件回调

onicecandidate 事件:

  • RTCPeerConnection 对象收集到一个新的 ICE 候选人时,会触发这个事件。

  • 事件回调函数会收到一个 RTCPeerConnectionIceEvent 对象,其中包含新收集到的 RTCIceCandidate 对象。

  • 你可以在这个事件处理函数中,将收集到的 ICE 候选人发送给对方对等端。

ontrack 事件:

  • RTCPeerConnection 对象接收到来自远端的媒体流时,会触发这个事件。

  • 事件回调函数会收到一个 RTCTrackEvent 对象,其中包含新收到的 MediaStreamTrack 对象以及相关的 MediaStream 对象。

  • 你可以在这个事件处理函数中,将接收到的媒体流添加到页面上进行渲染。

onconnectionstatechange 事件:

  • **当 RTCPeerConnection 对象的连接状态发生变化时,**会触发这个事件。

  • 连接状态可以是 newconnectingconnecteddisconnectedfailedclosed

  • 你可以在这个事件处理函数中,根据连接状态的变化采取相应的措施,如更新 UI、重试连接等。

oniceconnectionstatechange 事件:

  • RTCPeerConnection 对象的 ICE 连接状态发生变化时,会触发这个事件。

  • ICE 连接状态可以是 newcheckingconnectedcompleteddisconnectedfailedclosed

  • 你可以在这个事件处理函数中,根据 ICE 连接状态的变化采取相应的措施,如诊断网络问题、重试连接等。

学习资料分享

0voice · GitHub

相关推荐
肖爱Kun13 小时前
Webrtc本端发candidate给对端
webrtc
肖爱Kun16 小时前
Webrtc本端和对端信令交互步骤
服务器·webrtc
肖爱Kun2 天前
Webrtc信令交互
服务器·webrtc
Fisher3Star3 天前
WebRTC Transport 两种创建方式的差异解析
webrtc
Fisher3Star3 天前
FFmpeg推流至Mediasoup全流程指南
webrtc
Fisher3Star4 天前
mediasoup 创建Router全流程详解
webrtc
声网4 天前
OpenAI 的 WebRTC 秘密架构:没有 SFU?没有问题!丨 Voice Agent 学习笔记
学习·架构·webrtc
HySpark8 天前
VAD 与流式 ASR 踩坑复盘及完整解决方案
webrtc·vad·离线语音转写·流式asr·qwen-asr·音频预处理
徐子元竟然被占了!!8 天前
WebRTC协议
webrtc
ZC跨境爬虫8 天前
跟着 MDN 学 HTML day_28:(使用选择器 API 在 DOM 树中进行选择与遍历)
前端·ui·html·音视频·webrtc