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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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和ACCESS写聊天室(二)
2006/10/09 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Django和Flask框架优缺点对比
2019/10/24 Python
基于python实现复制文件并重命名
2020/09/16 Python
python中_del_还原数据的方法
2020/12/09 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
打架检讨书300字
2014/02/02 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
督导岗位职责
2015/02/04 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android