在Html5如何使用webRTC进行简单视频调用?案例代码分享!

2021-08-17 10:14:54 浏览数 (2962)

今天小编来和大家说说有关于:“在Html5如何使用webRTC进行简单视频调用?”这个问题的相关内容和解决方法分享,希望小编分享的内容对大家有所帮助! 

子组件:

<template>
  <video id="rtc"></video>
</template>

<script>
export default {
  name: "LiveDetails",
  data() {
    return {};
  },
  mounted() {
    let video = document.querySelector("#rtc");
    // 参数表示需要同时获取到音频和视频
    // 获取到优化后的媒体流
    // { audio: true, video: true }
    const constraints = {
      audio: { echoCancellation: { exact: false } },
      video: true
    };

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(stream => {
        console.log(stream) //此处打印请看下方
        video.srcObject = stream;

        video.onloadedmetadata = e => {
          video.play();
        };
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

亲测有效,会有回声,后端可以进行处理

在通过简单的自己实践之后在分享给大家相信大家对于:“在Html5如何使用webRTC进行简单视频调用?”这个问题会有更好的了解,更多有关于html5这方面的相关内容我们都可以在W3Cschool中进行学习和了解!