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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 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使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Firefox div高度自适应
2009/04/28 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python绘制彩虹图
2019/12/16 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
物流仓储实习自我鉴定
2013/09/25 职场文书
总经理职责
2013/12/22 职场文书
化学教育专业自荐信
2014/07/04 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server