Share Bildschirm mit getScreenId.js in WebRTC für zwei Peers

Question

Ich versuche, Share-Screen-Funktion in webrtc Videokonferenzen zu implementieren. Von Vorschlag, folge ich jetzt Muaz-Khan-Lösung mit https://www.webrtc-experiment.com/getScreenId/. Ich kann die Anwendungsbilder von einem Peer einfach erfassen und den Videostream durch den Capture-Stream ersetzen. Aber es ist ein Videokonferenz-Experiment, also müssen zwei Browser eine Videokonferenz miteinander durchführen. Zum Beispiel hat Browser 1 Video-Streams A (lokales Video), Video-Streams B (fernes Video); Browser 2 hat Video-Streams B (lokales Video), Video-Streams A (Remote-Video). Also, wenn ich in Browser 1 bin und versuche, den Bildschirm zu teilen, sollte der Share-Bildschirm Stream das lokale Video in Browser 1 und Remote-Video in Browser 2 ersetzen.

Aber im Moment kann ich nur die Freigabe Bildschirm ersetzen das lokale Video in Browser 1, Browser 2 hat keine Änderungen, kann keine Änderungen in seinem Remote-Video sehen (das ist das lokale Video in Browser 1). Ich weiß auch nicht, wie ich die Änderungen in Browser 2 auslösen soll. Muss ich die Share Screen Streams zum Server signalisieren? und ändere den Remote-Stream entsprechend?

Hier sind mein Code in Javascript:

$(function() { 
    var brokerController, ws, webRTC, localid; 
    // ws = new XSockets.WebSocket("wss://rtcplaygrouund.azurewebsites.net:443", ["connectionbroker"], { 
    ws = new XSockets.WebSocket("ws://localhost:4502", ["connectionbroker"], { 
     ctx: "152300ed-4d84-4e72-bc99-965052dc1e95" 
    }); 

    var addRemoteVideo = function(peerId,mediaStream) { 
     var remoteVideo = document.createElement("video"); 
     remoteVideo.setAttribute("autoplay", "true"); 
     remoteVideo.setAttribute("rel",peerId); 
     attachMediaStream(remoteVideo, mediaStream);      
     remoteVideo.setAttribute("class", "col-md-3"); 
     remoteVideo.setAttribute("height", $(document).height() * 0.3); 
     remoteVideo.setAttribute("id", 'remoteVideo');      
     $("#videoscreen").append(remoteVideo); 
    }; 

    var onConnectionLost = function (remotePeer) { 
     console.log("onconnectionlost"); 
     var peerId = remotePeer.PeerId; 
     var videoToRemove = $("video[rel='" + peerId + "']"); 
     videoToRemove.remove(); 
    }; 

    var oncConnectionCreated = function() { 
     console.log("oncconnectioncreated", arguments); 
    } 

    var onGetUerMedia = function(stream) { 
    console.log("Successfully got some userMedia , hopefully a goat will appear.."); 
    webRTC.connectToContext(); // connect to the current context? 
    }; 

    var onRemoteStream = function (remotePeer) {  
    addRemoteVideo(remotePeer.PeerId, remotePeer.stream); 
    console.log("Opps, we got a remote stream. lets see if its a goat.."); 

    }; 

    var onLocalStream = function(mediaStream) { 
    console.log("Got a localStream", mediaStream.id); 
    localid = mediaStream.id; 
    console.log("check this id: meadiastram id ", mediaStream.id); 

    var video = document.createElement("video"); 
    video.setAttribute("height", "100%"); 
    video.setAttribute("autoplay", "true"); 
    video.setAttribute("id", "localvideo"); 
    video.setAttribute("name", mediaStream.id); 

    attachMediaStream(video, mediaStream);     
    $("#videoscreen").append(video); 

    $('#share').click(function() { 

     getScreenId(function (error, sourceId, screen_constraints) { 

      navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
      navigator.getUserMedia(screen_constraints, function (stream) { 
       $('#localvideo').attr('src', URL.createObjectURL(stream));      

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

    }; 

    var onContextCreated = function(ctx) { 
    console.log("RTC object created, and a context is created - ", ctx); 
    webRTC.getUserMedia(webRTC.userMediaConstraints.hd(true), onGetUerMedia, onError); 
    }; 

    var onOpen = function() { 
     console.log("Connected to the brokerController - 'connectionBroker'"); 

     webRTC = new XSockets.WebRTC(this); 
     webRTC.onlocalstream = onLocalStream; 
     webRTC.oncontextcreated = onContextCreated; 
     webRTC.onconnectioncreated = oncConnectionCreated; 
     webRTC.onconnectionlost = onConnectionLost;  
     webRTC.onremotestream = onRemoteStream; 
    }; 

    var onConnected = function() { 
     console.log("connection to the 'broker' server is established"); 
     console.log("Try get the broker controller form server.."); 
     brokerController = ws.controller("connectionbroker"); 
     brokerController.onopen = onOpen; 

    };    
    ws.onconnected = onConnected; 

}); 

ich als Server verwenden xsocket, und die Codes für Klick zu teilen und den lokalen Strom ändern, nur sehr einfachen Streams Bildschirm, da dies mit der Aktie:

$('#share').click(function() { 
    getScreenId(function (error, sourceId, screen_constraints) { 
     navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
     navigator.getUserMedia(screen_constraints, function (stream) { 
      $('#localvideo').attr('src', URL.createObjectURL(stream)); 

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

Jede Hilfe oder Anregung wäre dankbar.

Danke für das Hinweis auf den anderen Beitrag: How to addTrack in MediaStream in WebRTC, aber ich glaube nicht, dass sie gleich sind. Und ich bin mir nicht sicher, wie man in diesem Fall die Fernverbindung neu verhandelt.

Xsocket.webrtc.js für WebRTC Anschluss Datei: https://github.com/XSockets/XSockets.WebRTC/blob/master/src/js/XSockets.WebRTC.latest.js

Wie ich konnte ich die Remote-Verbindung in diesem Fall neu verhandeln?

Answer 1

Ich habe für diese Frage eine Lösung gefunden, den lokalen Stream nicht durch den ShareStream-Stream zu ersetzen, stattdessen den alten lokalen Stream aus dem lokalen div entfernen und dann den neuen ShareScreen-Stream zum lokalen div hinzufügen. In der Zwischenzeit senden Sie die alte lokale Stream-ID per Datachanel an den anderen Peer und entfernen Sie das alte Remote-Video ebenfalls.

Die wichtigste Sache ist Reflash die Streams (Neuverhandlung), dann Sharescreen Stream würde in Remote Peer angezeigt.

Code:

$('#share').click(function() { 
    getScreenId(function (error, sourceId, screen_constraints) { 
     navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
     navigator.getUserMedia(screen_constraints, function (stream) { 
      webRTC.removeStream(webRTC.getLocalStreams()[0]); 
      var id = $('#localvideo').attr('name'); 
      $('#localvideo').remove(); 
      brokerController.invoke('updateremotevideo', id); 
      webRTC.addLocalStream(stream); 
      webRTC.getRemotePeers().forEach(function (p) { 
       webRTC.refreshStreams(p); 
      }); 
     }, function (error) { 
       console.error(error); 
      }); 
    });    
}); 

, nachdem der Befehl erhalten, dass alte Video-Stream vom Server zu entfernen:

brokerController.on('updateremotevideo', function(streamid){ 
    $(document.getElementById(streamid)).remove(); 
}); 

Diese Lösung funktioniert für mich. Wenn wir nur den lokalen Video-Stream durch den Share-Bildschirm-Stream ersetzen möchten, müssen wir das Angebot erneut mit sdp erstellen und sdp an den Remote-Peer senden. Es ist komplizierter.

Answer 2

getScreenId(function (error, sourceId, screen_constraints) { 
    navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
    navigator.getUserMedia(screen_constraints, function (stream) { 
    navigator.getUserMedia({audio: true}, function (audioStream) { 
     stream.addTrack(audioStream.getAudioTracks()[0]); 
     var mediaRecorder = new MediaStreamRecorder(stream); 
     mediaRecorder.mimeType = 'video/mp4' 
     mediaRecorder.stream = stream; 
     self.setState({recorder: mediaRecorder, startRecord: true, shareVideo: true, pauseRecord: false, resumeRecord: false, stopRecord: false, downloadRecord: false, updateRecord: false}); 
     document.querySelector('video').src = URL.createObjectURL(stream); 
     var video = document.getElementById('screen-video') 
     if (video) { 
     video.src = URL.createObjectURL(stream); 
     video.width = 360; 
     video.height = 300; 
     } 
    }, function (error) { 
     alert(error); 
    }); 
    }, function (error) { 
    alert(error); 
    }); 
});