Как отправить потоки видео и холста на удаленный клиент, подключенный с помощью RTCPeerConnection? - PullRequest
Новая
       31

Как отправить потоки видео и холста на удаленный клиент, подключенный с помощью RTCPeerConnection?

0 голосов
/ 27 апреля 2020

Мы пытаемся создать небольшое приложение для видеочата, где удаленный пользователь может видеть наше локальное видео и рисунки, которые мы делаем на локальном видео. Чтобы подключиться к удаленному пользователю, мы используем RTCPeerConnection.

Мы используем элемент видео и холст поверх видео, чтобы нарисовать стрелку или некоторые другие двухмерные объекты, и мы передаем видео и холст как потоки и получение на удаленном клиенте. Ниже приведен соответствующий код.

HTML: 

<!DOCTYPE html>
<html>

<body>
  <div id="videos">
    <div>
      <video id="localVideo" autoplay muted></video>
      <canvas id="localCanvas"></canvas>
    </div>
    <div>
      <video id="remoteVideo" autoplay></video>
      <canvas id="remoteCanvas"></canvas>
    </div>
  </div>
</body>
</html>

CSS: 

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
}

JavaScript: 

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: true
})
.then(gotStream)
.catch(function(e) {
  alert('getUserMedia() error: ' + e.name);
});

function gotStream(stream) {    
  console.log('Adding local stream.');
  localStream = stream;
  localVideo.srcObject = stream;

  sendMessage('got user media');
  if (isInitiator) {
    maybeStart();
  }
}

Как только мы получаем поток с камеры, мы создаем одноранговое соединение и добавляем локальный видеопоток и поток холста (localCanvas.captureStream ) для подключения в функции ниже. Не уверен, можем ли мы добавить 2 потока к одноранговому соединению. 

function maybeStart() {
    createPeerConnection();
    const canvas_stream = localCanvas.captureStream(25);
    pc.addStream(localStream);      // IS THIS CORRECT? ADDING 2 STREAMS on a connection
    pc.addStream(canvas_stream);    // IS THIS CORRECT? ADDING 2 STREAMS on a connection
}

function createPeerConnection() {
    pc = new RTCPeerConnection(null);
    pc.onaddstream = handleRemoteStreamAdded;
}

Ниже функция вызывается дважды. Поэтому я думаю, что добавление 2 потоков к одноранговому соединению должно работать. Но не уверен, какой из них является реальным видео потоком, а какой потоком холста. Поэтому в первый раз, когда мы входим в функцию, мы присоединяем поток к удаленному видеообъекту (так как мы сначала добавили видеопоток и поток холста рядом с одноранговым соединением). Но не знаете, как использовать поток холста для отображения на удаленном видео, поскольку мы не можем использовать холст с потоком мультимедиа. 

function handleRemoteStreamAdded(event) {
  if(videoStream == false) {
    remoteVideo.srcObject = event.stream;
  }
  else {
      // HOW TO OVERLAY THE CANVAS HERE WITH THE CANVAS STREAM?
      videoStream = true;
  }
}

Мы столкнулись с проблемами ниже.

  • Нужно передать локальный видеопоток и холст (для рисунков на видео). Таким образом, мы используем addstream () для однорангового соединения два раза. Это правильно? Можем ли мы сделать это таким образом?
  • Если мы можем добавить 2 потока, как указано выше, как мы можем различить guish, является ли это потоком видео или холстом на удаленном клиенте?
  • Каким-то образом, даже если мы выделим guish и добавим видеопоток к источнику тега видео, как я могу использовать поток холста для наложения рисунков холста на видео, поскольку холст не будет работать с потоком мультимедиа?

Может кто-нибудь, пожалуйста, дайте мне знать, как исправить эти проблемы?

...