fox浏览器（fox浏览器官网）

大家好，最近还有很多朋友对于fox浏览器不是很理解。然后还有一些网友想弄清楚fox浏览器官网，泰缘号网小编已经为你找到了相关问题的答案，接下来和我们一起看看吧，希望对大家有所帮助！

需求

混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。

技术栈

vue、Html5、video标签、Android、IOS、百度AI

分析

1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能

2、video标签显示摄像头内容

3、canvas标签获取图片

4、将图像上传服务器，通过百度AI识别图片

5、web显示识别结果

核心代码

1、调用系统原生摄像头功能并使用video标签显示html:

<video

id="webcam"

style="videoStyle"

width="videoWidth"

height="videoHeight"

loop

preload

>

</video>

JavaScript：

initVideo() {

let that=this;

this.video=document.getElementById("webcam");

setTimeout(()=> {

if (

navigator.mediaDevices.getUserMedia ||

navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia

) {

//调用用户媒体设备, 访问摄像头

this.getUserMedia(

{

video: {

width: {

ideal: that.videoWidth,

max: that.videoWidth

},

height: {

ideal: that.videoHeight,

max: that.videoHeight

},

facingMode: "user", //前置摄像头

frameRate: {

ideal: 30,

min: 10

}

}

},

this.videoSuccess,

this.videoError

);

} else {

this.$toast.center("摄像头打开失败,请检查权限设置!");

}

}, 300);

},

getUserMedia(constraints, success, error) {

if (navigator.mediaDevices.getUserMedia) {

//最新的标准API

navigator.mediaDevices

.getUserMedia(constraints)

.then(success)

.catch(error);

} else if (navigator.webkitGetUserMedia) {

//webkit核心浏览器

navigator.webkitGetUserMedia(constraints, success, error);

} else if (navigator.mozGetUserMedia) {

//firfox浏览器

navigator.mozGetUserMedia(constraints, success, error);

} else if (navigator.getUserMedia) {

//旧版API

navigator.getUserMedia(constraints, success, error);

}

}

videoSuccess(stream) {

this.mediaStreamTrack=stream;

this.video.srcObject=stream;

this.video.play();

}，

videoError(error) {

console.error(error);

this.$toast.center("摄像头打开失败,请检查权限设置!");

}，

2、canvas获取摄像头图片

JavaScript：

this.canvas=document.createElement("canvas");

….

let context=this.canvas.getContext("2d");

context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);

this.imgSrc=this.canvas.toDataURL("image/png");

3、调用百度AI识别图片

JavaScript：

let that=this;

let base64Data=this.canvas.toDataURL();

let blob=this.dataURItoBlob(base64Data);

var file=new FormData();

file.append("file", blob);

file.append("key", that.uuid);

util.ajax

.post("XXXXXXXXXX", file, {

headers: {

"Content-Type": "multipart/form-data"

}

})

.then(function(response) {

if ((response.status=200)) {

…..识别成功，显示结果

} else {

……识别失败

}

})

.catch(function(error) {

console.error(error);

});

//base64转换为Blob

dataURItoBlob(base64Data) {

var byteString;

if (base64Data.split(",")[0].indexOf("base64") >=0)

byteString=atob(base64Data.split(",")[1]);

else byteString=unescape(base64Data.split(",")[1]);

var mimeString=base64Data

.split(",")[0]

.split(":")[1]

.split(";")[0];

var ia=new Uint8Array(byteString.length);

for (var i=0; i < byteString.length; i++) {

ia[i]=byteString.charCodeAt(i);

}

return new Blob([ia], { type: mimeString });

},

手机适配

1、由于Android6之后，Android的权限管理出现变化，Android原生的壳子，需要做如下处理：

myWebView.setWebChromeClient(new WebChromeClient() {

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

@Override

public void onPermissionRequest(final PermissionRequest request) {

request.grant(request.getResources());

}

});

2、IOS系统，Safari11之后可用

3、OverconstrainedError错误，部分Android手机会报OverconstrainedError错误，原因是摄像头参数设置不合理，找不到指定设置。

注：如代码有错误请主动联系发布者。