vue调用本地摄像头实现拍照功能


Posted in Javascript onAugust 14, 2020

前言:

vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用。实现效果:

1、摄像头效果:

vue调用本地摄像头实现拍照功能

2、拍照效果:

vue调用本地摄像头实现拍照功能

实现代码:

<template>
  <div class="camera_outer">
   <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
   <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>
 
   <div v-if="imgSrc" class="img_bg_camera">
    <img :src="imgSrc" alt="" class="tx_img">
   </div>
   <button @click="getCompetence()">打开摄像头</button>
   <button @click="stopNavigator()">关闭摄像头</button>

 <button @click="setImage()">拍照</button>
 
 
  
  </div>
 </template>
 <script>
 export default {
  data () {
   return {
    videoWidth: 3000,
    videoHeight: 300,
    imgSrc: '',
    thisCancas: null,
    thisContext: null,
    thisVideo: null,
   }
  },
  methods: {
// 调用权限(打开摄像头功能)
   getCompetence () {
    var _this = this
    this.thisCancas = document.getElementById('canvasCamera')
    this.thisContext = this.thisCancas.getContext('2d')
    this.thisVideo = document.getElementById('videoCamera')
    // 旧版本浏览器可能根本不支持mediaDevices,我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
     navigator.mediaDevices = {}
    }
    // 一些浏览器实现了部分mediaDevices,我们不能只分配一个对象
    // 使用getUserMedia,因为它会覆盖现有的属性。
    // 这里,如果缺少getUserMedia属性,就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
     navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先获取现存的getUserMedia(如果存在)
      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
      // 有些浏览器不支持,会返回错误信息
      // 保持接口一致
      if (!getUserMedia) {
       return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
      }
      // 否则,使用Promise将调用包装到旧的navigator.getUserMedia
      return new Promise(function (resolve, reject) {
       getUserMedia.call(navigator, constraints, resolve, reject)
      })
     }
    }
    var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
     // 旧的浏览器可能没有srcObject
     if ('srcObject' in _this.thisVideo) {
      _this.thisVideo.srcObject = stream
     } else {
      // 避免在新的浏览器中使用它,因为它正在被弃用。
      _this.thisVideo.src = window.URL.createObjectURL(stream)
     }
     _this.thisVideo.onloadedmetadata = function (e) {
      _this.thisVideo.play()
     }
    }).catch(err => {
     console.log(err)
    })
   },
// 绘制图片(拍照功能)
 
   setImage () {
    var _this = this
    // 点击,canvas画图
    _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
    // 获取图片base64链接
    var image = this.thisCancas.toDataURL('image/jpg')
    _this.imgSrc = image
    this.$emit('refreshDataList', this.imgSrc)
   },
// base64转文件
 
   dataURLtoFile (dataurl, filename) {
    var arr = dataurl.split(',')
    var mime = arr[0].match(/:(.*?);/)[1]
    var bstr = atob(arr[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
   },
// 关闭摄像头
 
   stopNavigator () {
    this.thisVideo.srcObject.getTracks()[0].stop()
   }
  },
 
 }
  
 </script>
 <style lang="less" scoped>
 .camera_outer{
  position: relative;
  overflow: hidden;
  background: url("../../assets/img/user_0608_04.jpg") no-repeat center;
  background-size: 100%;
  video,canvas,.tx_img{
   -moz-transform:scaleX(-1);
   -webkit-transform:scaleX(-1);
   -o-transform:scaleX(-1);
   transform:scaleX(-1);
  }
  .btn_camera{
   position: absolute;
   bottom: 4px;
   left: 0;
   right: 0;
   height: 50px;
   background-color: rgba(0,0,0,0.3);
   line-height: 50px;
   text-align: center;
   color: #ffffff;
  }
  .bg_r_img{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
  }
  .img_bg_camera{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   img{
    width: 100%;
    height: 100%;
   }
   .img_btn_camera{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,0.3);
    color: #ffffff;
    .loding_img{
     width: 50px;
     height: 50px;
    }
   }
  }
 }
 </style>

总结

到此这篇关于vue调用本地摄像头实现拍照功能的文章就介绍到这了,更多相关vue调用本地摄像头实现拍照内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
微信小程序工具函数封装
Oct 28 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
JS如何生成动态列表
Sep 22 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 #Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 #Javascript
Vue的Options用法说明
Aug 14 #Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 #Javascript
vue 扩展现有组件的操作
Aug 14 #Javascript
如何HttpServletRequest文件对象并储存
Aug 14 #Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 #Javascript
You might like
基于PHP中的常用函数回顾
2013/07/11 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Django-imagekit的使用详解
2020/07/06 Python
python如何实现DES加密
2020/09/21 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
专业销售业务员求职信
2013/11/18 职场文书
少先队入队活动方案
2014/02/08 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
北京故宫的导游词
2015/01/31 职场文书