web打开摄像头和麦克风

1.h5代码

<template>
  <div>
    <div class="video-container">
      <span>本机</span>
      <video ref="localVideo" autoplay muted playsinline controls></video>
      <el-button type="primary" size="large" @click="openCamera">打开摄像头</el-button>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";

const localVideo = ref(null);

const constraints = {audio: true, video: true}
// 处理摄像头成功的情况
const handleSuccess = (stream)=>{
  localVideo.value.srcObject = stream
}
// 处理摄像头失败的情况
const handleFailed = (err)=>{
  console.log('摄像头打开失败,err:',err)
}
const openCamera = () => {
  navigator.mediaDevices.getUserMedia(constraints)
      .then(handleSuccess)
      .catch(handleFailed)
}
</script>
<style scoped>
.video-container{
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}
</style>