vue版本2.6.11
ios版本17.5.1
<template>
<view class="content">
<live-pusher
id="livePusher"
ref="livePusher"
:style="{ width: windowHeight, height: windowWidth }"
:url="urls"
:mode="mode"
orientation="vertical"
:muted="false"
:enable-camera="true"
:auto-focus="true"
:beauty="beauty"
:whiteness="whiteness"
@statechange="statechange"
@netstatus="netstatus"
@error="error"
>
</live-pusher>
<cover-view class="utils">
<cover-view class="beauty" @click="goBack">
返回
</cover-view>
<cover-view class="beauty" @click="stop">
停止
</cover-view>
<cover-view class="beauty" @click="start">
开始
</cover-view>
<cover-view class="beauty" @click="switchCamera">
切换
</cover-view>
</cover-view>
<!-- <button class="btn" @click="start">开始推流</button>
<button class="btn" @click="pause">暂停推流</button>
<button class="btn" @click="resume">恢复推流</button>
<button class="btn" @click="stop">停止推流</button>
<button class="btn" @click="snapshot">快照</button>
<button class="btn" @click="startPreview">开启摄像头预览</button>
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
<button class="btn" @click="switchCamera">切换摄像头</button>
<button class="btn" @click="bofang">去播放</button> -->
</view>
</template>
<script>
export default {
data() {
return {
width: '350px',
height: '1500px',
mode: 'HD', //流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清)
beauty: 9, //美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭
whiteness: 9, // 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭
context: [],
windowWidth: '', //屏幕可用宽度
windowHeight: '', //屏幕可用高度
urls: `rtmp://192.168.20.32:1888/rtmplive/4398`
};
},
onReady() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary')
// plus.navigator.setFullscreen(true)
// #endif
// 注意：需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext('livePusher', this);
setTimeout(()=>{
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
}
})
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
},
error:err=>{
console.log("livePusherErr.startPreview:" + err)
}
})
},1500)
},
onLoad() {
this.initCamera()
},
onUnload() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary')
// plus.navigator.setFullscreen(false)
// #endif
},
beforeDestroy() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary')
// plus.navigator.setFullscreen(false)
// #endif
},
onBackPress(e){
console.log("监听返回按钮事件",e);
uni.switchTab({
url:"/pages/index"
})
// 此处一定姚要return为true，否则页面不会返回到指定路径
return true;
},
onShow() {
//开启预览
this.startPreview();
},
methods: {
statechange(e) {
console.log('状态变化事件:' + JSON.stringify(e));
},
//初始化相机
initCamera() {
const _this = this
uni.getSystemInfo({
success: function(res) {
// console.log("res",res)
_this.windowWidth = res.windowWidth;
_this.windowHeight = res.windowHeight;
let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);
_this.aspect = (_this.windowWidth / zcs) + ':' + (_this.windowHeight / zcs);
// console.log('画面比例：' + _this.aspect);
}
});
},
goBack(){
uni.navigateBack()
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary')
// plus.navigator.setFullscreen(false)
// #endif
},
//整除数计算
aliquot(x, y) {
if (x % y == 0) return y;
return this.aliquot(y, x % y);
},
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)
}
});
},
/* close() {
this.context.close({
success: a => {
console.log('livePusher.close:' + JSON.stringify(a));
}
});
}, */
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));
}
});
}
}
};
</script>
<style scoped>
.utils{
position: fixed;
top: 20rpx;
left: 100rpx;
width: 375px;
background-color: #FFFFFF;
text-align: center;
flex-direction: row;
opacity: 0.7;
}
.beauty{
}
</style>