<!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>
$(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
});