主页 > 知识库 > Html5 webRTC简单实现视频调用的示例代码

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

热门标签:南昌仁和怎么申请开通400电话 平凉地图标注位置怎么弄 如何获取地图标注客户 电话机器人电销系统挣话费 高德地图标注地点纠错 机器人外呼系统存在哪些能力 拓展地图标注 电话机器人黑斑马免费 只办理400电话

最近在做一个直播功能,查阅了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视频调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

标签:枣庄 新疆 池州 漯河 西藏 青岛 永州 辽源

巨人网络通讯声明:本文标题《Html5 webRTC简单实现视频调用的示例代码》,本文关键词  Html5,webRTC,简单,实现,视频,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《Html5 webRTC简单实现视频调用的示例代码》相关的同类信息!
  • 本页收集关于Html5 webRTC简单实现视频调用的示例代码的相关信息资讯供网民参考!
  • 推荐文章