node.js - WebRTC：在 NodeJS 和 JavaScript 应用程序中的屏幕共享和网络摄像头之间无缝切换

Question

这是我的视频+音频通话代码，它应该可以正常工作。

function loginProcess(success) {
if (success === false) {
    alert("Try a different username");
} else {
    navigator.getUserMedia({
        video: true,
        audio: true
    }, function(myStream) {
        stream = myStream;
        local_video.srcObject = stream;

        var configuration = {
            "iceServers": [{
                "url": "stun:stun2.1.google.com:19302"
            }]
        }

        myConn = new webkitRTCPeerConnection(configuration, {
            optional: [{
                RtpDataChannels: true
            }]
        });

        dataChannel = myConn.createDataChannel("channel1", {
            reliable: true
        })
        dataChannel.onerror = function(error) {
            console.log("Error: ", error)
        }
        dataChannel.onmessage = function(event) {
            chatArea.innerHTML += "<div class='left-align' style='display:flex;align-items:center;'><img src='assets/images/other.jpg' style='height:40px;width:40px;' class='caller-image circle'><div style='font-weight:600;margin:0 5px;'>" + connected_user + "</div>: <div>" + event.data + "</div></div><br/>";
        }
        dataChannel.onclose = function() {
            console.log("data channel is closed");
        }


        myConn.addStream(stream);
        myConn.onaddstream = function(e) {
            remote_video.srcObject = e.stream;

            call_status.innerHTML = '<div class="call-status-wrap white-text"> <div class="calling-wrap"> <div class="calling-hang-action"> <div class="videocam-on"> <i class="material-icons teal darken-2 white-text video-toggle">videocam</i> </div> <div class="audio-on"> <i class="material-icons teal darken-2 white-text audio-toggle">mic</i> </div> <div class="call-cancel"> <i class="call-cancel-icon material-icons red darken-3 white-text">call</i> </div> </div> </div> </div>';

            var video_toggle = document.querySelector('.videocam-on');
            var audio_toggle = document.querySelector('.audio-on');
            video_toggle.onclick = function() {
                stream.getVideoTracks()[0].enabled = !(stream.getVideoTracks()[0].enabled);

                var video_toggle_class = document.querySelector('.video-toggle');
                if (video_toggle_class.innerText == 'videocam') {
                    video_toggle_class.innerText = 'videocam_off';
                } else {
                    video_toggle_class.innerText = 'videocam';
                }
            }

            audio_toggle.onclick = function() {
                stream.getAudioTracks()[0].enabled = !(stream.getAudioTracks()[0].enabled);

                var audio_toggle_class = document.querySelector('.audio-toggle');
                if (video_toggle_class.innerText == 'mic') {
                    video_toggle_class.innerText = 'mic_off';
                } else {
                    video_toggle_class.innerText = 'mic';
                }

            }
            hangup();

        }

        myConn.onicecandidate = function(event) {
            if (event.candidate) {
                send({
                    type: "candidate",
                    candidate: event.candidate

                })
            }
        }


    }, function(error) {
        console.log(error);
    });

  }
}

我添加了一个共享屏幕按钮，如下所示：

<button id="share-btn" class="btn waves-effect"> Share Screen</button>

我打算做什么： 单击此按钮时，我想在不中断通信的情况下将视频流从网络摄像头切换到屏幕共享。

我尝试了什么： 在 client.js 文件中添加了此代码。

share_btn.addEventListener("click", function () {
navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true
    }).then(successProcess2, errorProcess2);
)}

在“successProcess2”函数中，我从“loginProcess”函数中复制了整个代码。

结果：但是，这种方法只有在我在拨打电话之前开始共享屏幕时才有效。如果我在通话进行时尝试切换到屏幕共享，网络摄像头视频源不会更改为收件人选项卡中我们计算机的屏幕，尽管它显示“...将您的屏幕共享到 http://xxx.. 。“ 盒子。

标签： node.jssocket.iowebrtc