如何通过html5调用摄像头拍照

1. 项目背景

网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。

2. 如何调用摄像头

$scope.photoErr = false

$scope.photoBtnDiable = true

var mediaStream = null,track = null

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

navigator.msGetUserMedia)

if (navigator.getMedia) {

navigator.getMedia(

{

video: true

},

// successCallback

function (stream) {

var s = window.URL.createObjectURL(stream)

var video = document.getElementById('video')

video.src = window.URL.createObjectURL(stream)

mediaStream = stream

track = stream.getTracks()[0]

$scope.photoBtnDiable = false $scope.$apply()

},

// errorCallback

function (err) {

$scope.errorPhoto()

console.log("The following error occured:" + err)

})

} else {

$scope.errorPhoto()

}

代码解析：

navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及 *** 作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：

{

video: true，

audio: true

}

调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {

var canvas = document.createElement('canvas')

canvas.width = "400"

canvas.height = "304"

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

ctx.drawImage(video, 0, 0, 400, 304)

$scope.closeCamera()

$uibModalInstance.close(canvas.toDataURL("image/png"))

}

拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开d出层的一个对象，用来控制d出层的显示。

4. 如何关闭摄像头

$scope.closeCamera = function () {

if (mediaStream != null) {

if (mediaStream.stop) {

mediaStream.stop()

}

$scope.videosrc = ""

}

if (track != null) {

if (track.stop) {

track.stop()

}

}

}

正如前面所说，关闭摄像头的方式是通过mediaStream和track变量，只不过，track只能关闭Chrome浏览器中的摄像头，这也是Chrome 45版本以上关闭摄像头的方式。

5. 集成到AndularJs

事实上，前面所说的都是在AndularJs中实现的，当然，这里只是实现了拍照并返回拍照数据，我们想要在其他地方也使用，就需要将这部分独立出来，这里我们用到了AngularJs中的service机制，将这部分单独做成一个service并在项目中注入，然后就可以在其他地方调用了。

service注册:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

this.photo = function () {

var deferred = $q.defer()

require([config.server + "/com/controllers/photo.js"], function () {

$uibModal.open({

templateUrl: config.server + "/com/views/modal_take_photo.html",

controller: "photoModalController",

windowClass: "modal-photo"

}).result.then(function (e) {

deferred.resolve(e)

})

})

return deferred.promise

}

})

调用方式：

$scope.takePhoto = function () {

h5TakePhotoService.photo().then(function (res) {

if (res != null &&res != "") {

$scope.myImage = res

}

})

}

h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。

6. 兼容问题

主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。

最后需要说一下，测试时只能通过http://url访问才能使用，不能通过file://url方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。

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)

}

  //简单实例 用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>

---