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

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