目錄

• 前言
• 效果預覽
• 一、推流使用live-pusher組件
• 二、拉流使用video組件
• 三、前端推流核心代碼
• 四、推流完整示例（包含美顏/相機切換/結束直播反饋效果）
• 五. 拉流完整示例（包含回放暫停/播放/預告效果）

---

前言

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组件以及腾讯云实现直播推拉流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。