如何用html的object开启摄像头在线拍照

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。

1、 视频流

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

<video id=”video” autoplay=”"></video>

<script>

var video_element=document.getElementById(‘video’)

if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error)//success是回调函数,当然你也可以直接在此写一个匿名函数

}

function success(stream){

video_element.src=stream

}

</script>

此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。

2、 拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’)//动态创建画布对象

var ctx=canvas.getContext(’2d’)

var cw=vw,ch=vh

ctx.fillStyle=”#ffffff”

ctx.fillRect(0,0,cw,ch)

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh)//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。

document.body.append(canvas)

3、 图片获取

从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/pngbase64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”)

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

var data=imgData.substr(22)

如果要在上传前获取图片的大小，可以使用：

var length=atob(data).length//atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：

$.post(‘upload.php’,{‘data’:data})

在后台我们用PHP脚本接收数据并存储为图片。

function convert_data($data){

$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)

save_to_file($image)

}

function save_to_file($image){

$fp=fopen($filename,’w')

fwrite($fp,$image)

fclose($fp)

}

  //简单实例 用html5 拍摄照片 平在照片上实时标注GPS 并上传到服务器 存入数据库

  //需要 gumwrapper.min.js 支持

  

   function opencam(){

   //alert ("opencam")

   if (cam_is_open==0){

   var video_html='<video id="myVideo" width="320" height="240" ></video>'

   $("#web_cam").html(video_html)//动态加入一个video元素

   $("#web_cam").show()    

   function showSuccess(video) {

// alert('Hey, it works! Dimensions: ' + video.videoWidth + ' x ' + video.videoHeight)

}

function showError(error) {

alert('Oops: ' + error.message)

}

gum = new GumWrapper({video: 'myVideo'}, showSuccess, showError)

gum.play()

cam_is_open=1

$("#opencam_btn").attr("value","关闭镜头")

}else{

location.reload()

}    

   }

  function short_cam(){

$("#photo_div").show()

$("#msg_tips").text("正在生成图片")

  var now = new Date()

  var cur_time=(now.getHours()<10?"0":"")+now.getHours()+":"

  cur_time+=(now.getMinutes()<10?"0":"")+now.getMinutes()+":"

  cur_time+=(now.getSeconds()<10?"0":"")+now.getSeconds()

  send_time=now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate()

send_time+=" "+cur_time

    send_lon=$("#cur_lon").text()

     send_lat=$("#cur_lat").text()

  

var video_cam=document.getElementById("myVideo")

var canvasobj=document.getElementById("photo_canvas")

var ct1=canvasobj.getContext('2d')

ct1.fillStyle="#ffffff"

ct1.fillRect(0,0,640,480)

ct1.drawImage(video_cam,0,0)

ct1.font="25px Georgia"

ct1.fillStyle="#ff4444"

ct1.fillText(send_time,10,50)

ct1.fillText("纬度："+ send_lat,10,80)

ct1.fillText("经度："+ send_lon,10,110)

var img_data=canvasobj.toDataURL("mage/png")

var imgobj=document.getElementById("cur_img")

imgobj.src=img_data

$("#web_cam").hide()

$("#msg_tips").text("生成图片完成")

   }

      function reshort_photo(){

   $("#photo_div").hide()

   $("#web_cam").show()

   }

  

   function send_photo() {

   $("#msg_tips").text("图片上传中")

    var  imgobj=document.getElementById("cur_img").src

    //alert (imgobj)

    $.ajax({

     type:"post",

url:"updategpsp.php",

async:true,

dataType:"text",

data:{img_data:imgobj,send_time:send_time,

rel_lat:rel_lat,rel_lon:rel_lon,

send_lat:send_lat,send_lon:send_lon},

  success: function(msg){

  if (msg>=1){

  $("#msg_tips").text("图片上传完毕")

alert("上传数据成功")

reshort_photo()

}else{

alert("上传数据失败！ 请重新传送")

alert(msg)

}

  }

    })

   }

html文件

<!DOCTYPE html>

<html lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

    <meta name="viewport" content="width=device-width, user-scalable=yes">

    <title>webcap Test</title>

    <style>

     body, html,#main_div{width: 100%height: 100%overflow: hiddenmargin:0}

     #float_div{position: absolutetop: 5px left:25px border-right: activeborder 1px solid

 border-top: activeborder 1px solid border-left: activeborder 1px solid

 border-bottom: activeborder 1px solid z-index:9999,width: 300pxheight: auto 

 overflow: hidden}

     #web_cam{width:320px height:240px }

     #ctrl_bar_div{width:auto height:auto

     border:1px dotted blue margin:0px

     padding:3px}

     .span1{background-color:#afa }

     #cur_img{width:320px height:240px}

     #msg_tips{color:redbackground-color:#afa}

     #allmap {width: autoheight: 100%overflow: hiddenmargin:0font-family:"微软雅黑"}

    </style>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="./js/gumwrapper.min.js"></script>

    <script src="../js/Float_math.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的授权码"></script>

    <script src="./js/testhtml5.js"></script>

    <script type="text/javascript" >

     var gps_star=0

     var lat_offset=1.0001390158

     var lon_offset=1.0001029614

     var bm

     var old_Position

var cur_marker

var prive_position

var cam_is_open=0 //记录镜头的打开状态 ， 默认为没有开 状态=0

var gum

var send_time=""

var send_lat=""

var send_lon=""

var rel_lat=""

var rel_lon=""

var cur_offset_zt=0

//alert (cur_marker)

     $(document).ready(function() {

     drawbaiduMap()   

     bm.centerAndZoom("东莞",18) 

     })

    </script>

    

</head>

<body>

<div id="main_div">

   <div id="allmap"></div>

</div>

     <div id="float_div">

     <div id="ctrl_bar_div">

     <span class="span1" >  纬度：</span>

     <span class="span1" id="cur_lat" >000.000000 </span>

     <span  class="span1" > 经度：</span>

     <span class="span1" id="cur_lon" >000.000000 </span>

     <input id="is_ver_off_set" type="button" onclick="ver_offset_zt()" value="校正" />

     <br>

<input id="gps_btn" type="button" value="开\关GPS" onclick="getLocation()"/>

<input id="opencam_btn" type="button" value="打开镜头"  onclick="opencam()"/>

<span  id="msg_tips">GPS状态：关闭<span>

     </div>

<div id="web_cam"  style="display:none" onclick="set_timeout_short()" >

     </div>

     <div id="photo_div" style="display:none">

     <div id="send_btn_div">

     <input id="res_hort_btn" type="button" value="重拍" onclick="reshort_photo()"/>

     <input id="send_photo_btn" type="button" value="发送" onclick="send_photo()"/>

     <input id="canc_btn" type="button" value="取消" onclick="can_photo()"/>

     </div>

     <div id="canvas_div" style="display:none">

     <canvas id="photo_canvas" width="640" height="480"  >

     "不支持"

     </canvas>

     </div>

     <div id="img_div">

     <img id="cur_img"/>

     </div>

     </div>

    </div>

</body>

</html>

1、 视频流

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用

getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video

标签，并将从摄像头获得的视频作为这个标签的输入来源。

var video_element=document.getElementById(‘video’)

if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error) //success是回调函数,当然你也可以直接在此写一个匿名函数

}

function success(stream){

video_element.src=stream

}

此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。

2、 拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’)//动态创建画布对象

var ctx=canvas.getContext(’2d’)

var cw=vw,ch=vh

ctx.fillStyle=”#ffffff”

ctx.fillRect(0,0,cw,ch)

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh)//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。

document.body.append(canvas)

3、 图片获取

从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/pngbase64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”)

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器收的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

var data=imgData.substr(22)

如果要在上传前获取图片的大小，可以使用：

var length=atob(data).length//atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：

$.post(‘upload.php’,{‘data’:data})

在后台我们用PHP脚本接收数据并存储为图片。

function convert_data($data){

$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)

save_to_file($image)

}

function save_to_file($image){

$fp=fopen($filename,’w')

fwrite($fp,$image)

fclose($fp)

}

---