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


Posted in HTML / CSS onSeptember 23, 2020

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

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 #HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 #HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 #HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 #HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 #HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 #HTML / CSS
浅析HTML5 Landmark
Sep 11 #HTML / CSS
You might like
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Django开发中复选框用法示例
2018/03/20 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
网络编辑岗位职责范本
2014/02/10 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript