The introduction

In the previous article has realized the local simulation of one-to-one chat and real network one-to-one video chat, this article in front of the network one-to-one chat on the basis of transformation, chat can be achieved at the same timeFeel free to switch screen sharingAnd theirCamera picture

Implementation approach

  1. First, establish a one-to-one video call foundation
  2. Get the screen share stream locally with an active trigger action and save a copy locally
  3. After obtaining the screen sharing stream, change the video stream information in PeerConnection, remove the local camera stream, and bind the screen sharing stream
  4. After the new flow binding is complete, a new communication connection is re-established with the opposite party, that is, the offer is re-created, the opposite party listens for the offer and sends the response
  5. The principle of switching the local camera screen and screen sharing stream is the same, that is, the media information bound in peerConnection is changed and the link is re-established

demo

Online experience

Want to experience the comment experience, improve the code after all open source

Specific code

The rest of the basic code for setting up video calls is no longer shown, just look at my previous article

  • Create a video sharing stream
// Share the screen
        shareScreenStream(){
            const that = this;
            const displayMediaStreamConstraints = {
                video: {
                    cursor: "always"
                },
                audio: true
            };
            // Get the share window stream
            if (navigator.mediaDevices.getDisplayMedia) {
                navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints).then(function (mediaStream) {
                    console.log("mediaStream", mediaStream)
                    that.shareStream = mediaStream;
                    // Remove local camera streaming
                    that.pc.removeStream(that.localStream)
                    // Add a screen sharing stream
                    that.pc.addStream(mediaStream)
                    // Resend the offer to establish a communication
                    that.onCreateOffer();
                    // Change the local video window information to screen share information
                    let video = document.querySelector('#local');
                    if ("srcObject" in video) {
                        video.srcObject = that.shareStream;
                    } else {
                        video.src = window.URL.createObjectURL(that.shareStream);
                        video.volume = 0
                    }
                    // eslint-disable-next-line no-unused-vars
                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                    that.isLocalStream = false;
                }).catch(error= >{
                    console.log("error",error)
                    that.$message.error("Media device obtaining exception")}); }else {
                console.log("navigator.mediaDevices.getDisplayMedia false");
                that.$message.error("Not supported by browsers")}Copy the code
  • Flow switch
         // Cut back to the local camera
        changeLocalStream(){
            const that = this;
            // Remove the video sharing stream
            that.pc.removeStream(that.shareStream)
            // Add a local camera stream
            that.pc.addStream(that.localStream)
            // Re-establish the link
            that.onCreateOffer();
            // Switch local media display
            that.nativeMedia();
            that.isLocalStream = true;
        },
Copy the code

The last

  • Article source public accountDavor suker share