html - 如何平滑HTML网络摄像头视频？ (与本地移动相机相比非常生涩)

Question

嗨，我有一个视频html元素，它显示为html移动网络摄像头的视口：

<video class="camvideo" height="937" width="1249" autoplay="" muted="" playsinline=""></video>

它可以很好地显示，就像本地移动相机一样，但是，当您四处移动手机时，内容变得非常不稳定且不流畅。如何平滑视频输出？

谢谢！

Answer 1

请参考此链接，因为使用当前视频html元素将非常容易实现。

https://github.com/netteria/html5-video-popup-responsive

**步骤1： **
将videopopup.js文件添加到您的项目目录中。

**第2步： **
用两个div标签环绕视频，并为您的视频标签指定一个ID。为src分配值，并在视频代码内输入type属性。参见下面的示例，并参见上面引用的链接中的自述文件。

<div id="vidBox">
    <div id="videCont">
        <video id="v1" loop controls>
            <source src="someclip.mp4" type="video/mp4"/>
        </video>
    </div>
</div>

第三步：
将以下脚本标记添加到将显示视频的html文档中。下面分配的属性仅是示例，您需要将其替换为自己的属性。

    <script>
        $(function() {
            $('#vidBox').VideoPopUp({
                backgroundColor: "#17212a",
                opener: "video1", 
                maxweight: "340", 
                idvideo: "v1"
            });
        });
    </script>