html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
类别:Web前端 浏览量:193
时间:2021-10-24 10:05:51 html5 webrtc技术详解
Html5 webRTC简单实现视频调用的示例代码最近在做一个直播功能,查阅了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弹出输入框下拉菜单(HTML5输入框下拉菜单功能的示例代码)
- html5图片做背景代码(Html5之webcoekt播放JPEG图片流)
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- html5app开发用什么平台(Html5与App的通讯方式详解)
- html5应用的几个建议
- webgl api 源码(基于 HTML5 WebGL 实现的医疗物流系统)
- HTMl5 sessionStorage和localStorage
- html5清除浮动的方法(HTML5实现移动端点击翻牌功能)
- HTML5<q> 与 <blockquote> 的区别
- html5课程入门(萌新的HTML5 入门指南)
- html5实现上传图片预览
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5做app流程(Html5嵌入钉钉的实现示例)
- html5开发的app(浅谈Html5页面打开app的一些思考)
- 谷雨前,吃牛羊肉别忘了吃河鲜,除湿还清热,加紫苏一炒特解馋(吃牛羊肉别忘了吃河鲜)
- 紫苏牛肉锅里滚一滚,香的鼻子都要掉了(紫苏牛肉锅里滚一滚)
- 每天都吃水果的好处(每天吃水果的好处与功效)
- 苹果15价格(苹果15价格512g官网)
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
热门推荐
- tomcat启动慢什么原因(Tomcat服务器响应过慢解决方案)
- 怎么用docker部署springboot项目(Spring Boot使用Docker分层打包的设置方法)
- 云服务器安全么(云服务器如何识别真假)
- linux更改inode(详解Linux索引节点inode)
- python学生管理系统设计代码(python学生管理系统开发)
- mysqlbinlog怎么分析(MySQL中使用binlog时格式该如何选择)
- sqlserver 比较日期(解析SQL Server中SQL日期转换出错的原因)
- nginx-rtmp-module 配置(Nginx搭建rtmp直播服务器实现代码)
- php协议使用教程学习(php中的钩子理解及应用实例分析)
- mysql生成唯一订单号(MySQL高并发生成唯一订单号的方法实现)