如何在HTML5中每200毫秒调用一个函数 [英] How to call a function every 200 milliseconds in HTML5
本文介绍了如何在HTML5中每200毫秒调用一个函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
想要每200毫秒调用快照功能
任何人都可以帮我解码捕获的画布，这实际上是qr代码。
请指导。
Want to call the snapshot function every 200 milliseconds
Can anyone help me in decoding the captured canvas which will be actually qr code.
Please guide.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Webscanner.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<video autoplay="true" id="videoElement"></video>
</div>
</form>
<canvas id="canvas" width="800" height="600"></canvas> <!--Canvas to draw image -->
<button id="snap" onclick="snapshot()">Snap Photo</button>
<script>
var video = document.querySelector("#videoElement");
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
else
alert('HTML5 getUserMedia() is not supported on your browser');
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome.
// Other browsers will fall back to image/png.
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
}
function videoError(e) {
// do something
}
</script>
</body>
</html>
我有什么尝试过：
尝试添加while循环但失败。
What I have tried:
tried adding a while loop but failed.
推荐答案
JavaScript定时事件 [ ^ ]
在关闭标签之前只添加一行代码脚本。
only add one line of code before closing tag of script.
setInterval(snapshot, 200);
setInterval是javascript获取这些参数的函数。
1 =必需。将要执行的功能。
2 =必填。关于执行代码的频率的间隔（以毫秒为单位）。
3 =可选。传递给函数的其他参数（IE9及更早版本不支持）
注意：你可以从这里。
这篇关于如何在HTML5中每200毫秒调用一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
