您的位置:首页 > Web前端 > > 正文

html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)

更多 时间:2021-10-24 10:05:51 类别:Web前端 浏览量:193

html5 webrtc技术详解

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 webRTC简单实现视频调用的示例代码的文章就介绍到这了,更多相关Html5 webRTC视频调用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    您可能感兴趣