IT俱乐部 HTML5 Html5 webRTC简单实现视频调用的示例代码

Html5 webRTC简单实现视频调用的示例代码

发布: 2024年 9月 24日 638阅读

最近在做一个直播功能，查阅了webRTC相关资料，下面是简单实现的栗子哟(基于vue.js)！

子组件

<video id="rtc" data-origwidth="0" data-origheight="0" style="width: 1264px;"></video>
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);
      });
  }
};

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

到此这篇关于Html5 webRTC简单实现视频调用的示例代码的文章就介绍到这了,更多相关Html5 webRTC视频调用内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/html5/13771.html

169赞

标签:html webrtc 示例视频调用