先看效果

在这里插入图片描述

视频对话源码

html

虽然是vue项目，但是我写在了主页的index页面，仅仅为了测试，

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
<video id="local‐video" autoplay playsinline></video>
<button id="showVideo">打开摄像头</button>
<p>通过getUserMedia()获取视频</p>

<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

<script>
    const constraints = {
        audio: false,
        video: true
    };

    // 处理打开摄像头成功
    function handleSuccess(stream) {
        const video = document.querySelector("#local‐video");
        video.srcObject = stream;
    }

    // 异常处理
    function handleError(error) {
        console.error("getUserMedia error: " + error);
    }

    function onOpenCamera(e) {
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
    }

    document.querySelector("#showVideo").addEventListener("click", onOpenCamera);

</script>
</html>

vue2

<script>
export default {
  methods: {
    handleSuccess(stream) {
      this.$refs.localVideo.srcObject = stream;
    },
    handleError(error) {
      console.error("getUserMedia error: " + error);
    },
    onOpenCamera() {
      const constraints = { audio: false, video: true };
      navigator.mediaDevices
          .getUserMedia(constraints)
          .then(this.handleSuccess)
          .catch(this.handleError);
    },
  },
};

</script>

<template>
  <video ref="localVideo" autoplay playsinline></video>
  <button @click="this.onOpenCamera">打开摄像头</button>
  <p>通过getUserMedia()获取视频</p>
</template>

音频对话源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
  <audio id="local‐audio" autoplay controls>播放麦克风捕获的声音</audio>
  <button id="playAudio">打开麦克风</button>
  <p>通过getUserMedia()获取音频</p>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

<script>
    // 约束条件
    const constraints = {
        audio: true,
        video: false
    };
    // 处理打开麦克风成功
    function handleSuccess(stream) {
        const audio = document.querySelector("#local‐audio");
        audio.srcObject = stream;
    }
    // 异常处理
    function handleError(error) {
        console.error("getUserMedia error: " + error);
    }
    function onOpenMicrophone(e) {
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
    }
    document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);
</script>
</html>