html调起苹果手机摄像头_Html5调用手机摄像头并实现人脸识别的实现
需求
混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上。
技术栈
vue、Html5、video标签、Android、IOS、百度AI
分析
1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能
2、video标签显示摄像头内容
3、canvas标签获取图片
4、将图像上传服务器,通过百度AI识别图片
5、web显示识别结果
核心代码
1、调用系统原生摄像头功能并使用video标签显示html:
id="webcam"
:style="videoStyle"
:width="videoWidth"
:height="videoHeight"
loop
preload
>
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错误,原因是摄像头参数设置不合理,找不到指定设置。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html调起苹果手机摄像头_Html5调用手机摄像头并实现人脸识别的实现相关推荐
- html调起苹果手机摄像头_html5调用手机摄像头
capture表示,可以捕获到系统默认的设备,比如:camera--照相机:camcorder--摄像机:microphone--录音. accept表示,直接打开系统文件目录. 其实html5的in ...
- html调起苹果手机摄像头_HTML5 调用手机摄像头拍照
一.getUserMedia API简介 getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬 ...
- html调起苹果手机摄像头_html5调取手机摄像头或相册
html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在中自己定义,这里我就不再定义了 首先 使 ...
- html调起苹果手机摄像头_html5摄像头 如何调用手机摄像头
cfyr 1)获取视频流添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源var video = document.getElementByIdx_x_x("vi ...
- html调起苹果手机摄像头_html5 file调用手机摄像头
在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...
- html调起苹果手机摄像头_HTML5如何调用手机摄像头拍照实现方法介绍
HTML5如何调用安卓手机摄像头拍照实现方法介绍.HTML5 The Media Capture API提供了对摄像头的可编程访问,可以直接用getUserMedia获得摄像头提供的视频流.其实实际上 ...
- html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
- 原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
- uniapp调用手机摄像头_HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题...
navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...
- h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示 注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
最新文章
- 看看人家那后端API接口写得,那叫一个优雅!
- linux如何添加route,Linux主机添加路由 route(示例代码)
- 看BAT技术面试官如何挑选Java程序员
- 苹果为了不让AirTag被用来跟踪,将推出一个安卓应用
- opencv mat2 ffmpeg frame
- [WCF 4.0新特性] 默认终结点
- hadoop yarn的三种资源调度器详解
- MVC-05 Model(1)
- mysql修改_mysql修改表操作
- Python2和Python3的兼容性写法
- 第四节:HTML5给表单带来的新标签、新属性、新类型
- 汉字在线转化unicode编码
- Mac上Jupyter notebook代码补全
- 矩阵与矩阵的转置相乘
- 毫米波雷达测距/测速原理介绍_小七自学笔记
- 基于变量推理的知识图路径推理分析
- 如何查询期刊论文影响力——JCR
- android 短信超链接,Android处理网页的短信链接
- 使用ROS和AprilTags进行相机定位(二维码定位全流程)
- 站住!做副业的亲,是时候跟你们做个了结了!