html5 getusermedia,通过HTML5的getUserMedia实现拍照功能

1. 通过getUserMedia调用设备的摄像头(电脑、手机都可以,取决于浏览器对这个API的支持情况),并将资源放入video标签。

2. 将video内的视频资源通过canvas的drawImage API放入canvas里,这个canvas是不显示的。

3. 将canvas的内容转换成base64编码的webp格式的图像(如果浏览器不支持这个格式,会fallback到png格式)放入img里,于是你就能看到你拍的照片了。

不废话了,上代码:HTMLhtml>

html5 capture test

    

snapshot

JSvar video = document.querySelector('video');

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

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

var localMediaStream = null;

var snapshot = function () {

if (localMediaStream) {

ctx.drawImage(video, 0, 0);

document.querySelector('img').src = canvas.toDataURL('p_w_picpath/webp');

}

};

var sizeCanvas = function () {

setTimeout(function () {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

img.width = video.videoWidth;

img.height = video.videoHeight;

}, 100);

};

var btnCapture = document.getElementById('capture');

btnCapture.addEventListener('click', snapshot, false);

navigator.webkitGetUserMedia(

{video: true},

function (stream) {

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

localMediaStream = stream;

sizeCanvas();

},

function () {

alert('your browser does not support getUserMedia');

}

);几个注意事项:不同浏览器对getUserMedia的支持情况不同,需要加上前缀,比如webkitGetUserMedia、mozGetUserMedia、msGetUserMedia,如果你想屏蔽这一问题的话,可以这样做:// cross platforms

var myGetUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;Chrome对file:///做了很多的限制,跨域就不说了,geolocation也不能在本地下使用,这个getUserMedia也是。

这个sizeCanvas函数做的事情就是保证你拍到的照片的大小和摄像头拍到的大小是一样的,否则会出现拍到的照片只有摄像头录到的一部分画面的情况。

http://blog.csdn.net/journey191/article/details/40744015

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值