H5拍照上传

心血来潮想在网页上搞个拍照上传,由于以前没做过类似的东西,百度了一下,还真的有一个这样的API(getUserMedia),不过浏览器支持情况不实很好,以下是getUserMedia的支持情况:

18-10-15-347cd6

getUserMedia需要传递三个参数:

1、选项对象({video:true,audio:true})

2、成功回调函数

3、失败回调函数

示例:(仅适用于Video)

navigator.getUserMedia({video:true}, successCallback, errCallback);

成功回调函数将接收一个参数,包含摄像头的视频流,我们需要将该视频流发送到我们的<video>元素。为此,我们设定它的src属性,但有几件事情要牢记:

Firefox使用mozSrcObject的属性,而Opera和Chrome使用src属性。
Chrome使用createObjectURL的方法,而Firefox和Opera直接发送视频流。

在Firefox中,video.mozSrcObject最初为null,而不是未定义的,所以我们可以靠这个来检测Firefox的支持(hat tip to Florent)。一旦视频流知道去哪儿了,我们就可以告诉视频流播放了。

function successCallback(stream){
if(video.mozSrcObject){
video.mozSrcObject = stream;
}else{
video.src = (window.URL && window.URL.createObjectUrl(stream)) || stream;
}
}

接下来我们添加一个错误的回调函数,在线拍照功能就已经可以运行起来了,但是我们需要注意各个浏览器厂商对于部分API的实现有差别,所以我们需要兼容到各个主流浏览器。以下是我们的最终版本,他看起来像这样:

var video = document.getElementById("video"),
videoObj = { video : true },
errCallback = function(err){
alert(err.message);
}
function successCallback(stream){
if(video.mozSrcObject){
video.mozSrcObject = stream;
}else{
video.src = (window.URL && window.URL.createObjectUrl(stream)) || stream;
}
}
navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(navigator.getUserMedia){
navigator.getUserMedia(videoObj, successCallback, errCallback);
}else{
console.log("not support getusermedia");
}
  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章