Как вызывать функцию каждые 200 миллисекунд в HTML5
Хотите вызывать функцию моментального снимка каждые 200 миллисекунд
Может ли кто-нибудь помочь мне в расшифровке захваченного холста, который на самом деле будет qr-кодом?
Пожалуйста, проводите.
<%@ 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, но потерпел неудачу.