简体   繁体   English

合并捕获的视频 stream of 2 html5 canvas

[英]Merge Captured video stream of 2 html5 canvas

I am building a whiteboard app for a web conferencing app.我正在为 web 会议应用程序构建一个白板应用程序。 All the libraries that I have investigated uses 2 canvas, 1 on the top for drawing and 1 in the bottom for holding the older drawings(for better performance since the upper canvas gets cleared on every draw).我调查过的所有库都使用 2 个 canvas,顶部有 1 个用于绘图,底部有 1 个用于保存旧图纸(为了获得更好的性能,因为上部 canvas 在每次绘制时都会被清除)。

Now I need to stream the content of these canvases for the other uses so they can see the content live.现在我需要 stream 将这些画布的内容用于其他用途,以便他们可以实时看到内容。

Option1:选项1:

captureStream from each canvas and merge the videtracks into a single stream, new MediaStream([...bottomTracks, ...topTracks]) , transfer the stream using webrtc and then extract the tracks from the stream, create a new stream for each track new MediaStream([stream.getVideoTracks()[0]]) and play the streams on absolutely positioned video elements. captureStream from each canvas and merge the videtracks into a single stream, new MediaStream([...bottomTracks, ...topTracks]) , transfer the stream using webrtc and then extract the tracks from the stream, create a new stream for each track new MediaStream([stream.getVideoTracks()[0]])并在绝对定位的视频元素上播放流。 It works but my boss doesn't like it, don't know why?它有效,但我的老板不喜欢它,不知道为什么? yet!然而!
Is there a downside to this?这有缺点吗?

Option2:选项2:

Create a third off screen canvas and periodically drawImage of the both canvas's on the offscreen canvas and then captureStream from that canvas!创建第三个屏幕外 canvas 并定期在屏幕外drawImage上绘制两个画布的图像,然后从该画布中captureStream流!

So is there a better way or another way to achieve this?那么有没有更好的方法或另一种方法来实现这一目标?

Update: Why Am I Using 2 canvases?更新:为什么我使用 2 个画布?

There only 1 reason, not to redraw everything again if I want to change something that is already drawn, what would change you might ask?只有一个原因,如果我想改变已经绘制的东西,不要重新绘制所有东西,你可能会问什么会改变?
In 2 scenarios for me:对我来说有两种情况:

  1. Smoothing the line that has been finished drawing by mousedrag,touchmove or pen (to make it feel more like a natural writing, checkout http://fabricjs.com/freedrawing )通过鼠标拖动、触摸移动或钢笔平滑已完成绘制的线条(使其感觉更像自然书写,请查看 http://fabricjs.com/freedrawing
  2. Draw shapes by mousedrag, touchmove or pen通过鼠标拖动、触摸移动或笔绘制形状

I know that I can redraw everything on every change but I believe it would have low performance on low end devices.我知道我可以在每次更改时重新绘制所有内容,但我相信它在低端设备上的性能会很低。

2 canvases are positioned absolutely on top of each other, The actual user drawings are done on the upper canvas and when its done and any enhancements needed are applied to it, the line/shape gets drawn on the bottom canvas and the upper canvas is cleared. 2 幅画布绝对位于彼此之上,实际用户绘图在上部 canvas 上完成,完成并对其应用任何所需的增强功能后,线条/形状将绘制在底部 canvas 上,上部 ZFCC790C72A86190DDC1B54 被清除.

As noted in the comments by kaiido, you only need one canvas on the screen.正如kaiido 在评论中指出的那样,屏幕上只需要一个canvas。

In record.a.video I superimpose 2 video streams (screen video and camera video) onto one canvas.record.a.video 中,我将 2 个视频流(屏幕视频和摄像头视频)叠加到一个 canvas 上。 I then use another Media Stream to extract the video from the canvas and share as a VOD or to livestream.然后我使用另一个媒体 Stream 从 canvas 中提取视频并作为 VOD 共享或直播。

Note that audio must be handled differently, as it is played in the Canvas.请注意,音频必须以不同方式处理,因为它在 Canvas 中播放。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM