如何解决HTML - 如何从视频流中拍摄快照?
我正在尝试向网页添加一个按钮,该按钮可以拍摄视频流的快照,将其显示在同一网页上,并将其保存到本地目录。
视频从服务器流式传输,并使用 img 标签显示。我可以看到视频,但捕获按钮没有任何作用:
<!doctype html>
<head> <meta charset="utf-8" /> </head>
<body>
<!-- The button to capture the stream -->
<div class="button-group">
<button id="btn-capture" type="button">Capture</button>
</div>
<!-- Video Element & Canvas -->
<div>
<div>
<h3>Camera Footage</h3>
<img id="stream" alt="vdieo stream" width="640" height="480"></img>
</div>
<div>
<h3>Captured Image</h3>
<canvas id="capture" width="640" height="480"></canvas>
<div>
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>
</div>
<!-- ================================================================= -->
<script>
// The button to capture the image
var btnCapture = document.getElementById( "btn-capture" );
// The stream & capture
var stream = document.getElementById( "stream" );
var capture = document.getElementById( "capture" );
var photo = document.getElementById("photo");
// Attach listeners
btnCapture.addEventListener( "click",captureSnapshot );
// Capture Snapshot
function captureSnapshot() {
var ctx = capture.getContext( "2d" );
ctx.drawImage( stream,0);
photo.src = capture.toDataURL('image/png');
}
</script>
</body>
</html>
我在“index.html”文件旁边添加了文件夹“image/png”。但即使使用 capture.toDataURL()
也不能解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。