Tag Archives: WebCam

HTML5 WebCam With Images Overlapping

Leave a reply

This post demonstrates the basic on how to stream webcam from your computer to Opera browser using JavaScript and overlap image on top of the stream.

If you are looking for overlapping some images on top of the real-time stream, then this post is suitable for you.

View demo here. (Please use latest Opera browser only)

Overlap-Image-With-Webcam

The Basic Method

1) Download latest Opera browser. (Unfortunately, I managed to get this demo working in Opera only)

2) Ensure your webcam has been enabled.

3) Create an HTML file with the following. This creates our video display page.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>HTML5 WebCam With Images Overlapping</title>
	<meta name="author" content="KennyKee Technologies. Email: kennykee@kennykee.com">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body style="background-color:white; margin:0px;">
	<h1></h1>
	<div id="camera_area">
		<video height="768" autoplay style="z-index: 0"></video>
		<div id="label" style="position: absolute; z-index: 999"><img src="image.png"/></div>	
	</div>

	<script type="text/javascript">
	$(document).ready(function(){
		var video = document.getElementsByTagName('video')[0]; 
		var heading = document.getElementsByTagName('h1')[0];

		if(navigator.getUserMedia) {
			navigator.getUserMedia('video', successCallback, errorCallback);
			function successCallback( stream ) {
				video.src = stream;
			}
			function errorCallback( error ) {
				heading.textContent = "An error occurred: [CODE " + error.code + "]";
			}
		} else {
			heading.textContent = "Native web camera streaming is not supported in this browser! Please use Opera.";
		}

		//For animation purpose
		$('#label').css({left:'200', top:'200'});
		var next = false;
		var animateMe = function(targetElement, speed){
		var left = 800;
		if(next){ left = 200; next = false}else{next = true;}

		$(targetElement).animate(
				{
				'left': left
				},
				{
				duration: speed,
				complete: function(){
					animateMe(this, speed);
					}
				}
			);
		};
		animateMe($('#label'), 1000);

	});
	</script>
</body>
</html>

Download latest jQuery library and rename as jquery.js. Put this file in the same directory as the HTML file created earlier. Use this image sample. Save as image.png and put in the same directory as the HTML created earlier image.

4) Open the created HTML file with Opera. Make sure you enable webcam request access from Opera.

We are done. View demo here. (Please use latest Opera browser only)