聊下WebRTC 3个添加流的API

当完成音视频采集后,可以有3个API可以将媒体流添加到PeerConnection中,本文简单聊下这几个API的使用与区别:

  • addStream

  • addTrack

  • addTransceiver

前提

  1. 通过getUserMedia采集后的数据类型为MediaStream,MediaStream里面一般包含一个音频和一个视频的MediaStreamTrack(详细了解看这里:juejin.cn/post/692456...

  2. WebRTC的sdp有2种类型,一种为plan-b,一种为unified-plan,简单来说unified-plan是一个新的标准(详细了解看这里:juejin.cn/post/689865...

使用姿势

根据历史出现的顺序,分别为 addStream -> addTrack -> addTransceiver,从中可以看到一些信息,一开始是以stream维度来操作,后面变成了以track为维度,可以更精细化控制

addStream

使用方式就是 pc.addStream(mediaStream),把整个流添加到pc中,这个API已经被标记为废弃,但是在plan-b模式下还可以使用,如果想要在unified-plan下使用的话,则会报错:

scss 复制代码
bool PeerConnection::AddStream(MediaStreamInterface* local_stream) {
  RTC_DCHECK_RUN_ON(signaling_thread());
  RTC_CHECK(!IsUnifiedPlan()) << "AddStream is not available with Unified Plan "
                                 "SdpSemantics. Please use AddTrack instead.";
  
 ...
}

addTrack

addTrack是3个API中各个教程、课程出现频率最多的一个API,使用方式也非常简单:

ini 复制代码
mediaStream.getTracks().forEach(track => {
    pc.addTrack(track)
});

addTrack其实是有返回值的,类型为RTCRtpSender,是一个发送的控制器,这个控制器的用法会在下面讲。

addTransceiver

addTransceiver的使用方式相对来说比较复杂,参数也多,addTransceiver的返回值为RTCRtpTransceiver是一个收发控制器,包括了一个RTCRtpSender和一个RTCRtpReceiver,不但可以控制发布,也可以控制接收。

看下简单的用法和参数:

less 复制代码
mediaStream.getTracks().forEach(track => {
    pc.addTransceiver(track, {
        streams: [mediaStream],
        direction: 'sendonly', // recvonly sendrecv
        sendEncodings: {...}
    })
});

可以看到有一个direction的参数,这个实际上对应的是sdp对应audio/video MediaSection部分的direction,通过API设置的direction不同,就可以控制MediaSection的行为:

  • 只准备发送:a=sendonly

  • 只准备接收:a=recvonly,此时没有track,可以直接填字符串如'audio'

  • 既发送又接收:a=sendrecv

sendEncodings里可以控制发送码率,simulcast什么的,设置完成后,也可以通过RTCRtpSender去修改(通过getParameters和setParameters)

总结

addTransceiver是推荐使用的API,兼容性也不错,Chrome M69就可以使用。

同时也能优雅地实现只生成recvonly的sdp,比如我们准备生成sdp去订阅,这时没有对应的API,这此只能使用下面的方式强行生成sdp中的audio/video MediaSection部分,但是这2个属性已经被标记为废弃了,强烈不推荐使用了

php 复制代码
pc.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
});

使用addTransceiver就可以:

css 复制代码
pc.addTransceiver('audio', { direction: 'recvonly' })
pc.addTransceiver('video', { direction: 'recvonly' })
pc.createOffer()
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试