Задать вопрос
al31415
@al31415
html

Как получить видео с веб-камеры и отрисовывать в canvas'e?

Приветствую.

Почитал про Media Stream API, нашёл сайт с примером.
Пробую сделать сам, но ничего не выходит.
Подскажите, что я упустил?

<!DOCTYPE html>
<html lang="en">
<head>
	<title>media stream example</title>
</head>
<body>
	<div>
		<video id="video" width="640" height="480" autoplay></video>
	</div>
	
	<span> video </span>
		
	<div>
		<canvas id="canvas" width="640" height="480"></canvas>
	</div>
	
	<span> canvas</span>
	
	<input id="button" type="button" value="Capture" />
	<script>
		window.addEventListener("DOMContentLoaded", function() {
			var canvas = document.getElementById("canvas");
			var video = document.getElementById("video");
			var button = document.getElementById("button");
		
			var context = canvas.getContext('2d');
			var videoStreamUrl = false;
		
			var capture = function () {
				context.drawImage(video, 0, 0, video.width, video.height);
			}
		
			button.addEventListener('click', capture);
			
			contraints = {video:true};
			
			errCallBack = function (err) {
			console.log("Error:", err);
			}
		
			if (navigator.getUserMedia) {
				navigator.getUserMedia(contraints, 
				function (stream) {
					video.src = stream;
					video.play();
				},
				errCallBack);
			}
			else if (navigator.webkitGetUserMedia) {
				navigator.webkitGetUserMedia(contraints,
				function (stream) {
					video.src = window.webkitURL.createObjectURL(stream);
					video.play();
					},
				errCallBack);
			}
		}, false);
	</script>
</body>
</html>
  • Вопрос задан
  • 2476 просмотров
1 комментарий
Подписаться 3 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
а браузер случаем не ff? зачем нужно было обрезать приведенный код?
Ответ написан
1 комментарий
1 комментарий
Denid88
@Denid88
Вечный ученик)
Вот попробуй єто листинг самого скрипта c использованием библиотеки jquery
$(document).ready(function(){

var video, ctx, canvas;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video:true}, function (stream){
var mediaStream = stream;
var video = document.querySelector('#myVideo');
video.src = window.URL.createObjectURL(mediaStream);
video.play();
}, function(error){
	console.log("erroe");
});

$('#startWebCam').click(function(event){
event.preventDefault();
var video = document.querySelector('#myVideo');
video.play();
//end Start
});

$('#getScreenShot').click(function(event){
event.preventDefault();
var video = document.querySelector('#myVideo');
var canvas = document.querySelector('#myCanvas');
var ctx = canvas.getContext('2d');
video.play();
function processFrame(){
ctx.drawImage(video,0,0,200,240);
}
function procesFrame1(){
ctx.drawImage(video,200,0,200,240);
}
function procesFrame2(){
ctx.drawImage(video,400,0,200,240);
}
processFrame();
setTimeout(function(){
	procesFrame1();
}, 1000);
setTimeout(function(){
	procesFrame2();
}, 2000);

//end getSreenShot	
});

$('#stopWebCam').click(function(event){
event.preventDefault();
var video = document.querySelector('#myVideo');
video.pause();

});
//end jquery 
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать сайт порфолио
20 нояб. 2024, в 18:14
5000 руб./за проект
Подключить пополнение TON
20 нояб. 2024, в 17:49
5000 руб./за проект
Дизайн сайта
20 нояб. 2024, в 17:34
20000 руб./за проект
Ещё заказы