first look at the effect

Insert image description here

Video dialogue source code

html

Although it is a Vue project, I wrote it on the index page of the homepage just for testing.

Insert image description here


<!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>

view2

<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>

Audio dialogue source code

<!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>

Solutions to problems encountered

Of course, if you want to test directly on our browser, you still need to know some other knowledge, such as https policy, whether it is connected to a LAN, etc. Regarding https security
group policy, here I have relevant notes
https security group policy configuration

If you have any other questions, I'll add them. I'm in a hurry because I'm off work.

webRTC implements P2P audio and video calls (no server)

Article directory