I want to display data from my webcam live in my web app. Here is my code.Using this code I am able to see my live data that is coming from my web cam.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta content=stuff, to, help, search, engines, not name=keywords>
<meta content=What this page is about. name=description>
<meta content=Display Webcam Stream name=title>
<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>
<div id=container>
<video autoplay=true id=videoElement>
</video>
</div>
<script>
var video = document.querySelector(#videoElement);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
alert(error);
}
</script>
</body>
</html>
Suppose I have a webapp with 4 pages.I want to display this webcam data in one of the div in my third page.How can I do that.Do I need to change anything in this?
video.src = window.URL.createObjectURL(stream);