精华内容
下载资源
问答
  • vue调用本地摄像头实现拍照

    千次阅读 2020-08-12 14:02:38
    vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用。 实现效果: 1、摄像头效果: 2、拍照效果: 实现代码: <template> <div class=...

    前言:

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

    实现效果:

    1、摄像头效果:

    2、拍照效果:

    实现代码:

    <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/png')
    
    _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.png") 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>

    更多资料

    前端调用打印机打印条码、二维码(一些坑)

    https://www.cnblogs.com/Apsey/p/11865581.html

    前端调用打印机打印条码、二维码(一些坑)

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

    展开全文
  • vue调用摄像头pc+移动端

    千次阅读 多人点赞 2020-08-19 10:44:33
    vue调用本地摄像头 目录: pc部分: pc效果图: 实现代码: 移动端部分: 通过input开启手机前置摄像头, accept='image/*'是开启摄像头capture 实现代码: pc部分: pc效果图: 实现代码: <...

    前言:

            vue调用本地摄像头

    目录:

    pc部分:

    pc效果图:

    实现代码:

    移动端部分:

    通过input开启手机前置摄像头,  accept='image/*'是开启摄像头capture

    实现代码:


    pc部分:

    pc效果图:

    实现代码:

    <template>
        <div>
            <!--开启摄像头-->
            <Button  type="primary"  @click="callCamera" style="margin-right: 10px;">开启摄像头</Button>
            <!--关闭摄像头-->
            <Button  type="primary"  @click="closeCamera">关闭摄像头</Button>
            <!--canvas截取流-->
            <canvas ref="canvas" width="640" height="480"></canvas>
            <!--图片展示-->
            <video ref="video" width="640" height="480" autoplay></video>
            <!--确认-->
            <Button  type="primary" @click="photograph">拍照</Button>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
    
                }
            },
            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, 640, 480)
                    // 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/png
                    let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
    
                    /**------------到这里为止,就拿到了base64位置的地址,后面是下载功能----------*/
    
                    // 由字节转换为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>
    

    移动端部分:

    通过input开启手机前置摄像头,  accept='image/*'是开启摄像头capture

    实现代码:

     HTML 部分:
    
    <input ref="file" type="file" accept="image/*" capture="user">
     JS 部分: 接口使用的Vuex调用   可忽略  
    
      // 压缩图片 and 旋转角度纠正
        compressImage (event) {
          let _this = this
          let file = event.target.files[0]
          let fileReader = new FileReader()
          let img = new Image()
          let imgWidth = ''
          let imgHeight = ''
          // 旋转角度
          let Orientation = null
          // 缩放图片需要的canvas
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')// 图片大小  大于2MB 则压缩
          const isLt2MB = file.size < 2097152
          // 通过 EXIF 获取旋转角度 1 为正常  3 为 180°  6 顺时针90°  9 为 逆时针90°
          EXIF.getData(file, function () {
            EXIF.getAllTags(this)
            Orientation = EXIF.getTag(this, 'Orientation')
          })
          // 文件读取 成功执行
          fileReader.onload = function (ev) {
            // 文件base64化,以便获知图片原始尺寸
            img.src = ev.target.result
          }
          // 读取文件
          fileReader.readAsDataURL(file)
          // base64地址图片加载完毕后
          img.onload = function () {
            imgWidth = img.width
            imgHeight = img.height
            canvas.width = img.width
            canvas.height = img.height
            // 目标尺寸
            let targetWidth = imgWidth
            let targetHeight = imgHeight
            // 不需要压缩 不需要做旋转处理
            if (isLt2MB && imgWidth < 960 && imgHeight < 960 && !Orientation) return _this.XMLHttpRequest(file)
            if (isLt2MB && imgWidth < 960 && imgHeight < 960 && +Orientation === 1) return _this.XMLHttpRequest(file)
            // 大于2MB 、img宽高 > 960 则进行压缩
            if (!isLt2MB || imgWidth >= 960 || imgHeight >= 960) {
              // 最大尺寸
              let maxWidth = 850
              let maxHeight = 850
              // 图片尺寸超过 960 X 960 的限制
              if (imgWidth > maxWidth || imgHeight > maxHeight) {
                if (imgWidth / imgHeight > maxWidth / maxHeight) {
                  // 更宽,按照宽度限定尺寸
                  targetWidth = maxWidth
                  targetHeight = Math.round(maxWidth * (imgHeight / imgWidth))
                } else {
                  targetHeight = maxHeight
                  targetWidth = Math.round(maxHeight * (imgWidth / imgHeight))
                }
              }
              // canvas对图片进行缩放
              canvas.width = targetWidth
              canvas.height = targetHeight
              // 图片大小超过 2Mb 但未旋转  则只需要进行图片压缩
              if (!Orientation || +Orientation === 1) {
                ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
              }
            }
            // 拍照旋转 需矫正图片
            if (Orientation && +Orientation !== 1) {
              switch (+Orientation) {
                case 6:     // 旋转90度
                  canvas.width = targetHeight
                  canvas.height = targetWidth
                  ctx.rotate(Math.PI / 2)
                  // 图片渲染
                  ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight)
                  break
                case 3:     // 旋转180度
                  ctx.rotate(Math.PI)
                  // 图片渲染
                  ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight)
                  break
                case 8:     // 旋转-90度
                  canvas.width = targetHeight
                  canvas.height = targetWidth
                  ctx.rotate(3 * Math.PI / 2)
                  // 图片渲染
                  ctx.drawImage(img, -targetWidth, 0, targetWidth, targetHeight)
                  break
              }
            }
            // base64 格式   我这是vuex 形式 重点是 canvas.toDataURL('image/jpeg', 1)
            // _this.$store.commit('SAVE_FACE_IMAGE_BASE64', canvas.toDataURL('image/jpeg', 1))     // 调用接口上传
            // _this.upAppUserFaceByBase64()
            // 通过文件流格式上传     canvas.toBlob(function (blob) {
              _this.XMLHttpRequest(blob)
            }, 'image/jpeg', 1)
          }
        },
        // 上传base64方式
        upAppUserFaceByBase64 () {
          this.$store.dispatch('upAppUserFaceByBase64', {
            baseFace: this.$store.state.faceImageBase64
          }).then(res => {
            // 上传成功
          }).catch(err => {
            console.log(err)
          })
        },
        // 上传
        XMLHttpRequest (params) {
          // 图片ajax上传    let action = '后台接口地址'
          let xhr = new XMLHttpRequest()    let formData = new FormData()      formData.delete('multipartFile')
          formData.append('multipartFile', params)
          // 文件上传成功
          xhr.onprogress = this.updateProgress
          xhr.onerror = this.updateError
          // 开始上传
          xhr.open('POST', action, true)
          xhr.send(formData)
        },
        // 上传成功回调
        updateProgress (res) {
          // res 就是成功后的返回 
        },
        // 上传失败回调
        updateError (error) {
          console.log(error)
        },

     

     

    展开全文
  • 近期有个需求,通过vue的网页调用手机摄像头,拍摄完成后,传回照片给vue。 作为刚开始接触安卓的小白,看了非常多的案例,都是新建camera类,处理拍照、拍视频、查看照片等操作。而我的需求非常简单,就是点击按钮...

    近期有个需求,通过vue的网页调用手机摄像头,拍摄完成后,传回照片给vue。

    作为刚开始接触安卓的小白,看了非常多的案例,都是新建camera类,处理拍照、拍视频、查看照片等操作。而我的需求非常简单,就是点击按钮,拍照,给网页返回照片而已,不需要如此复杂的操作,于是尝试着用简单的方式完成调用摄像头的功能。

    (1)vue端,增加一个a标签,设置跳转关键字camera,这个是安卓识别要调用摄像头的关键点。

    (2)手机端,接受a标签的跳转,注:a标签调用一般会去调用WebViewClient的onPageFinished方法,但是此时的跳转属于非常规跳转,故采用`camera:`标识此次的跳转,然后就会调用WebViewClient的shouldOverrideUrlLoading方法拦截此次跳转,具体写法如下:

    基本上就是判断跳转连接中是否包含camera字段了,包含即调用监听事件,利用监听事件调用手机的摄像头,Intent it = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);即可。不过问题在于WebViewClient的shouldOverrideUrlLoading方法返回对象是boolean类型,那么,我们需要返回的是图片路径或者图片本身,也可以是base64处理过的流,这个类型的返回值对我们没有太多意义,所以设置一个全局变量imageUri,在拍照之前给其赋值,在回调时就利用这个路径可以得到想要的所有格式的图片数据了。

    (3)上图,最后一步,完成了就可以直接去vue端接收图片了。

    一枚程序媛,安卓开发新手,做的东西可能比较low,欢迎批评指正。

    展开全文
  • 人脸拍摄调用前置摄像头,拍摄比对好后,应该调用高拍仪拍摄介绍信 样机展示 二、调用代码 <template> <div> <button @click="callCamera" style="margin-right: 10px;">开启摄像头</...

    一、问题描述

    电脑上安装了三个摄像头,两个前置的摄像头和一个高拍仪拍摄介绍信的,现在需要通过代码来调用摄像头,并区分当前应该调用哪个摄像头完成相应的功能。人脸拍摄调用前置摄像头,拍摄比对好后,应该调用高拍仪拍摄介绍信

    样机展示

    二、调用代码

    <template>
        <div>
            <button @click="callCamera" style="margin-right: 10px;">开启摄像头</button>
            <button @click = 'changeDevice' style="margin-right: 10px;">切换摄像头</button>
            <button @click="closeCamera">关闭摄像头</button>
            <canvas ref="canvas" width="640" height="480"></canvas>
            <video ref="video" width="640" height="
    展开全文
  • 2.选择允许使用摄像头之后,页面摄像头区域开始显示画面 3.点击拍照按钮,右侧显示拍摄的图片。点击保存即可 完整代码: 我这里写的是一个组件,所以触发调取摄像头事件是从父组件传过来的。也可以直接写一个页面...
  • 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> <!--开启摄像头--> <img @click="callCamera" :src=...
  • 最近在项目遇到了一个问题,用uniapp的框架做一个功能,就是打开平板自带的前置摄像头拍照,uniapp上的功能只有打开默认相机的功能,但是前置摄像头需要你自己去手动转换一下,客户体验感很不好,产品经理要求必须要...
  • 主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 基于获取摄像头权限 拍照的人脸识别技术

    千次阅读 热门讨论 2019-03-26 10:57:31
    前端思想是获取摄像头权限 通过canvas 获取base64图片 然后转为二进制文件流 通过FormData(form表单提交)和后端交互 的方式进行识别 后端的实现思路呢? 创建一个sql 里面存一些有权限的人员信息包含照片等 用上传...
  • 参考文档:... ... 使用vue-cropper裁剪图片 参考文档:https://blog.csdn.net/hql1024/article/details/110222217?utm_medium=distribute.pc_relevant.none-ta.
  • vue调取手机原生摄像头和相册

    千次阅读 2020-05-06 10:28:37
    //字符串数组,摄像头支持的拍照文件格式 // console.log("拍照分辨率: " + res + ", 拍照文件格式: " + fmt); cmr.captureImage( function(path) { plus.gallery.save(path, params => { let file = params.file; ...
  • vue转移动端调取摄像头方法汇总

    千次阅读 2020-06-24 14:34:59
    input 这种方式是文件录入的方式需要做二次操作,相当于上传文件,所以界面可能会有很多选择方式,摄像头不是唯一,如果我们想直接点击调取摄像头这种方式行不通 // 摄像 // 图片 // 音频 二. HTML5(Camera) Camera...
  • <video id="video" autoplay width="300" height="300" controls></video> <x-button class="video-btn" type="primary" @click.native="upBtnFileFace">刷脸验证</x-button>...
  • AR.js摄像头前置的问题(已解决)(H5调用摄像头

    万次阅读 热门讨论 2018-07-07 22:39:18
    AR.js摄像头前置的问题(已解决)  终于放假了,开始搬砖。很多开发者对AR.js摄像头前置的这个问题比较苦恼,网上也有很多解决办法,但是有些过时。接下来,我们来一起解决这个问题。先看一下效果。(PS:下面的QQ...
  • vue用input调起手机摄像头录制视频

    千次阅读 2021-11-12 16:32:47
    capture="camcorder" //只是调起摄像头,不选择文件 @change="videoChange" @click="starVideotape" /> <--video用于播放拍摄后的内容--> <video id="video" width='300' heig.
  • 前端调用手机摄像头权限进行扫码解析(demo含Vue及原生)前端调用手机摄像头权限进行扫码解析(demo含Vue及原生js写法)引子实践此时已经可以成功调用摄像头,接下来集成进Vue工程中最后 前端调用手机摄像头权限进行...
  • 参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 function gotStream(stream) { video.src = URL.createObjectURL(stream); video.onerror = function () { stream.stop...
  • vue仿人脸识别.vue

    2020-07-08 11:12:32
    vue页面仿支付宝人脸识别进行拍照,调用系统相机,默认前置摄像头,拍照后转码为base64格式,具有重新拍摄功能,
  • https://www.jianshu.com/p/4e3feddb9c60
  • Html5调用手机摄像头并实现人脸识别

    万次阅读 2018-12-03 10:48:11
    在混合App开发中,如何在Web中调用本地摄像头并实现人脸识别功能?本文给出了一个解决方案,并给出了该方案的核心代码,其中前端使用vue,该方案适配了Android手机。
  • 使用H5调用笔记本外接USB摄像头

    千次阅读 2019-04-24 16:30:38
    因为项目需要调用摄像头但是笔记本的前置摄像头并不是那么方便,所以就打算使用外接的USB摄像头,考虑到没有类似的案例在网上也搜索不到使用H5调用外接的摄像头都只是调用本地的前置摄像头就打算先买一个便宜的...
  • H5通过navigator.mediaDevices.getUserMedia调用手机摄像头

    万次阅读 热门讨论 2020-04-26 17:40:51
    } } 问题三:(第一次启用成功调用前置摄像头,第二次需要调用后置却黑屏或者失败) 失败的原因很多,列举两个一开始我遇到的问题 1.前置摄像头调用后,摄像功能需要关闭后才能正常执行第二次调用,否则会报错:...
  • 在webapp上使用input:file, 指定capture属性调用默许相机,摄像,录音功能 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用input之file,很有用 <input type=...
  • facingMode: 'user ' // -- 前置 3. 如果你想在已经播放视频的情况下更换摄像机,你需要先停止当前的视频流,然后再将其替换成另一台摄像机的视频流。videoStream.getTracks().forEach((track) => { track.stop()...
  • 调取手机摄像头 &l...

空空如也

空空如也

1 2 3 4 5 6
收藏数 103
精华内容 41
关键字:

vue调用前置摄像头

vue 订阅