需求背景

當客戶發貨或者收貨時?需要上傳開箱或者封箱視頻，直接選擇相冊視頻上傳速度太慢，現在隨便一個視頻都是幾百M的，流量費很貴，所以就選擇使用?直播推流的方式?實現視頻上傳。

app開發，推薦使用nvue做直播，比使用vue的優勢有：

nvue也可一套代碼編譯多端。

nvue的cover-view比vue的cover-view更強大，在視頻上繪制元素更容易。如果只考慮App端的話，不用cover-view，任意組件都可以覆蓋live-pusher組件，因為nvue沒有層級問題。

若需要視頻內嵌在swiper里上下滑動（類抖音、映客首頁模式），App端只有nvue才能實現 當然nvue相比vue的壞處是css寫法受限，如果只開發微信小程序，不考慮App，那么使用vue頁面也是一樣的。

• 創建 live-pusher 上下文 livePusherContext 對象

onReady() {// 注意：需要在onReady中 或 onLoad 延時this.context = uni.createLivePusherContext('livePusher', this);//獲取手機信息，并設置高度和寬度try {const res = uni.getSystemInfoSync();this.width = res.windowWidth;this.height = res.windowHeight;} catch (e) {throw Error(e)}},

• 獲取請求url寬高自適應全屏?注:安卓手機需要主動啟動攝像頭

onShow() {//開啟預覽uni.getStorage({key: 'livepushurl',success:(res) =>{const { url,id} = res.datathis.livepushurl= urlthis.id = id}});if(systemInfo.platform == 'android'){this.startPreview();}this.startTime()},

• onHide?處理?當用戶切屏出去時?live-pusher會有bug?黑屏等問題，需要進行處理，當前處理3秒以內不保存頁面后退。3秒以上進行保存頁面后臺

onHide() {if(!this.showTime){if (this.count <= 3) {var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.closePusher(this.id);uni.navigateBack({delta: 1,});}else{this.stop()var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.finishPusher(this.id);uni.navigateBack({delta: 1,});}}},

• HTML?代碼塊? nvue?設置class樣式不生效?使用style?行內樣式 (width height)

<view class="content"><live-pusher id="livePusher" ref="livePusher" :style="{width: width + 'px',height:height + 'px'}" :url="livepushurl":mode="mode" :muted="false":enable-camera="true" :auto-focus="true" :beauty="beauty" :whiteness="whiteness" aspect="9:16" enable-mic="true"device-position="back"@statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher><view class="timekeeping" style="width: 200rpx;" :style="{ top: iStatusBarHeight + 'px'}"><text class="timekeeping-time" style="color: #FFFFFF;">{{time}}</text></view><view class="pusher-handle"><view class="pusher-handle-btn" @click="switchCamera"><image style="width: 68rpx;height: 68rpx;" src="../../static/images/live-pusher-switch.png" resize="cover"></image></view><view class="pusher-handle-btn pusher-handle-center" @click="showConfirmModal"><image style="width: 112rpx;height: 112rpx;" src="../../static/images/live-pusher-finish.png" resize="cover"></image></view><view class="pusher-handle-btn" @click="canceLlivePusher"><image style="width: 68rpx;height: 68rpx;" src="../../static/images/live-pusher-close.png" resize="cover"></image></view></view><view class="countdown" v-if="showTime"><text class="countdown-text">{{count}}</text></view></view>

• 完成代碼

let systemInfo = uni.getSystemInfoSync();export default {data() {return {width: '350px',height: '1500px',mode: 'FHD', //流視頻模式，可取值：SD（標清）, HD（高清）, FHD（超清)beauty: 1, //美顏，取值范圍 0-9（iOS取值范圍為1） ，0 表示關閉whiteness: 2, // 美白，取值范圍 0-9（iOS取值范圍為1） ，0 表示關閉context: [],livepushurl: '',url: '',showTime: true,confirmContent: '是否確認上傳當前錄制？',cancleContent: '是否確認退出當前錄制？',showConfirm: false,showCancel: false,id: null,time: '00:00:00',iStatusBarHeight: 32,count: 0,};},onReady() {// 注意：需要在onReady中 或 onLoad 延時this.context = uni.createLivePusherContext('livePusher', this);//獲取手機信息，并設置高度和寬度try {const res = uni.getSystemInfoSync();this.width = res.windowWidth;this.height = res.windowHeight;} catch (e) {throw Error(e)}},onLoad() {},onShow() {//開啟預覽uni.getStorage({key: 'livepushurl',success:(res) =>{const { url,id} = res.datathis.livepushurl= urlthis.id = id}});if(systemInfo.platform == 'android'){this.startPreview();}this.startTime()},onHide() {if(!this.showTime){if (this.count <= 3) {var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.closePusher(this.id);uni.navigateBack({delta: 1,});}else{this.stop()var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.finishPusher(this.id);uni.navigateBack({delta: 1,});}}},methods: {async geturl() {try {const res = await getUrl({order_id: this.order_id,type: this.type})this.url = res.push.rtmpthis.id = res.idthis.startTime()} catch (e) {}},startTime() {const TIME_COUNT = 5;if (!this.timer) {this.count = TIME_COUNT;this.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--;} else {this.showTime = false;clearInterval(this.timer)this.timer = null;this.start()if(systemInfo.platform == 'ios'){this.switchCamera()}this.timekeeping()}}, 1000)}},timekeeping() {// var count = 0;if (!this.timerInter) {this.timerInter = setInterval(() => {var h = parseInt(this.count / 60 / 60);var m = parseInt(this.count / 60) % 60;var s = parseInt(this.count ) % 60;h = h < 10 ? '0' + h : h;m = m < 10 ? '0' + m : m;s = s < 10 ? '0' + s : s;this.time = h + ':' + m + ':' + s ;this.count += 1;}, 1000)}},statechange(e) {console.log('狀態變化事件:' + JSON.stringify(e));},netstatus(e) {console.log('網絡狀態通知事件:' + JSON.stringify(e));},error(e) {console.log('渲染錯誤事件:' + JSON.stringify(e));},start() {this.context.start({success: a => {console.log('開始推流:' + JSON.stringify(a));},error: err => {console.log(err)}});},snapshot() {this.context.snapshot({success: e => {console.log('快照:' + JSON.stringify(e));}});},resume() {this.context.resume({success: a => {console.log('恢復推流:' + JSON.stringify(a));}});},pause() {this.context.pause({success: a => {console.log('暫停推流:' + JSON.stringify(a));}});},stop() {this.context.stop({success: a => {console.log('停止推流:' + JSON.stringify(a));}});},switchCamera() {this.context.switchCamera({success: a => {console.log('切換前后攝像頭:' + JSON.stringify(a));}});},startPreview() {this.context.startPreview({success: a => {console.log('開啟攝像頭預覽:' + JSON.stringify(a));}});},stopPreview() {this.context.stopPreview({success: a => {console.log('關閉攝像頭預覽:' + JSON.stringify(a));}});},showConfirmModal() {if (this.count <= 3) {uni.showToast({title: '上傳視頻不能低于3秒',icon: "none",duration: 2000,});return}uni.showModal({title: '提示',content: '是否確認上傳當前錄制？',success: (res)=> {if (res.confirm) {clearInterval(this.timerInter);uni.showLoading({title: '提交中'})setTimeout(()=>{uni.hideLoading()this.stop()var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.finishPusher(this.id);uni.navigateBack({delta: 1,});},2000)} else if (res.cancel) {console.log('用戶點擊取消');}}});// this.showConfirm = true},canceLlivePusher(){uni.showModal({title: '提示',content: '是否確認退出當前錄制？',success: (res)=> {if (res.confirm) {this.stop()var page = getCurrentPages();var prevPage = page[page.length - 2];prevPage.$vm.closePusher(this.id);uni.navigateBack({delta: 1,});} else if (res.cancel) {console.log('用戶點擊取消');}},})}}};

• 結尾

參數說明、回調方法可參考?文檔

總結

以上是生活随笔為你收集整理的uni app 使用live-pusher录制视频的全部內容，希望文章能夠幫你解決所遇到的問題。

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