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中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python入门之基础语法学习笔记
2020/02/08 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
简历中自我评价范文3则
2013/12/14 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
员工考核管理制度
2014/02/02 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
建筑安全责任书范本
2014/07/24 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
团队拓展训练感想
2015/08/07 职场文书
小学美术教学反思
2016/02/17 职场文书