vue+webrtc(腾讯云) 实现直播功能的实践

2024-10-18 00:20:09

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实现直播功能

最近公司刚好在做直播,那么今天就记录一下遇到的坑,公司服务器用的亚马逊aws,所以直接看官方的api就可以了,aws官方地址aws直播api 先看下具体的实现后的效果图把按照网上成熟的方法,使用的是video.js,然后aws做了一层封装,那么我们直接拿来使用把,这里使用vue版本的vue-video-player 先安装下相关的包 npm install vue-video-player --save 在main.js引入vue-video-player // 第一个是videoJs的样式,
2分钟实现一个Vue实时直播系统的示例代码

前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下. 第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了. 这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成.记住下面生成的地址,下面会用到. 第二步,下载本地推流工具 https://obsproject.com/ 第三步,设置OBS 在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示. 在AppName字
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un
vue实现直播间点赞飘心效果的示例代码

前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @
Vue 莹石摄像头直播视频实例代码

Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q
Vue-cli-webpack搭建斗鱼直播步骤详解

前言想必大家都看过斗鱼直播吧?这次在下使用从github上面摸下来的API,为大家重现一下斗鱼网站的搭建,使用vue-cli-webpack来实现. 声明本文章所用API均从网络获取,本文作者不承担任何法律责任,请阅读本文的小伙伴们用于学习用途,不能用于商业! 如有侵权行为,请与作者联系,作者将于2日内删除. 效果 pc端移动端开始好,扯了这么久的淡,该开始构建项目了项目初始化初始化文件夹打开一个新文件夹,在命令行输入: vue init webpack 如果显示vue not
vue+webrtc(腾讯云) 实现直播功能的实践

目录 1.直播效果 2.开直播步骤 2.1引入腾讯web端(快直播)脚本 2.2在需要使用直播的界面添加一个视频容器(开启直播后,显示视频的位置) 2.3创建直播对象,开启直播 2.4关闭直播 1.直播效果 1.pc端 2.移动端 2.开直播步骤 2.1引入腾讯web端(快直播)脚本脚本必须引入在 index.heml的body中 <body style="padding:0;margin:0"> //腾讯快直播脚本 <script src="https
Vue实现腾讯云点播视频上传功能的实现代码

基于Vue+ElementUI+vod-js-sdk-v6,完成腾讯云点播视频上传功能最近做的一个项目,需要用到腾讯云点播的视频上传!!写一个尽可能详细的博客供各位参考,欢迎指正: ok,下面进入正题. 首先是需要用到的依赖:ElementUI.vod-js-sdk-v6.axios npm i vod-js-sdk-v6 npm i axios import vue from 'vue' import { Upload, Progress } from 'element-ui' vue.us
vue cli使用融云实现聊天功能的实例代码

先看下vue-cli的使用 1:安装node 2:npm i vue-cli -g npm install --global vue-cli 3:vue list 可以查看模板 4:选择一个模板,初始化项目,例如vue init webpack myPro 5:cd myPro 进入项目根目录 6:npm install 安装依赖 7:npm run dev 运行项目正文开始公司有个项目要实现一个聊天功能,需求如下图,略显随意公司最终选择融云这个吊炸天的即时通信,文档详细的一匹
vue中使用腾讯云Im的示例

在vue中使用腾讯云Im 通信时,官方给出的文档及sdk提供的都是es5的写法.我们在vue中使用均需要用es6的方式来改写sdk的js文件及按自己所需要的业务调用对应的api就行了对sdk的js文件改写使用exports方法导出函数.官方原先提供的api不变,只需在外加一层exports方法暴露即可,webim.js里有一处long需要修改(问过腾讯也没给出一个具体的方案),其他不变. 在相应需要的地方引入即可例如:webIm的登录遇到的问题: 曾经使用过低版本的sdk 导致登录成功后
vue结合el-upload实现腾讯云视频上传功能

起因根据需求要实现一个视频上传功能,之前采用七牛云上传,小点视频没问题,大体积视频比如600M左右,再考虑到网速等其他原因就会花费半个小时左右. 后来分析到不仅要考虑上传时间的问题,更重要的是要考虑用户使用4G 网络的情况,考虑用户的流量,线上的视频,不能不做压缩转码,就放到页面上,视频不是图片,不能甩到 cdn 上就行了. 要考虑视频大小,pc 移动端适配,转码,还有防盗版等问题. 最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接官网链接:cloud.tencent.com
VUE接入腾讯验证码功能（滑块验证）备忘

最近在用VUE做个简单的用户系统,登录注册需要验证码,想找个那种拖动的,找geetest居然已经不面向小客户了(或者说只有收费套餐). 腾讯防水墙的验证码免费使用,有2000/小时的免费额度,对于小网站完全足够了,阿里应该也有,我看discuz有插件直接能用,但没找到入口腾讯的在这,和腾讯云无关:https://007.qq.com/captcha/#/ 申请api很简单,QQ登录,创建应用,ID和secretkey就出来了,直接在文档里展示,赞一个. vue有人做了封装了geetest+腾
微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于
java 实现发短信功能---腾讯云短信

前言如今发短信功能已经成为互联网公司的标配,本篇文章将一步步实现java发送短信考察了许多提供短信服务的三方,几乎所有都需要企业认证才可以使用,这对于个人学习非常不方便.多方比较之后,选择了腾讯云(此处并非做广告),原因有两点: 支持微信公众号认证(门槛低)每月赠送100条免费短信(适合个人学习)(这一点请矿家子弟自行忽略) 开发环境请参照: Spring Boot实现模块化的几种方法腾讯云 ---短信找到短信服务开通之后,点击添加应用设置短信签名(以公众号为例),签名类型选择公众
JAVA 对接腾讯云直播的实现

签名授权 public static T TecentDoPostJsonV3(String url,String key,String secretId, TecentPublicParams header, String json, OkHttpClient httpClient, Class clazz) throws Exception { // ************* 步骤 1:拼接规范请求串 ************* String date = DateUtils.format
vue如何在项目中调用腾讯云的滑动验证码

在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目) 导言首先看看官方的步骤教学: https://cloud.tencent.com/document/product/1110/36839 其中,前端涉及到的是"步骤3:客户端接入",里面介绍了两种接入方法:"快速接入"和"定制接入". 项目是原生HTML 或者 jQuery 开发,那么可以使用"快速接入". 项目使用 vue.react 等框架开发,则需要使用&q