WebRTC:通话期间从视频共享切换到屏幕共享

Question

最初，我有两个不同的网页:

一个是进行视频通话和其他是做屏幕共享

现在，我想在一个页面中完成这两个操作。

场景如下:

在实时通话期间，用户想要停止共享他/她的视频并开始共享屏幕。之后，他/她再次希望关闭屏幕共享并开始视频共享。

为了清楚起见，这里有一些我想问的问题:

在调用方:

1) 如何将我的本地流从视频更改为屏幕，反之亦然？ 2) 完成后，如何将其分配给本地视频元素？

在被调用方:

1) 如果我当前接收的流从视频变为屏幕，我该如何处理？ 2) 如果我收到的流停止了，我该如何处理？我的意思是，现在我既不能接收视频也不能接收屏幕(只能接收音频)

请在这方面帮助我。如果有任何可用的开源代码，也请分享它们的链接。

仅供引用，我尝试使用以下代码来处理它。 (我知道这很天真，行不通)

function handleUserMedia(newStream){

        var localvideo = document.getElementById("localvideo");
        localvideo.src = URL.createObjectURL(newStream);
        localStream = newStream;
        sendMessage('got user media');

        if (isInitiator) {
            maybeStart();
        }
     }

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

     var video_constraints = {video: true, audio: true};
     var screen_constraints = {video: { mandatory: { chromeMediaSource: 'screen' } }};

     getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);

     //getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);

     $scope.btnLabel = 'Share Screen';

     $scope.toggleSelected = function () {

         $scope.selected = !$scope.selected;

         if($scope.selected)
         {
             getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);
             $scope.btnLabel = 'Share Video';
         }
         else
         {
             getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);
             $scope.btnLabel = 'Share Screen';
         }
    };

Answer 1

检查这个演示:

• https://www.webrtc-experiment.com/demos/switch-streams.html

及相关教程:

• https://www.webrtc-experiment.com/docs/how-to-switch-streams.html

只需重新协商双方用户端的对等连接!