Question

我正在尝试使用chrome扩展程序使用WebRTC和socket.io编写SCREEN SHARING的代码。

我可以在Web应用程序中与多用户连接。

此后，我调用sendStream（）并设置peerConn.addTrack（track，stream） peerConn.ontrack（）调用每个连接（客户端）。

我正在通过getUserMedia（）获取流

var sharedScreen = document.querySelector('#shared-screen');
sharedScreen.srcObject = remoteStream;

但是我陷入了一个困境：当我完成一对一连接时，peerConn.ontrack（）中出现了流，并且可以正确显示视频元素中的流

但对于多连接（一对多），peerConn.ontrack（）调用并获得了流，但无法在html的视频元素中显示该流。在这种情况下，仅接收到流，但不显示在视频元素中。（能否请您给出一个原因）*

function sendStream(stream) {
    console.log('UI: sendStream() ', stream);
    if (typeof stream !== 'undefined') {
        console.log('UI: creating peer connection in sendStream()');

        stream.getTracks().forEach(function(track) {
            // adding tracks
            peerConn.addTrack(track, stream);
        });

        console.log('isInitiator', isInitiator);
        if (isInitiator) {
            peerConn.createOffer(offerOptions).then(function(offer) {
                onLocalSessionCreated(offer);
            })
        }
    }else{
        alert("stream is:" + typeof(stream));
    }
}

/**************************************************************************** 
 * WebRTC peer connection and data channel
 ****************************************************************************/

var peerConn;
var dataChannel;

function signalingMessageCallback(message) {
    console.log('Client received message:', message);
    if (message.type === 'offer') {
        console.log('Got offer. Sending answer to peer.');
        peerConn.setRemoteDescription(new RTCSessionDescription(message)).then(()=>{
            console.log("Answer creating");
            peerConn.createAnswer().then((answer) => {
                console.log("Answer creating > ",answer)
                onLocalSessionCreated(answer);
            }, logError)
        })
        .catch(logError);

    } else if (message.type === 'answer') {
        console.log('Got answer.');
        peerConn.setRemoteDescription(new RTCSessionDescription(message), function(){}, logError);

    } else if (message.type === 'candidate') {
        console.log('Adding ICECandidate : peerConn.addIceCandidate()');
        peerConn.addIceCandidate(new RTCIceCandidate({candidate: message.candidate, sdpMLineIndex: message.label}));

    } else if (message === 'bye') {
        // TODO: cleanup RTC connection?
    }
}

function createPeerConnection(isInitiator, config) {
    console.log('Creating Peer connection as initiator?', isInitiator, 'config:', config);
    peerConn = new RTCPeerConnection(RTCConfiguration);

    // send any ice candidates to the other peer
    peerConn.onicecandidate = function (event) {
        console.log('onIceCandidate event:', event);
        if (event.candidate) {
            sendMessage({
                type: 'candidate',
                label: event.candidate.sdpMLineIndex,
                id: event.candidate.sdpMid,
                candidate: event.candidate.candidate
            });
        } else {
            console.log('End of candidates.');
        }
    };
    // called for each connection
    // stream received for each connection
    // but not showing in video element only for multi connection  
    // successfully showing for peer connection 
    peerConn.ontrack = function(event){
        console.log("stream added: peerConn.ontrack", event.streams[0], event.streams[0].id);
        let remoteStream = event.streams[0];
        sharedScreen.srcObject = remoteStream;
        var playPromise = sharedScreen.play();

        // playPromise won’t be defined.
        if (playPromise !== undefined) {
            playPromise.then(function() {
                // Automatic playback started!
            }).catch(function(error) {
                console.log("ontrack: error", error);
            });
        }
    }
}

function onLocalSessionCreated(desc) {
    console.log('local session created:', desc);
    peerConn.setLocalDescription(desc, function () {
        console.log('sending local desc:', peerConn.localDescription);
        sendMessage(peerConn.localDescription);
    }, logError);
}

function onDataChannelCreated(channel) {
    console.log('onDataChannelCreated:', channel);

    channel.onopen = function () {
        console.log('CHANNEL opened!!!');
    };

    channel.onmessage = (webrtcDetectedBrowser == 'firefox') ? 
        receiveDataFirefoxFactory() :
        receiveDataChromeFactory();
}

function receiveDataChromeFactory() {
    return function onmessage(event) {
        console.log("data received : channel.onmessage");
        debugger;
    }
}   

function receiveDataFirefoxFactory() {
    return function onmessage(event) {
        console.log("data received : channel.onmessage");
        debugger;
    }
}

我能否可以实现行业水平的视频/屏幕共享会议网络应用，请提供一些好的资源（一次可以容纳1000个以上的客户，并且有多个会话）。我听说过SFU / MCU Janus WebRTC Server等。

我们将不胜感激。编码愉快。

流已接收，但未显示在视频元素html中，仅用于多连接

0 个答案: