·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解6:利用getUserMedia API可实现拍照功能

时间:2017-03-06 14:19web前端教程
获取摄像头影像主要是通过navigator.getUserMedia这个接口,在caniuse.com上查询一下这个接口的支持情况

注意:获取摄像头影像主要是通过navigator.getUserMedia这个接口,在caniuse.com上查询一下这个接口的支持情况,可以看到目前只有Chrome和Firefox支持得比较好,而且都要加上自家的前缀,移动端几乎全线不可用。

属性:window.navigator.getUserMedia(); 获取摄像头形象主要通过getUserMedia这个接口

案例代码:

//首先要有个video标签

<video id="video"></video>

var video = document.getElementById('video');

//getUserMeida做兼容处理

 

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

//向浏览器申请访问摄像头权限,需要用户通过浏览器授权

var constraints= {

video:true,//video为true为启用视频

audio:true // audio为true为启用音频

}

navigator.getUserMedia(constraints,onSuccess, onError);

浏览器执行这段代码的时候,会提示用户是否允许使用摄像头,允许之后,网页上就可以实时显示摄像头影像了。如果不允许,就会触发错误事件。

//如果启动成功,出发监听处理程序,传入一个视频流对象的参数stream

function onSuccess(stream){

if(window.URL){

//在Chrome和Opera中,URL.createObjectURL方法将媒体数据流(MediaStream)转为一个二进制对象的URL(Blob URL),该URL可以作为video元素的src属性的值。

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

}else{

video.src = stream;

}

video.play();

}

//如果再此基础上需要实现获取影像(拍照)功能的话,要加上canvas

<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');

//规定要使用的图像、画布或视频,位移x:0,y:0,宽,搞

canvas.getContext('2d).drawImage(video,0,0,window.innerWidth,innerHeight);

//把canvas的图片显示出来,放在一个img标签里面

<img id='img' src=''/>

var img = document.getElementById('img');

//canvas.toDataUR()返回又参数指定格式image/webp的图片的描述信息

img.src = canvas.toDateURL('image/webp');

来到这里img元素就会显示你的摄像图里面的图像了!

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!