/pages/push/push_config.vue (直播设置页)
<template>
<view class="wrap" style="min-height: 100vh; padding: 20px;">
<u-navbar title="直播设置">
<view slot="right" style="padding: 7px 7px 7px 12px;" @click="launchPusher">
<u-icon label="开始" size="40" name="play-circle-fill" :color="activeColor"></u-icon>
</view>
</u-navbar>
<u-form :model="form" ref="uForm" label-width="150">
<u-form-item label="推流地址" required>
<u-input v-model="form.push_url" placeholder="地址格式: rtmp://" clearable />
</u-form-item>
<u-form-item label="视频画质" required></u-form-item>
<u-subsection :list="mode_select" :current="getCurrent('mode_select', 'mode')" :active-color="activeColor" @change="modeChange"></u-subsection>
<u-form-item label="视频方向" required></u-form-item>
<u-subsection :list="orientation_select" :current="getCurrent('orientation_select', 'orientation')" :active-color="activeColor"
@change="orientationChange"></u-subsection>
<u-form-item label="摄像方向" required></u-form-item>
<u-subsection :list="devicePosition_select" :current="getCurrent('devicePosition_select', 'devicePosition')"
:active-color="activeColor" @change="devicePositionChange"></u-subsection>
<u-form-item label="支持对焦" required>
<u-switch slot="right" v-model="form.autoFocus" :active-color="activeColor"></u-switch>
</u-form-item>
<u-form-item label="远近焦距" required>
<u-switch slot="right" v-model="form.zoom" :active-color="activeColor"></u-switch>
</u-form-item>
<u-form-item label="美颜级别" required>
<view>{{form.beauty}} 级</view>
</u-form-item>
<u-slider v-model="form.beauty" min="0" max="100" step="10" block-width="50" :active-color="activeColor"></u-slider>
<u-form-item label="美颜级别" required>
<view>{{form.whiteness}} 级</view>
</u-form-item>
<u-slider v-model="form.whiteness" min="0" max="100" step="10" block-width="50" :active-color="activeColor"></u-slider>
</u-form>
</view>
</template>
<script>
export default {
data() {
return {
activeColor: "#2979ff",
mode_select: [{
value: 'SD',
name: '标清'
},
{
value: 'HD',
name: '高清'
},
{
value: 'FHD',
name: '超清'
}
],
orientation_select: [{
value: 'vertical',
name: '垂直方向'
},
{
value: 'horizontal',
name: '水平方向'
}
],
devicePosition_select: [{
value: 'front',
name: '前置摄像'
},
{
value: 'back',
name: '后置摄像'
}
],
witch_select: [{
value: true,
name: '开启'
},
{
value: false,
name: '关闭'
}
],
form: {
push_url: 'rtmp://vpush.qdd88.cn/live/621FD133-889D-1707-CF0E-83A8A715D412?auth_key=1604793600-0-0-a23b8d96c6223cf29f001b461758bd53', // 推流地址
mode: 'FHD', // 视频模式
autoFocus: true, // 自动对焦
zoom: true, // 远近焦距
beauty: 30, // 美颜级别 0-100
whiteness: 30, // 美白级别 0-100
orientation: 'vertical', // 画面方向
devicePosition: 'front' // 摄像方向
}
}
},
computed: {
// 获取当前选项列表下标
getCurrent() {
return (select_name, form_name) => {
let select_object = this[select_name]
let active_value = this['form'][form_name]
if (select_object && active_value) {
for (let i in this[select_name]) {
if (select_object[i]['value'] == active_value) {
return i
}
}
return 0
}
}
}
},
methods: {
modeChange(index) {
let value = this.mode_select[index]['value']
if (value)
this.$set(this.form, 'mode', value)
},
orientationChange(index) {
let value = this.orientation_select[index]['value']
if (value)
this.$set(this.form, 'orientation', value)
},
devicePositionChange(index) {
let value = this.devicePosition_select[index]['value']
if (value)
this.$set(this.form, 'devicePosition', value)
},
launchPusher() {
let query = '?'
let params = this.form
for (let key in params) {
query += `${key}=${params[key]}&`
}
query = query.replace(/&$/, '')
uni.navigateTo({
url: './push_weex' + query
})
}
}
}
</script>
<style>
</style>
/pages/push/push.nvue （推流界面页）
<template>
<view>
<live-pusher id="livePusher" :url="url" :enable-camera="enableCamera" :mode="mode" :device-position="devicePosition"
:orientation="orientation" :muted="muted" :beauty="beauty" :whiteness="whiteness" :remote-mirror="remoteMirror"
:auto-focus="autoFocus" :zoom="zoom" :style="{height: windowHeight}" @statechange="statechange" @netstatus="netstatus"
@error="error"></live-pusher>
</view>
</template>
<script>
export default {
data() {
return {
url: '',
enableCamera: true,
pusher: null,
isPushing: false,
windowHeight: '0px',
orientation: 'vertical',
devicePosition: 'front',
mode: 'FHD',
muted: false,
beauty: 0,
whiteness: 0,
zoom: true,
autoFocus: true,
remoteMirror: true
};
},
onLoad(options) {
this.url = options.push_url
this.orientation = options.orientation
this.devicePosition = options.devicePosition
this.mode = options.mode
this.beauty = options.beauty / 10
this.whiteness = options.whiteness / 10
this.zoom = options.zoom
this.autoFocus = options.autoFocus
},
onReady() {
this.windowHeight = uni.getSystemInfoSync().windowHeight + 'px';
this.pusher = uni.createLivePusherContext('livePusher', this);
this.pusher.startPreview()
uni.$on('onStart', this.onStart)
uni.$on('onSwitchCamera', this.onSwitchCamera)
uni.$on('onMuted', this.onMuted)
},
methods: {
onStart() {
this.isPushing = !this.isPushing
if (this.isPushing) {
this.pusher.start()
} else {
this.pusher.pause()
}
},
onSwitchCamera() {
this.pusher.switchCamera()
},
onMuted() {
this.muted = !this.muted
},
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
},
netstatus(e) {
console.log("netstatus:" + JSON.stringify(e));
},
error(e) {
console.log("error:" + JSON.stringify(e));
}
}
};
</script>
<style>
</style>
2 个回复
j***@singoo.cc
兄弟，找到解决办法了吗
c***@foxmail.com
同问，这个bug早存在了，官方一直不出来正面回答