前言

uniapp nvue使用live-pusher组件以及腾讯云实现直播推流，使用video组件实现直播拉流观看，不使用第三方原生sdk，完整示例已兼容ios和安卓

效果预览

一、推流使用live-pusher组件

<live-pusher :beauty="beauty" :style="{width: width + 'px',height:height + 'px'}" id="livePusher" :url="url" mode="FHD"></live-pusher>

二、拉流使用video组件

<video id="myVideo" v-if="mark===1" @error="error" :src="url" style="width: 750rpx;" :style="{height : height + 'px'}" :autoplay="true" :controls="false"></video>

三、前端推流核心代码

this.context = uni.createLivePusherContext('livePusher', this);
var secretdate = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //这是需要在腾讯云获取直播的密钥
let date = Date.parse(new Date()) / 1000 + 21600;
//这是需要在腾讯云配置推流的地址，这里采用的是flv的视频格式
this.url = 'rtmp://xxxxxx.livepush.myqcloud.com/live/' + this.live_id + '?txSecret=' + md5(secretdate + this.live_id + date.toString(16).toUpperCase()) + '&txTime=' + date.toString(16).toUpperCase();

四、推流完整示例（包含美颜/相机切换/结束直播反馈效果）

<template><div><view><view class="arrow-boxs"><image class="user-img" src="../../static/images/logo.png"></image><view class="jieshao"><text class="id">账号：{{accountNum}} </text></view></view><view @click="showClose=true" class="arrow-box"><image class="tui-img" src="../../static/images/tuichu.png"></image></view><live-pusher :beauty="beauty" :style="{width: width + 'px',height:height + 'px'}" id="livePusher" :url="url" mode="FHD"></live-pusher><!-- 这是功能按钮 --><view :style="{width: width + 'px'}" class="but"><!-- <view class="commodyti-box" :style="{width: width*0.3333 + 'px'}"><view @click="openMark(0)" class="meiyanbut" ><image class="but-img" src="../../static/img/zhiboshop2.png" style="height: 40rpx;"></image></view></view> --><view class="commodyti-box" :style="{width: width*0.3333 + 'px'}"><view @click="openmeiyan" class="meiyanbut"><image class="but-img" v-if="beauty==0" src="../../static/images/meiyan.png"></image><image class="but-img" v-else src="../../static/images/selecr-my.png"></image></view></view><view class="commodyti-box" :style="{width: width*0.3333 + 'px'}"><view @click="switchCamera" class="meiyanbut"><image class="but-img" v-if="!Camera" src="../../static/images/qiehuan.png"></image><image class="but-img" v-else src="../../static/images/select-chang.png"></image></view></view></view><view class="model" v-if="showClose"><view class="model-pup" @click="showClose=false"></view><view class="model-body"><view class="model-cont"><text>您确定要结束当前直播吗？</text></view><view class="model-bot"><view class="model-btn" @click="showClose=false"><text>取消</text></view><view class="model-btn1" @click="navback()"><text style="color: white;">确定</text></view></view></view></view></view></div>
</template><script>import md5 from '@/js_sdk/md5.js';var app = getApp();var liveApi = require('../../utils/live.js');export default {data() {return {type: "",scrollTop: 0,Camera: true,width: '',height: '',accountNum: '',scrollTops: 0,url: '',live_id: '', //这是推流id，用于生成推流地址，拉流能用到context: null,markact: true,arr: [],livegood: [],beauty: 9, //美颜等级showClose: false,toback: false};},onLoad(option) {let res = uni.getSystemInfoSync()this.width = res.windowWidth;this.height = res.windowHeight;let userInfo = uni.getStorageSync('userInfo');this.accountNum = userInfo.nickName;this.live_id = option.liveBroadcastRecordId;},onReady() {uni.showLoading({title: '准备中'})this.context = uni.createLivePusherContext('livePusher', this);let that = this;setTimeout(() => {that.startLive(1);uni.hideLoading();}, 1500)},onUnload: function() {},onHide: function() {},onShow() {this.context = uni.createLivePusherContext('livePusher', this);var secretdate = 'xxxxxxxxxxxxxxxxxxxx'; //这是需要在腾讯云获取直播的密钥let date = Date.parse(new Date()) / 1000 + 21600;//这是需要在腾讯云配置推流的地址，这里采用的是flv的视频格式this.url = 'rtmp://xxxxxxx.livepush.myqcloud.com/live/' + this.live_id + '?txSecret=' + md5(secretdate + this.live_id + date.toString(16).toUpperCase()) + '&txTime=' + date.toString(16).toUpperCase();setTimeout(() => {this.startLive(0);}, 1000)app._post(liveApi.startLiveBroadcast, {liveBroadcastRecordId: this.live_id,appUserId: app.globalData.userInfo.appUserId},function(e) {console.log(e);})},onBackPress(e) {if (this.toback) {return false;}// 这里可以自定义返回逻辑，比如下面跳转其他页面this.showClose = true;// return true 表示禁止默认返回return true},methods: {navback() {var that = this;app._post(liveApi.endLiveBroadcast, {liveBroadcastRecordId: this.live_id,appUserId: app.globalData.userInfo.appUserId},function(e) {console.log(e);that.toback = true;uni.navigateBack()})},zengMark(type) {this.$refs.popupr.close();this.type = type;this.$refs.popupr.open()},openmeiyan() {// this.$refs.popup.open()if (this.beauty == 0) {this.beauty = 9} else {this.beauty = 0}},startLive(type) {let self = this;this.context.start({success: a => {// console.log("livePusher.start:" + JSON.stringify(a));self.markact = false;},fail: a => {}});},stopLive() {this.context.stop({success: a => {}});},switchCamera() {this.context.switchCamera({success: (a) => {this.Camera = !this.Camera;console.log("livePusher.switchCamera:" + JSON.stringify(a));}});}}}
</script><style>.shop-list-list {position: relative;margin-top: 25rpx;padding-top: 10rpx;padding-bottom: 10rpx;align-items: flex-start;flex-direction: row;border-bottom-width: 1rpx;border-style: solid;border-color: #F7F7F7;}.shop-list-but-box {position: absolute;bottom: 26px;right: 10px;align-items: center;justify-content: flex-end;flex-direction: row;}.shop-list-but {color: white;border-radius: 20px;font-size: 13px;background-color: rgba(255, 65, 0, 1);padding: 10rpx 20rpx;margin-right: 10px;}.shop-list-img {margin-right: 20rpx;margin-left: 20rpx;width: 150rpx;height: 150rpx;}.shop-list-title {font-size: 16px;margin-bottom: 10rpx;color: rgba(51, 51, 51, 1);/* color: #333333; */}.shop-list-price {font-size: 16px;color: #FF4100;line-height: 30px;}.scroll-Ys {background-color: #ffffff;height: 650rpx;width: 100%;}.scroll-Yss {background-color: #ffffff;height: 800rpx;width: 100%;}.shop-list-box {position: relative;background-color: white;width: 100%;height: 380px;border-radius: 10rpx;}.mark-title {height: 80rpx;font-size: 20px;align-items: flex-start;justify-content: center;}.mark-tui {/* position:relative; */height: 20rpx;font-size: 20px;line-height: 100rpx;right: 0;border-bottom-width: 1rpx;border-style: solid;border-color: #F7F7F7;}.fanhui {width: 30rpx;height: 30rpx;margin-top: 40rpx;text-align: center;margin-right: 25rpx;}.zengjia {width: 40rpx;height: 40rpx;margin-left: 30rpx;margin-top: 34rpx;margin-bottom: 10px;}.add-shop {font-size: 16px;color: #333333;left: 20rpx;z-index: 10;margin-left: 5px;}.meiyanbut {height: 80rpx;width: 80rpx;flex-direction: row;align-items: center;justify-content: center;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);text-align: center;}.but-img {width: 38rpx;height: 34rpx;}.id {font-size: 14px;color: white;}.text-box {font-size: 12px;color: white;}.mark-text {color: white;font-size: 20px;}.mark {position: fixed;top: 0px;background-color: #9FA3A7;align-items: center;justify-content: center;flex-direction: column;}.but {position: fixed;bottom: 0px;flex-direction: row;align-items: center;justify-content: center;height: 160rpx;}.commodyti-box {align-items: center;justify-content: center;}.tui {width: 200px;height: 200px;}.arrow-box {position: fixed;top: 80rpx;right: 30rpx;z-index: 10;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);height: 80rpx;width: 80rpx;align-items: center;justify-content: center;}.tui-img {width: 36rpx;height: 36rpx;}.arrow-boxs {padding: 1%;align-items: center;flex-direction: row;position: fixed;padding-right: 20rpx;top: 80rpx;left: 30rpx;z-index: 10;border-radius: 30px;background-color: rgba(0, 0, 0, 0.2);/* background-color: #FFFFFF; */}.user-img {margin-right: 5px;width: 35px;height: 35px;border-radius: 50%;}.jieshao {flex-direction: column;}.jiesu {padding: 10px 20px 10px 20px;color: white;font-size: 16px;}.arrow {width: 15px;height: 15px;}.model {position: fixed;top: 0;left: 0;bottom: 0;right: 0;flex-direction: column;align-items: center;justify-content: center;z-index: 10;}.model-pup {background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 100;}.model-body {width: 550rpx;padding: 30rpx;background-color: white;border-radius: 20rpx;}.model-cont {font-size: 35rpx;color: #333333;}.model-bot {flex-direction: row;align-items: center;justify-content: space-between;margin-top: 30rpx;}.model-btn {width: 200rpx;height: 80rpx;flex-direction: row;align-items: center;justify-content: center;background-color: #F8F8F8;border-width: 1rpx;border-color: #E6E6E6;border-style: solid;border-radius: 40rpx;}.model-btn1 {width: 200rpx;height: 80rpx;flex-direction: row;align-items: center;justify-content: center;background-color: #0462E8;border-width: 1rpx;border-color: #E6E6E6;border-style: solid;border-radius: 40rpx;}
</style>

五. 拉流完整示例（包含回放暂停/播放/预告效果）

<template><view><view class="head-pop"><view class="arrow-boxs"><image class="user-img" :src="headImg"></image><view class="jieshao"><text class="id">{{policeName}} </text></view></view><view @click="toShare()" class="share-box"><image class="share-img" src="../../static/images/toshare.png"></image></view></view><view @click="navback()" class="arrow-box"><image class="tui-img" src="../../static/images/tuichu.png"></image></view><text v-if="mark===2" class="text" :style="{width : width + 'px'}">直播即将开始</text><text v-if="mark===3" class="text" :style="{width : width + 'px'}">直播已结束</text><view style="height: 200rpx;margin: 40rpx;" v-if="mark!==1"><view class="btn" @click="navback()"><text style="color: white;">返回</text></view></view><video id="myVideo" v-if="mark===1" @error="error" :src="url" style="width: 750rpx;" :style="{height : height + 'px'}":autoplay="true" :controls="false"></video><view class="ym-popup" @click="toPause" v-if="showPop"><view class="ym-popup-bg" v-if="playVideo"><image src="../../static/images/play.png" style="width: 120rpx;height: 120rpx;" mode=""></image></view></view></view>
</template>
<script>var app = getApp();var liveApi = require('../../utils/live.js');export default {data() {return {height: '',width: '',mark: 1,bottom: 10,liveBroadcastRecordId: 0,url: '',policeName: '用户昵称',headImg: '../../static/images/logo.png',showPop: false,playVideo: false,}},onLoad(option) {let params = JSON.parse(decodeURIComponent(option.params));console.log(params);this.policeName = params.policeName;this.headImg = params.headImg;this.liveBroadcastRecordId = params.liveBroadcastRecordId;if (params.type === 1) {this.mark = 1;//这是需要在腾讯云配置拉流的地址，加上this.url = 'http://xxxx.xxx.xxx/live/' + params.liveBroadcastRecordId + '.flv';console.log(this.url);//进入观看回调app._post(liveApi.watchLiveBroadcast, {liveBroadcastRecordId: params.liveBroadcastRecordId,appUserId: app.globalData.userInfo.appUserId},function(e) {console.log(e);})} else if (params.type === 2) {this.mark = 2;} else {this.showPop = true;if (params.livePlaybackUrl) {this.mark = 1;this.url = params.livePlaybackUrl;} else {this.mark = 3;}}let res = uni.getSystemInfoSync()this.height = res.windowHeight;this.width = res.windowWidth;},methods: {error(e) {if (e) {this.mark = 3;}},navback() {uni.navigateBack();},toPause() {this.videoContext = uni.createVideoContext('myVideo');if (this.playVideo) {this.videoContext.play();this.playVideo = false;} else {this.videoContext.pause();this.playVideo = true;}},toShare(){console.log('share')}}}
</script><style>.mark {align-items: center;justify-content: center;flex-direction: column;background-color: #FFFFFF;}.mark-text {padding-right: 75px;font-size: 20px;color: #333333;}.mark-texts {line-height: 20px;line-height: 10px;font-size: 14px;height: 50px;width: 300px;color: white;background-color: #D4237A;}.text {text-align: center;padding-top: 400px;padding-bottom: 50px;}.arrow-box {position: fixed;top: 80rpx;right: 30rpx;z-index: 10;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);height: 80rpx;width: 80rpx;align-items: center;justify-content: center;}.tui-img {width: 36rpx;height: 36rpx;}.head-pop{padding: 1%;align-items: center;flex-direction: row;position: fixed;padding-right: 20rpx;top: 80rpx;left: 30rpx;z-index: 10;border-radius: 30px;}.arrow-boxs {align-items: center;flex-direction: row;border-radius: 30px;background-color: rgba(0, 0, 0, .2);padding-right: 20rpx;}.user-img {margin-right: 5px;width: 35px;height: 35px;border-radius: 50%;}.jieshao {flex-direction: column;}.id {font-size: 14px;color: white;}.btn {/* display: flex; */flex-direction: row;align-items: center;justify-content: center;width: 650rpx;height: 100rpx;background-color: #0462E8;border-radius: 50rpx;}.ym-popup {position: absolute;left: 0;right: 0;bottom: 0;top: 0;}.ym-popup-bg {position: absolute;left: 0;right: 0;bottom: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);flex-direction: row;align-items: center;justify-content: center;}.share-box {margin-left: 30rpx;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);height: 80rpx;width: 80rpx;align-items: center;justify-content: center;}.share-img {width: 40rpx;height: 40rpx;}
</style>

uniapp nvue使用live-pusher组件以及腾讯云实现直播推拉流相关推荐

腾讯云Web直播组件助力“直播+”场景
导语:直播作为营销和转化的有力工具,已经逐渐被大众所认可,直播场景常态化.规范化.细分之下,直播也分为众多的的赛道,企业直播.电商带货.知识传播纷纷拥抱直播渠道.开箱即用.稳定流畅.支持定制成为了企业 ...
功能升级丨腾讯云Web直播互动组件火热上线！
没有华丽的直播间,没有忙前忙后递产品的助理,在家找个角落,打开手机就开始直播:有的一边直播一边带娃,有的拿着手机摇摇晃晃还保持不了手机的稳定,一切都与大家熟悉的网红主播不太一样,让网友们直呼太接地气. ...
小程序map组件一——使用腾讯地图个性化地图组件、腾讯云可视化大屏展示
记录一下过去两个月里我对"地图"的深入理解和玩法,这两个月被打磨的只要看到"地图"两个字都起鸡皮了
uniapp小程序腾讯云视频调用实现1V1会话和踩坑分享
第一步:下载官方demo,附地址:https://github.com/undefineders/WXMiniByUniapp-TRTC,然后导入本地HbuilderX中,运行到小程序,如果运行成功进 ...
【多人会议功能】uniapp - 微信小程序 - 腾讯云
目的:uniapp微信小程序通过腾讯云实现多人会议功能. 效果展示: 功能实现: 前提条件: 注册腾讯云账号,并完成实名认证. 推拉流标签不支持个人小程序,要求申请的企业类微信小程序. 步骤一:开 ...
场景化组件开源，融云持续回馈开源生态
Talk is cheap. Show me the code.关注[融云全球互联网通信云]了解更多这句话相信大家都不陌生,甚至是不少开发者的信条.这是 Linus Torvalds 最为人称道的金 ...
android手机上传不了图片,【报Bug】nvue页面使用web-view组件，安卓手机无法调用页面的input标签上传图片...
详细问题描述 nvue页面,使用web-view原生组件,导致web-view加载的网页页面不能触发input标签进行图片上传,导致这样的原因大致百度了一下是因为安卓5.0及以上使用input typ ...
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
uniapp 自制头部左侧胶囊组件
uniapp 自制头部左侧胶囊组件 // 组件页面 <template><view class="navigation-bar" :style="{he ...

uniapp nvue使用live-pusher组件以及腾讯云实现直播推拉流

目录

前言

效果预览

一、推流使用live-pusher组件

二、拉流使用video组件

三、前端推流核心代码

四、推流完整示例（包含美颜/相机切换/结束直播反馈效果）

五. 拉流完整示例（包含回放暂停/播放/预告效果）

uniapp nvue使用live-pusher组件以及腾讯云实现直播推拉流相关推荐

最新文章

热门文章