MEDIA

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).

INDEX.PHP
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
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);
 video.play();
 }, function(error) {
 } 
);
}

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

 type: "POST",

 url: "upload.php",

 data: {out :dataURL},

 cache: false, 

 success: function(data){
 
 $("#showres").load("recdisp.php");
 $("#addvid").hide();
 } 
 });
 });
}); 
</script>
</head>
<body>
<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>
<div id="showres"></div>
</body>
</html>   
     

THE DATABASE

sql db


UPLOAD.PHP - For storing the data URI representation of the images in table "snap" with random id assigned to each.
<?php
$img=$_POST["out"];
$id=rand(10,9999);

$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.
<?php
$conn=@mysql_connect("localhost","root","") or die("Error");
$db=@mysql_select_db("blog",$conn) or die("Error");
$result = mysql_query("SELECT * FROM snap",$conn);
$num=mysql_numrows($result);
$i=0;

while($i<$num)
{
 $img=mysql_result($result,$i,"img");
 echo "<img src=\"$img\"/>;"; 
 $i++;
}
 ?>                          


Leave a Comment  
Download Code(48)





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

RELATED POST