RTCmulticonnection 使用现有的 getUserMedia 流答案

【问题标题】：RTCmulticonnection use existing getUserMedia streamRTCmulticonnection 使用现有的 getUserMedia 流
【发布时间】：2019-04-19 17:05:51
【问题描述】：

我准备了一个网络摄像头流媒体应用，因此使用“navigator.mediaDevices.getUserMedia”在视频标签中预览了用户网络摄像头。

在用户点击一个按钮并且“RTCmulticonnection”打开一个房间后，我想添加预览网络摄像头/视频以用作网络摄像头流。

我就是不明白。

我要向您展示的部分在 socket.io 连接建立后开始 - “connection.open” 方法还返回房间已创建并建立连接。所以信令有效 - 我只是不知道如何简单地将我的视频附加到 (RTCmulsiconnection) 连接对象。

我曾尝试使用“attachStreams”方法，但仍未成功。

//Get Users Webcam
 navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
}).then(function(stream) {
    $("#mediaPreview").show();
    let preview = document.getElementById('mediaPreviewVideo');
    preview.srcObject = stream;
    preview.volume = 0;
    preview.play();
});

//Start stream
$("#btnMediaStreamStart").on('click', function(e) {

            //Prevent Default & Hide
            e.preventDefault();

            //Add Classes
            $("#mediaPreviewVideo").addClass('webcam-online');
            $("#mediaStreamStatus").show().addClass('bg-success').html('<small><strong>Live</strong></small>');

            connection.socketURL = 'localhost:9001/';
            let connectionRoom = '123';
            connection.open(connectionRoom, function(e) {
                if (e === true) {
                    connection.attachStreams.forEach(function(localStream) {
                        //How to attach the cam stream? Is my previously created video even part of the "streams"?
                    });
                    connection.mediaConstraints = {
                        audio: {
                            deviceId: selectAudio
                        },
                        video: {
                            deviceId: selectVideo
                        }
                    };
                }
            });

【问题讨论】：

标签： javascript socket.io stream webrtc rtcmulticonnection

【解决方案1】：

尝试使用

connection.addStream(stream);

stream 是您已经捕获的流 - 可能通过 getUserMedia()

【讨论】：