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

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

1 个答案:

检查此演示：

和相关教程：

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