vue3 开启摄像头，并进行拍照

咏烽丶

已于 2023-11-03 14:51:28 修改

阅读量2.5k

点赞数 4

文章标签：前端 vue.js

于 2023-09-15 12:15:37 首次发布

本文链接：https://blog.csdn.net/weixin_50637077/article/details/132899391

版权

注意：由于调用摄像头需要使用权限，只能在本地运行，线上需用 https 域名才可以使用。

核心API

navigator.mediaDevices.getUserMedia

简单来说就是 向用户请求获得媒体输入的许可，返回一个MediaStream，我们可以使用MediaStream与video组件绑定输出摄像头拍摄的视频，也能记录麦克风的音频

代码实现

<template>
  <div class="main">
    <!-- 画笔控件 用来拍照 -->
    <canvas style="display: none" ref="canvasDom"/>
    <!-- 播放器，用来播放拍摄的视频 -->
    <video v-if="!imgurl" class="camera_video" ref="videoDom"/>
    <!--  显示照片  -->
    <img v-else :src="imgurl"/>
    <br/>
    <button @click="takePhoto">{{ imgurl ? "重拍" : "拍照" }}</button>
  </div>
</template>


<script setup>
import {ref, onMounted} from "vue";
// canvas控件对象
const canvasDom = ref(null);
// video 控件对象
const videoDom = ref(null);
// 照片路径
const imgurl = ref(null);


const openCamera = () => {
  // 检测浏览器是否支持mediaDevices
  if (navigator.mediaDevices) {
    navigator.mediaDevices
        // 开启视频，关闭音频
        .getUserMedia({audio: false, video: true})
        .then((stream) => {
          // 将视频流传入viedo控件
          videoDom.value.srcObject = stream;
          // 播放
          videoDom.value.play();
        })
        .catch((err) => {
          console.log(err);
        });
  } else {
    window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
  }
};

// 拍照
const takePhoto = () => {
  // 如果已经拍照了就重新启动摄像头
  if (imgurl.value) {
    imgurl.value = null;
    openCamera()
    return;
  }

  // 设置画布大小与摄像大小一致
  canvasDom.value.width = videoDom.value.videoWidth;
  canvasDom.value.height = videoDom.value.videoHeight;
  // 执行画的操作
  canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0);
  // 将结果转换为可展示的格式
  imgurl.value = canvasDom.value.toDataURL("image/webp");
  // 关闭摄像头
  stop();
}


// 关闭摄像头
const stop = () => {
  let stream = videoDom.value.srcObject;
  if (!stream) return;
  let tracks = stream.getTracks();
  tracks.forEach((x) => {
    x.stop();
  });

};

// 打开摄像头
onMounted(() => {
  openCamera();
});
</script>

<style scoped>
.main {
  width: 800px;
  height: 500px;
  margin: auto auto;
}

.camera_video {
  width: 100%;
  height: 100%;
  border: 2px black solid;
}
</style>