我正在创建一个使用webcam
的网络应用程序
(我跟着这个啧啧:https://www.youtube.com/watch?v=K_NP_a78Jpk),
它的工作原理只适用于PC / windows。当我在我的Android手机上试用它时需要更新帧/(仅当我在屏幕上移动手指或放大时才有效)。
(jsfiddle
不允许webcam
,将其复制并粘贴到编辑器中
如何在不触摸屏幕的情况下让视频流继续运行,或者如果我在手机上失去焦点,我该怎么办?
码
<!DOCTYPE html>
<!--
* Created somewhere on the Bahama's.
* __̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.___
* By Samir.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gezellige Feestdagen!</title>
<!--<script src="snowstorm.js"></script>-->
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<video id="video"></video>
<canvas id="canvas"></canvas>
<br>
<button onclick="snap()">Snap</button>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozUserMedia ||
navigator.ogetUserMedia || navigator.msgetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true}, streamWebCam, throwError);
}
function streamWebCam(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}
function throwError(e) {
alert(e.name);
}
function snap() {
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
context.drawImage(video, 0, 0);
}
</script>
</body>
</html>