Мне нужно показать видео с камеры пользователя и виртуальные объекты, созданные с помощью WebGL, на веб-странице в одном элементе html, возможно, либо <canvas>, либо <video>.
Я могу успешно получить пользовательское видео, это поток, с медиаустройств навигатора и показать его в элементе <video>.
Я могу успешно создавать виртуальные визуальные объекты с помощью WebGL и отображать их в элементе <canvas>, используя другой пример кода здесь (из MDN).
Мне нужно смешать их в одном элементе html. Как я могу этого добиться.
Мои дальнейшие исследования показывают, что существует captureStream() метод HTMLMediaElement интерфейса. И <video>, и canvas имеют этот метод. Я могу захватить поток из таких элементов и использовать его для чего-то другого, например присоединения к другому элементу html (но, возможно, не к элементу холста) или одноранговому соединению WebRTC как источник, записывая его. Но это перезаписывает предыдущий поток.
Затем я обнаружил, что поток с именем 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>
