Html5调用手机摄像头并实现人脸识别的实现


Posted in HTML / CSS onDecember 21, 2018

需求

混合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错误,原因是摄像头参数设置不合理,找不到指定设置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 #HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 #HTML / CSS
Canvas globalCompositeOperation
Dec 18 #HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 #HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jquery实现拖动效果
2016/08/10 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python版本五子棋的实现代码
2018/12/11 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
PyQt5实现简单的计算器
2020/05/30 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
运动会四百米广播稿
2014/01/19 职场文书
初中化学教学反思
2014/01/23 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2016公司年会通知范文
2015/04/25 职场文书
上课迟到检讨书
2015/05/06 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL