• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html5 webRTC简单实现视频调用的示例代码

    最近在做一个直播功能,查阅了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之webcoekt播放JPEG图片流
    下一篇:HTML5超文本标记语言的实现方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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