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

1. <template>
   
2.   <video id="rtc"></video>
   
3. </template>
   
4. 
   
5. <script>
   
6. export default {
   
7.   name: "LiveDetails",
   
8.   data() {
   
9.     return {};
   
10.   },
    
11.   mounted() {
    
12.     let video = document.querySelector("#rtc");
    
13.     // 参数表示需要同时获取到音频和视频
    
14.     // 获取到优化后的媒体流
    
15.     // { audio: true, video: true }
    
16.     const constraints = {
    
17.       audio: { echoCancellation: { exact: false } },
    
18.       video: true
    
19.     };
    
20. 
    
21.     navigator.mediaDevices
    
22.       .getUserMedia(constraints)
    
23.       .then(stream => {
    
24.         console.log(stream) //此处打印请看下方
    
25.         video.srcObject = stream;
    
26. 
    
27.         video.onloadedmetadata = e => {
    
28.           video.play();
    
29.         };
    
30.       })
    
31.       .catch(err => {
    
32.         console.log(err);
    
33.       });
    
34.   }
    
35. };
    
36. </script>

复制代码

亲测有效，会有回声，后端可以进行处理
到此这篇关于Html5 webRTC简单实现视频调用的示例代码的文章就介绍到这了,更多相关Html5 webRTC视频调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/746305.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！