<template>
    <div>
      <!--canvas截取流-->
      <canvas ref="canvas" width="320" height="260"></canvas>
      <!--图片展示-->
      <video ref="video" width="340" height="280" autoplay></video>
      <!--确认-->
      <el-button size="mini" type="primary" @click="photograph">拍照</el-button>
    </div>
  </template>   
  <script>
  export default {
    created() {
      this.callCamera()
    },
    data() {
      return {
        // headImgSrc: require('../assets/image/shou.png')
      }
    },
  
    methods: {
      // 调用摄像头
      callCamera() {
        // H5调用电脑摄像头API
        navigator.mediaDevices
          .getUserMedia({
            video: true
          })
          .then(success => {
            // 摄像头开启成功
            this.$refs['video'].srcObject = success
            // 实时拍照效果
            this.$refs['video'].play()
          })
          .catch(error => {
            console.error('摄像头开启失败,请检查摄像头是否可用!')
          })
      },
      // 拍照
      photograph() {
        let ctx = this.$refs['canvas'].getContext('2d')
        // 把当前视频帧内容渲染到canvas上
        ctx.drawImage(this.$refs['video'], 0, 0, 340, 280)
        // 转base64格式、图片格式转换、图片质量压缩
        let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7) // 由字节转换为KB 判断大小
  
        let str = imgBase64.replace('data:image/jpeg;base64,', '')
        let strLength = str.length
        let fileLength = parseInt(strLength - (strLength / 8) * 2) // 图片尺寸  用于判断
        let size = (fileLength / 1024).toFixed(2)
        console.log(size) // 上传拍照信息  调用接口上传图片 .........
  
        // 保存到本地
        // let ADOM = document.createElement('a')
        // ADOM.href = this.headImgSrc
        // ADOM.download = new Date().getTime() + '.jpeg'
        // ADOM.click()
      },
      // 关闭摄像头
      closeCamera() {
        if (!this.$refs['video'].srcObject) return
        let stream = this.$refs['video'].srcObject
        let tracks = stream.getTracks()
        tracks.forEach(track => {
          track.stop()
        })
        this.$refs['video'].srcObject = null
      }
    }
  }
  </script>

谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE的更多相关文章

  1. C# - VS2019调用AForge库实现调用摄像头拍照功能

    前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...

  2. javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia,做扫描二维码,并识别内容

    本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...

  3. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  4. 录制用户的音频,视屏 navigator.mediaDevices.getUserMedia

    google 文档 HACKS 文档 相关代码 获取本地的音频 <input type="file" accept="audio/*" capture=& ...

  5. navigator.mediaDevices.getUserMedia

    navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserM ...

  6. android: 调用摄像头拍照

    很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...

  7. AForge调用摄像头拍照时设置分辨率

    简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...

  8. Java乔晓松-android中调用系统拍照功能并显示拍照的图片

    android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...

  9. Xamarin.Android 调用手机拍照功能

    最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...

随机推荐

  1. php面试专题---8、会话控制考点

    php面试专题---8.会话控制考点 一.总结 一句话总结: 主要是cookie和session的区别,以及用户禁用cookie之后怎么使用session 1.为什么要使用会话控制技术? 因为http ...

  2. 解决IDEA输入法输入中文候选框不显示问题

    本机环境为: 系统: win7        jdk版本:jdk1.8.0_65      idea版本:2017.2.3 解决方法:关掉idea,进入idea的安装目录找到jre64文件夹重命名为j ...

  3. React Hooks简单业务场景实战(非源码解读)

    前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...

  4. tomcat启动控制台报Exception in thread ''main".......“Could not find the main class:.....Bootstrap”问题

    startup.bat文件打开最后end下一行加pause调试,重新启动tomcat,发现配置没问题,但是依然报错,发现是jdk版本问题,jdk1.6无法与tomcat8适配,重新装个1.7版本的jd ...

  5. 【ABAP系列】SAP DOI技术中I_OI_SPREADSHEET接口的使用

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP DOI技术中I_OI_S ...

  6. JSP基础--EL表达式

    EL(表达式语言) 1 EL概述 1.1 EL的作用 JSP2.0要把html和css分离.要把html和javascript分离.要把Java脚本替换成标签.标签的好处是非Java人员都可以使用. ...

  7. (经典文章uplink)Information capacity and power control in single-cell multiuser communications(1995)

    摘要:本文在用户衰落被完美测量的情况下,提出一种可最大程度提高单小区多用户通信平坦衰落的信息容量的功率控制.主要特征为:在任何特定的时刻,只有一个用户在整个带宽上进行传输,并且在信道良好时为用户分配更 ...

  8. Spring学习(五)--构建Spring Web应用程序

    一.Spring MVC起步 看过猫和老鼠的小伙伴都可以想象Tom猫所制作的捕鼠器:它的目标 是发送一个小钢球,让它经过一系列稀奇古怪的装置,最后触发捕鼠 器.小钢球穿过各种复杂的配件,从一个斜坡上滚 ...

  9. Java稀疏数组

    一.概述 1.概念 2.处理方法 3.示例 原数组如下: 转换为稀疏数组如下: 二.代码 1.主方法 @Testpublic void SparseTest() { // 创建一个原始的二维数组 11 ...

  10. Vue的入门之安装

    vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅! 1 node.js环境的安装包(npm包管理器) 2 vue-cli 脚手架构建工 ...