addTrack()

Before we talk about addTrack, let’s take a look at the addStream() method

  • AddStream () is outdated and officially not recommended

Adds a local source of MediaStream audio or video to the WebRTC peer connection flow object. The official recommendation is to use another method, addTrack

RTCPeerConnection. AddTrack () will add new media track to track, the track will be transmitted to the other party, etc

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

Above code: Add audio and video streams from the user’s camera to the connection, and then send an offer to the signaling service with an SDP object that contains parameters related to the current audio and video.

Those interested in the RTCPeerConnection process can refer to this article at juejin.cn/post/684490…

If you do audio and video chat related products, then addTrack just meets your needs, after all, you need to use the user’s camera, microphone (the browser will ask the user whether authorization). But you just want to build audio and video tracks, you don’t need a camera, you don’t need a microphone, so how do we do that?

addTransceiver()

AddTransceiver Create a new RTCRtpTransceiver and add it to the RTCPeerConnection associated with the transceiver set. Each transceiver represents a bidirectional stream with RTCRtpSender and RTCRtpReceiver.

grammar

Let rtcTransceiver = rTCpeerconnection. addTransceiver (trackOrKind, init);

  • TrackOrKind: MediaStreamTrack to be associated with the transceiver, or a track whose DOMString is used as a KIND receiver

In this case, the video track will be called “video”, the audio track will be called “audio”

  • Init: This parameter is optional. As follows:

Direction: preferred direction of the transceiver. This value is used to initialize the new object RTCRtpTransceiver RTCRtpTransceiver. The direction attribute.

SendEncodings: List of encodings allowed when sending RTP media from RTCRtpSender. Each entry is of type RTCRtpEncodingParameters.

Streams: MediaStream List of objects to add to the transceiver RTCRtpReceiver; These are the flows that will be specified by the track event of the remote peer RTCPeerConnection when that event occurs.

An example: add a one-way audio and video stream transceiver

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

The above code will only receive the audio and video stream sent by the peer end, and will not lose its own audio and video transmission to the peer end.

direction:

River’s lake goodbye

If you have some inspiration, please click a “like” to encourage, thank you ~

Update:

Note that addTransceiver compatibility problem is not supported by Safari on ios and MAC. If you want to integrate WeBRTC connection sessions on Safari, you can initiate sessions by signaling server. Refer to the weBRTC reverse process in the following article:

Juejin. Cn/post / 684490…