Как показать дорожки видеопотока из двух разных потоков в одном HTMLMediaElement (из камеры и потока WebGL) - PullRequest
Новая
       53

Как показать дорожки видеопотока из двух разных потоков в одном HTMLMediaElement (из камеры и потока WebGL)

1 голос
/ 11 мая 2019

Мне нужно показать видео с камеры пользователя и виртуальных объектов, созданных с помощью WebGL, на веб-странице в виде одного HTML-элемента, возможно, либо <canvas>, либо <video>.

Я могу успешно получить пользователявидео, это поток с медиаустройств навигатора и отображение его в элементе <video>.

Я могу успешно создавать виртуальные визуальные объекты с помощью WebGL и отображать их в элементе <canvas>, используя пример кода другого пользователя.здесь (из MDN).

Мне нужно смешать их на одном элементе HTML.Как мне этого добиться.

Мои дальнейшие исследования показывают, что существует captureStream() метод интерфейса HTMLMediaElement.И <video>, и canvas имеют этот метод.Я могу захватить поток из таких элементов и использовать его для чего-то другого, например, для присоединения к другому html-элементу (но, возможно, не к элементу canvas) или WebRTC Peer Connection в качестве источника,записываю это.Но это перезаписывает предыдущий поток.

Затем я обнаружил, что поток , называемый MediaStream, содержит дорожек внутри них, как видеодорожка с, звуковые дорожки даже текстовые дорожки .И другие могут быть добавлены методом addTrack из MediaStream, и они могут быть получены методом getTracks.Я добавил видеодорожку из потока моего элемента <canvas> в поток <video> элементов, однако я могу просматривать только исходную видеодорожку с пользовательского носителя в элементе <video>.

Чего мне не хватает для этого?

<html>
  <body>
    getting video stream from camera into screen
    <video autoplay></video>

    getting virtual objects into screen
    <canvas id="glcanvas" width="640" height="480"></canvas>
  </body>
  // webgl codes that draws a rotating colored cube on html canvas webgl context
  <script src="gl-matrix.js"></script>
  <script src="webgl-demo.js"></script>

  <script>
    // getting video stream from camera into screen
    const video = document.querySelector("video"); 

    navigator.mediaDevices.getUserMedia({video: true})
      .then(stream => {
        let canv = document.querySelector("#glcanvas");
        let canvstrm = canv.captureStream();
        // get track from the canvas stream and add to the user media stream
        let canvstrmtrack = canvstrm.getTracks()[0]
        stream.addTrack(canvstrmtrack);
        video.srcObject = stream;
    })
  </script>


</html>

Полный смысл

1 Ответ

0 голосов
/ 12 мая 2019

Видеоэлемент может воспроизводить только одну видеодорожку за раз.

Поддержка этого находится в спецификации MediaCapture :

Посколькупорядок в MediaStream наборе дорожек не определен, не предъявляются требования к порядку AudioTrackList и VideoTrackList

И в HTML :

Выбрана либо ноль, либо одна видеодорожка;Выбор новой дорожки при выборе предыдущей отменяет выбор предыдущей.

Похоже, вы ожидали, что графика будет накладываться на видео, например, с черным как прозрачный.

ТамНа данный момент в веб-платформе нет хороших инструментов для создания видео.Единственный вариант - многократно рисовать кадры из элемента видео на холсте и использовать canvas.captureStream, но это ресурсоемкий и медленный процесс.

Если вы просто делаете это для воспроизведения (не записываете или не передаете результат), то вы сможете добиться этого эффекта гораздо дешевле, разместив холст с прозрачностью поверх элемента видео с помощью CSS.Этот подход также позволяет избежать перекрестных ограничений.

...