时间戳

首页 > 解决方案 > 我捕获屏幕时的webrtc速度问题

javascript - 我捕获屏幕时的webrtc速度问题

问题描述

我正在开发一个 4 peer webrtc 视频聊天！此时一切都很好，所以我在网站上添加了一个屏幕共享的未来！

当我按屏幕共享时，连接变得如此缓慢！我认为这是因为 4 对等连接，但这仅在我共享我的屏幕时才会发生。我尝试使用发送相机流的 RemoveStream 函数，但流仍然滞后。这是我按下屏幕共享按钮后运行的功能



async function startCapture() {

  var audioStream = await navigator.mediaDevices.getUserMedia({audio:true});
  var audioTrack = audioStream.getAudioTracks()[0];

  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
    captureStream.addTrack( audioTrack );

  } catch(err) {
    console.error("Error: " + err);
  }
//   return captureStream;


  if(rtcPeerConn){
    rtcPeerConn.removeStream(myStream);

      rtcPeerConn.addStream(captureStream);

  }
  if(rtcPeerConn1){
    rtcPeerConn1.removeStream(myStream);

      rtcPeerConn1.addStream(captureStream);

  }  
  if(rtcPeerConn2){
    rtcPeerConn2.removeStream(myStream);

       rtcPeerConn2.addStream(captureStream);

  }  
  if(rtcPeerConn3){
    rtcPeerConn3.removeStream(myStream);

       rtcPeerConn3.addStream(captureStream);

  }
  myStream.getTracks().forEach(function(track) {
        track.stop();
      });
  myStream = captureStream;
  success(myStream);
}

我什至试图像这样从第一个流中删除曲目

async function startCapture() {
  myStream.getTracks().forEach(function(track) {
        track.stop();
      });

  var audioStream = await navigator.mediaDevices.getUserMedia({audio:true});
  var audioTrack = audioStream.getAudioTracks()[0];

  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
    captureStream.addTrack( audioTrack );

  } catch(err) {
    console.error("Error: " + err);
  }


  if(rtcPeerConn){
    rtcPeerConn.removeStream(myStream);

      rtcPeerConn.addStream(captureStream);

  }
  if(rtcPeerConn1){
    rtcPeerConn1.removeStream(myStream);

      rtcPeerConn1.addStream(captureStream);

  }  
  if(rtcPeerConn2){
    rtcPeerConn2.removeStream(myStream);

       rtcPeerConn2.addStream(captureStream);

  }  
  if(rtcPeerConn3){
    rtcPeerConn3.removeStream(myStream);

       rtcPeerConn3.addStream(captureStream);

  }

  myStream = captureStream;
  success(myStream);
}

如您所见，我使用 removeStream 函数来避免发送无用的流，但仍然没有任何改变。

标签： javascripthtmlwebrtcp2p

解决方案

你有什么限制getDisplayMedia？也许您正在发送“太多”的视频内容，从而减慢了一切速度。

[编辑]

根据您的评论，您正在录制来自屏幕的音频，以及来自麦克风的音频。也许从屏幕录制中删除音轨？

您还可以使用选项来减小视频的大小：（这需要使用getUserMedia而不是getDisplayMedia）

video:{
            width: { min: 100, ideal: width, max: 1920 },
            height: { min: 100, ideal: height, max: 1080 },
            frameRate: {ideal: framerate}
        }

也许帧率较低？尝试减小尺寸，看看是否也有帮助:)

推荐阅读