Html5 w㊑ebRTC简易完成视頻启用的实例编码

日期:2021-03-24 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

近期在做一个直播间作用,查看了webRTC有关材料,下边是简易完成的栗子哟(根据vue.js)!

子部件

<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 webRTC视頻启用內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!