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