VUE 调用PC摄像头,亲测可用

末蓝、 2022-11-25 04:29 243阅读 0赞

### 首先声明一下，对于我的博客整理出来的。绝对是我自己亲测测试后有效果的，对于一些大佬说没用什么的，请仔细检查下您的代码！谢谢 ###

在当前网页安全的情况下，浏览器会开启  
navigator.mediaDevices.getUserMedia  
我们通过它来实现拍照  
如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全：  
1.浏览器进入：chrome://flags/\#unsafely-treat-insecure-origin-as-secure  
2.然后改下参数配置，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

这一步感谢这位大佬[https://blog.csdn.net/qq\_41614928/article/details/107715577][https_blog.csdn.net_qq_41614928_article_details_107715577]

都准备好之后，直接上代码：

<template>
      <div>
        <article>
          <section>
            <video id="video"></video>
          </section>
          <section>
            <audio id="audio"></audio>
          </section>
          <button id="btn" @click="tackcapture">拍照</button>
          <button @click="opening">开启</button>
          <section>
            <canvas id="canvas"></canvas>
          </section>
          <section><img src="" alt="" id="img" /></section>
        </article>
      </div>
    </template>
    
    <script>
    // 拍照上传组件
    // 父组件通过函数 getImg 获取照片路径,如 @getImg="getImg"
    const Address = ''
    export default {
      name: 'TakePhotos',
      data () {
        return {}
      },
      methods: {
        opening () {
          let convas = document.querySelector('#canvas') //
          let video = document.querySelector('#video')
          let audio = document.querySelector('audio')
          let img = document.querySelector('#img')
          let btn = document.querySelector('button')
          let context = canvas.getContext('2d')
          let width = 320 // 视频和canvas的宽度
          let height = 0 //
          let streaming = false // 是否开始捕获媒体
          // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
          if (navigator.mediaDevices == undefined) {
            navigator.mediaDevices = {}
          }
          // 获取用户媒体,包含视频和音频
          navigator.mediaDevices
            .getUserMedia({ video: true, audio: true })
            .then((stream) => {
              video.srcObject = stream // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
              video.play() //  播放视频
              audio.srcObject = stream
              audio.play()
            })
        },
        tackcapture () {
          // 需要判断媒体流是否就绪
          let convas = document.querySelector('#canvas') //
          let video = document.querySelector('#video')
          let audio = document.querySelector('audio')
          let img = document.querySelector('#img')
          let btn = document.querySelector('button')
          let context = canvas.getContext('2d')
          let width = 320 // 视频和canvas的宽度
          let height = 0 //
          let streaming = true // 是否开始捕获媒体
          if (streaming) {
            context.drawImage(video, 0, 0, 350, 200) // 将视频画面捕捉后绘制到canvas里面
            img.src = canvas.toDataURL('image/png') // 将canvas的数据传送到img里
            alert(img.src) // 这边的值可以传入后端
          }
    
          // 监听视频流就位事件,即视频可以播放了
          video.addEventListener(
            'canplay',
            function (ev) {
              if (!streaming) {
                height = video.videoHeight / (video.videoWidth / width)
    
                video.setAttribute('width', width)
                video.setAttribute('height', height)
                canvas.setAttribute('width', width)
                canvas.setAttribute('height', height)
                streaming = true
              }
            },
            false
          )
        }
      }
    }
    </script>

感谢这位大佬：[https://bingxl.cn/webrtc.html][https_bingxl.cn_webrtc.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221124/1a689b335a75486d95cfbcdcca787a15.png
[https_blog.csdn.net_qq_41614928_article_details_107715577]: https://blog.csdn.net/qq_41614928/article/details/107715577
[https_bingxl.cn_webrtc.html]: https://bingxl.cn/webrtc.html