Thanks to WebRTC(Web real time communication) project that have made easier to access video and audio sources, which in previous was done by using additional plugins.

Today, I am going to show a quick demo of one of it's component, i.e getUserMedia API. It allow accessing of camera & microphone from web browser. To make the demo more intresting, i've included the functionality of capturing & storing the image the server.

Note : The demo works with Chrome(>+21).

<!DOCTYPE html>
<script src=""></script>
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
var video = document.getElementById("vid");

if(navigator.webkitGetUserMedia) {
 navigator.webkitGetUserMedia({ "video": true }, function(stream){
 video.src = window.webkitURL.createObjectURL(stream);;
 }, function(error) {

$(document).on("click", "#upload", function(){
 context.drawImage(video, 0, 0, 300, 300);
 var dataURL = canvas.toDataURL(); 

 type: "POST",

 url: "upload.php",

 data: {out :dataURL},

 cache: false, 

 success: function(data){
<div id="addvid">
<video id="vid" width="300px" height="300px" autoplay></video><br>
<button id="upload">Upload Image To Server</button>
<canvas id="can" width="300" height="300" style="display:none;"></canvas>
<div id="showres"></div>


sql db

UPLOAD.PHP - For storing the data URI representation of the images in table "snap" with random id assigned to each.

$conn=mysql_connect("localhost","root","") or die("Error");
$db=mysql_select_db("blog",$conn) or die("Error");
$sql="insert into snap(id,img) values (\"$id\",\"$img\")";
$res=mysql_query($sql,$conn) or die("Error");

RECDISP.PHP- To print all the images stored in database.
$conn=@mysql_connect("localhost","root","") or die("Error");
$db=@mysql_select_db("blog",$conn) or die("Error");
$result = mysql_query("SELECT * FROM snap",$conn);

 echo "<img src=\"$img\"/>;"; 

Leave a Comment  
Download Code(50)

All rights reserved, the content is copyrighted to the author.