Здравствуйте,есть скрипт,который делает захват видео с вебкамеры и делает с нее фотографию.
Используется getUserMedia() для видео и Canvas для снятия фотографии.
Все работает,фотография делается после нажатия кнопки "Фотогрфировать". Но мне нужно чтобы после нажатия кнопки "Запустить" фотография делалась автоматически каждые N секунд.
Пытался сделать так
setInterval(captureMe,1000);
Но ничего не получилось..
В общем пример:
http://aspex.wen.ru
Исходник:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{text-align:center;font-family:arial;font-family:"Abel",Helvetica,sans-serif}.stuff{display:none}.item{display:inline-block;width:300px;margin:20px 10px;background:#fff;padding:10px 0px}.item span{padding-bottom:15px;display:block;font-size:36px;color:#646464}video,canvas{width:266px;height:200px;background:rgba(0,0,0,.1)}input{display:block;width:100%}img{width:128px;height:96px;margin:6px}video{transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1)}#allow{min-height:40px;line-height:40px;font-size:20px;color:#fff;border:2px solid #fff;background:#e67e22}.button{display:inline-block;cursor:pointer;padding:.75em 1em;-webkit-border-radius:2px;border-radius:2px;font:1.25em "Abel",Helvetica,sans-serif;color:rgba(255,255,255,1);background:#62ac15;text-shadow:0 -1px 0 #5b8111;border:none;outline:none;display:none}.button:hover{background:#6fba22;-webkit-transition:all 200ms cubic-bezier(.42,0,.58,1) 10ms;-moz-transition:all 200ms cubic-bezier(.42,0,.58,1) 10ms;-o-transition:all 200ms cubic-bezier(.42,0,.58,1) 10ms;transition:all 200ms cubic-bezier(.42,0,.58,1) 10ms}.button:active{-webkit-box-shadow:0 1px 4px 0 #416917 inset;box-shadow:0 1px 4px 0 #416917 inset}#buttonStart{margin-top:200px}@media only screen and (max-width:680px){.item2{display:none}}</style>
<link async href="http://fonts.googleapis.com/css?family=Abel" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
var button = document.getElementById('button');
var allow = document.getElementById('allow');
var buttonStart = document.getElementById('buttonStart');
var stuff = document.getElementById('stuff');
var context = canvas.getContext('2d');
var videoStreamUrl = false;
buttonStart.style.display = 'block';
buttonStart.addEventListener('click', function(){
buttonStart.style.display = 'none';
stuff.style.display = 'block';
button.addEventListener('click', captureMe);
// navigator.getUserMedia и window.URL.createObjectURL (смутные времена браузерных противоречий 2012 :) )
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL;
console.log('request',navigator.getUserMedia);
// запрашиваем разрешение на доступ к поточному видео камеры
navigator.getUserMedia({video: true}, function(stream) {
// разрешение от пользователя получено
// скрываем подсказку
allow.style.display = "none";
// получаем url поточного видео
videoStreamUrl = window.URL.createObjectURL(stream);
// устанавливаем как источник для video
video.src = videoStreamUrl;
button.style.display = 'block';
}, function(){
console.log('что-то не так с видеостримом :P');
});
});
var captureMe = function(){
//alert(1)
if(!videoStreamUrl) alert('То-ли вы не нажали "разрешить" в верху окна, то-ли что-то не так с вашим видео стримом')
// переворачиваем канвас зеркально по горизонтали
context.translate(canvas.width, 0);
context.scale(-1, 1);
// отрисовываем на канвасе текущий кадр видео
context.drawImage(video, 0, 0, video.width, video.height);
// получаем data: url изображения на c canvas
var base64dataUrl = canvas.toDataURL('image/png');
context.setTransform(1, 0, 0, 1, 0, 0); // убираем все кастомные трансформации canvas
// на этом этапе можно спокойно отправить base64dataUrl на сервер и сохранить его там как файл (ну или типа того)
// но мы добавим эти тестовые снимки в наш пример:
var img = new Image();
img.src = base64dataUrl;
}
};
</script>
</head>
<body>
<div class="stuff" id="stuff">
<div id="allow">▲ ▲ ▲ Разрешите использовать камеру ▲ ▲ ▲ <br/> ( Сверху текущей страницы )</div>
<div class="item item1">
<span> HTML5 Видео </span>
<video id="video" width="320" height="240" autoplay="autoplay" ></video>
</div>
<div class="item item2">
<span> Canvas фото </span>
<canvas id="canvas" width="320" height="240" ></canvas>
</div>
<input id="button" type="button" class="button" value="Фотографировать" />
</div>
<input id="buttonStart" type="button" class="button" value="Запустить" />
</body>
</html>
