WebRTC 之 addTransceiver() 与 addTrack()

11,778 阅读2分钟

addTrack()

在说addTrack之前,我们先一起了解一下 addStream()方法

  • addStream() 已过时,官方不推荐使用

将一个MediaStream音频或视频的本地源,添加到WebRTC对等连接流对象中。官方推荐我们使用另外一个方法addTrack

RTCPeerConnection.addTrack()将新的媒体轨道添加到轨道集,该轨道将被传输到另一对等方

        navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(async (stream: any) => {
            for (const track of stream.getTracks()) {
                this.webPeer.addTrack(track);
            }

上述代码:将用户摄像机的音频和视频流添加到连接中,然后通过发送包含SDP对象(SDP对象中包含当前音视频的相关参数)的offer到信令服务。

RTCPeerConnection连接过程感兴趣的同学可以参考这一篇文章 juejin.cn/post/684490…

如果你是做音视频聊天相关的产品,那么addTrack 刚好能满足你的需求,毕竟需要使用到用户的摄像头、麦克风(浏览器会询问用户是否授权)。但是你只想建立音视频轨道,并不需要使用摄像头、麦克风,那我们应该怎么去做呢?

addTransceiver()

addTransceiver创建一个新的RTCRtpTransceiver并将其添加到与关联的收发器集中RTCPeerConnection。每个收发器都代表一个双向流,并带有RTCRtpSenderRTCRtpReceiver

语法

let rtcTransceiver = RTCPeerConnection .addTransceiver(trackOrKind,init);

  • trackOrKind: MediaStreamTrack以与所述收发器相关联,或者一个DOMString被用作kind接收器的的track

这里视频轨道就传"video",音频轨道就传"audio"

  • init: 可选参数。如下:

direction:收发器的首选方向性。此值用于初始化新RTCRtpTransceiver对象的RTCRtpTransceiver.direction属性。

sendEncodings:从中发送RTP媒体时允许的编码列表RTCRtpSender。每个条目都是类型RTCRtpEncodingParameters

streams: MediaStream要添加到收发器的对象列表RTCRtpReceiver;当远程对等方RTCPeerConnectiontrack事件发生时,这些是将由该事件指定的流。

举个例子: 添加一个单向的音视频流收发器

            this.rtcPeerConnection.addTransceiver("video", {
                direction: "recvonly"
            });
            this.rtcPeerConnection.addTransceiver("audio", {
                direction: "recvonly"
            });

上述代码只会接收对端发过来的音视频流,不会将自己的音视频流传输给对端。

direction:

江湖再见

如果对你有些许启发,请点一个赞鼓励一下,谢谢~

更新内容:

要注意 addTransceiver 兼容性问题,在ios、mac safari不支持此特性,如果想在safari上兼容webrtc连接会话,可以由信令服务端发起会话。参考下面文章中webrtc逆过程:

juejin.cn/post/684490…