WebRTC 之 addTransceiver() 与 addTrack()

Randall 2020/3/16 11:01:36

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.im/post/5e5a33…

如果你是做音视频聊天相关的产品,那么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:

江湖再见

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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[WebRTC 之 addTransceiver() 与 addTrack()]http://www.zyiz.net/tech/detail-118591.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程