vue+webrtc(腾讯云) 实现直播功能的实践
更新时间：2021年11月22日 10:40:19 作者：南工gjl
本文主要介绍了vue+webrtc(腾讯云) 实现直播功能的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1.直播效果
1.pc端
2.移动端
2.开直播步骤
2.1引入腾讯web端(快直播)脚本
脚本必须引入在 index.heml的body中
<body style="padding:0;margin:0">
//腾讯快直播脚本
<script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js" charset="utf-8"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
2.2在需要使用直播的界面 添加一个视频容器(开启直播后，显示视频的位置)
在.vue文件中直接使用即可,容器的样式可以自己调,但是id不能丢弃(也可以使用name)
<div id="id_local_video" style="margin:0 auto;width:80%;display:flex;align-items:center;justify-content:center;"></div>
2.3创建直播对象，开启直播
点击开启直播按钮 对应的method中写下方法
注意:推流地址中的协议头rtmp，一定要换成webrtc,而且推流地址中一定不能出现中文，否则即使推流成功也会报错
//创建视频对象 livePusher变量我写在了data中 不再复制了 ，也可以直接在methods中直接声明变量
this.livePusher=new TXLivePusher()
this.livePusher.setRenderView('id_local_video');
// 设置音视频流
this.livePusher.setVideoQuality('720p');
// 设置音频质量
this.livePusher.setAudioQuality('standard');
// 自定义设置帧率
this.livePusher.setProperty('setVideoFPS', 25);
// 开启直播
// 打开摄像头
this.livePusher.startCamera();
// 打开麦克风
this.livePusher.startMicrophone();
//这里我延时了4秒进行推流 推流地址需要从后端接收。
setTimeout(() => { this.livePusher.startPush(推流地址);
}, 4000);
2.4关闭直播
直接在对应的方法中使用即可
注意，关闭直播时，一定要销毁视频容器
// 1.停止推流
this.livePusher.stopPush();
// 2.关闭摄像头
this.livePusher.stopCamera();
// 3.关闭麦克风
this.livePusher.stopMicrophone();
// 4.销毁容器对象
this.livePusher.destroy();
到此这篇关于vue+webrtc(腾讯云) 实现直播功能的实践的文章就介绍到这了,更多相关vue+webrtc腾讯云直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在vue开发中,难免遇到各种表单校验,本文主要介绍了Vue中常用的rules校验规则的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了Vue 引入AMap高德地图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue 弹框产生的滚动穿透问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue 打包优化之externals抽离公共的第三方库详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
端午将至，大家都开始吃粽子了么？本文将用vite2与vue3开发出一个招财猫小游戏，在图案不停滚动的同时选出可以转出不同的素材最终得到粽子奖励，康康你能用多少次才会转出自己喜爱口味的粽子吧2022-05-05
这篇文章主要介绍了vue input框的禁用和可输入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
跨域是指当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求,下面这篇文章主要给大家介绍了关于vue使用vite配置跨域以及环境配置的相关资料,需要的朋友可以参考下2022-07-07
完美解决vue引入BMapGL is not defined的问题
在Vue项目中使用BMapGL时,通过在src下添加bmp.js文件并配置密钥（ak）,可以有效解决地图API的应用问题,本方法是基于个人经验总结,希望能为开发者提供参考和帮助2024-10-10
Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。感兴趣的朋友跟随小编一起看看吧2019-06-06
最新评论