前端调用设备摄像头

 

新建一个video标签，设置大小，ref命名

<video
        ref="video"
        autoplay
        width="700"
        height="500"
        class="videoElement"
      ></video>

 

video获取摄像头内容

可以这么写，没有回调提示

查看代码

 // video标签获取摄像头内容
      this.$refs.video.srcObject = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: false,
      });

 

也可以这么写，有回调+  用户体验好

查看代码

 await navigator.mediaDevices
        .getUserMedia({
          video: true,
          audio: false,
        })
        .then((stream) => {
          this.$refs.video.srcObject = stream;
          console.log("摄像头开启成功");
        })
        .catch((error) => {
          console.log("摄像头开启失败");
        });

 

 

---

加个画布实现截图拍照

创建canvas标签，设置大小，ref命名

<canvas
        ref="canvas"
        width="400"
        height="300"
        class="canvansturn"
      ></canvas>

 

获取canvas对象

      // 创建canvas对象
      this.canvas = this.$refs.canvas;
      this._context2d = this.canvas.getContext("2d");

 

调用canvas对象的获取内容功能 【就是   this.canvas.getContext("2d").drawImage()  】

this._context2d.drawImage(this.$refs.video, 0, 0, 400, 300);

调用后画布显示的内容就是video的内容

 

 

 

---

新建标签点击后下载canvas图片

<!-- 下载 -->
      <a href="" download="canvas.jpeg" id="save_herf">
        <img src="" id="save_img" alt="" />
      </a>

 

js这么写

var img = document.createElement("img"); // 创建img元素
      img.src = this.canvas.toDataURL("image/png"); // 截取画布内容
      var svaeHref = document.getElementById("save_herf");
      console.log(img.src);

        var sd = document.getElementById("save_img");
        svaeHref.href = img.src;
        sd.src = img.src;