<template>
<movable-area class="movable-area">
<movable-view direction="all" :inertia="true" :class="localClass" :x="x" :y="y">
<view class="stream-box" @click="switchScreen">
<live-pusher
class="stream"
:url="pusher.rtmp"
:mode="pusher.mode"
:autopush="pusher.autoPush"
:enable-camera="pusher.enableCamera"
:enable-mic="pusher.enableMic"
:muted="!pusher.enableMic"
:enable-agc="pusher.enableAgc"
:enable-ans="pusher.enableAns"
:auto-focus="pusher.autoFocus"
:zoom="pusher.enableZoom"
:min-bitrate="pusher.minBitrate"
:max-bitrate="pusher.maxBitrate"
:video-width="pusher.videoWidth"
:video-height="pusher.videoHeight"
:beauty="pusher.beautyLevel"
:whiteness="pusher.whitenessLevel"
:orientation="pusher.videoOrientation"
:aspect="pusher.videoAspect"
:device-position="pusher.frontCamera"
:remote-mirror="pusher.enableRemoteMirror"
:local-mirror="pusher.localMirror"
:audio-quality="pusher.audioQuality"
:audio-volume-type="pusher.audioVolumeType"
:audio-reverb-type="pusher.audioReverbType"
:beauty-style="pusher.beautyStyle"
:filter="pusher.filter"
@statechange="pusherStateChangeHandler"
@netstatus="pusherNetStatus"
@error="pusherErrorHandler"
@audiovolumenotify="pusherAudioVolumeNotify"
></live-pusher>
</view>
</movable-view>
</movable-area>
</template>
<script lang=“ts” setup>
import { useCall } from ‘@/store’
import { CallStatus } from ‘@/request/apis/call/types’
interface Props {
localClass: string // 本地样式
currentLocalScreen: boolean // 当前是本地还是远端
}
const props = withDefaults(defineProps<Props>(), {
localClass: ‘small-view’,
currentLocalScreen: true
})
const callStore = useCall()
const callStatus = ref(callStore.call.callStatus)
const pusher = ref(callStore.call.pusher)
watchEffect(() => {
callStatus.value = callStore.call.callStatus
pusher.value = callStore.call.pusher
console.log('pusher.value :>> ', pusher.value)
})
…
const switchScreen = () => {
if (callStatus.value !== CallStatus.CONNECTED || props.localClass === ‘large-view’) return
callStore.call.bigScreenUserId = props.currentLocalScreen ? ‘player’ : ‘localVideo’
}
…
uni-app中live-pusher在app端总是黑屏
uni-app中live-pusher在app端总是黑屏
转换后的 Markdown 文档：
<template>
<movable-area class="movable-area">
<movable-view direction="all" :inertia="true" :class="localClass" :x="x" :y="y">
<view class="stream-box" @click="switchScreen">
<live-pusher
class="stream"
:url="pusher.rtmp"
:mode="pusher.mode"
:autopush="pusher.autoPush"
:enable-camera="pusher.enableCamera"
:enable-mic="pusher.enableMic"
:muted="!pusher.enableMic"
:enable-agc="pusher.enableAgc"
:enable-ans="pusher.enableAns"
:auto-focus="pusher.autoFocus"
:zoom="pusher.enableZoom"
:min-bitrate="pusher.minBitrate"
:max-bitrate="pusher.maxBitrate"
:video-width="pusher.videoWidth"
:video-height="pusher.videoHeight"
:beauty="pusher.beautyLevel"
:whiteness="pusher.whitenessLevel"
:orientation="pusher.videoOrientation"
:aspect="pusher.videoAspect"
:device-position="pusher.frontCamera"
:remote-mirror="pusher.enableRemoteMirror"
:local-mirror="pusher.localMirror"
:audio-quality="pusher.audioQuality"
:audio-volume-type="pusher.audioVolumeType"
:audio-reverb-type="pusher.audioReverbType"
:beauty-style="pusher.beautyStyle"
:filter="pusher.filter"
@statechange="pusherStateChangeHandler"
@netstatus="pusherNetStatus"
@error="pusherErrorHandler"
@audiovolumenotify="pusherAudioVolumeNotify"
></live-pusher>
</view>
</movable-view>
</movable-area>
</template>
<script lang=“ts” setup>
import { useCall } from ‘@/store’
import { CallStatus } from ‘@/request/apis/call/types’
interface Props {
localClass: string // 本地样式
currentLocalScreen: boolean // 当前是本地还是远端
}
const props = withDefaults(defineProps<Props>(), {
localClass: ‘small-view’,
currentLocalScreen: true
})
const callStore = useCall()
const callStatus = ref(callStore.call.callStatus)
const pusher = ref(callStore.call.pusher)
watchEffect(() => {
callStatus.value = callStore.call.callStatus
pusher.value = callStore.call.pusher
console.log('pusher.value :>> ', pusher.value)
})
…
const switchScreen = () => {
if (callStatus.value !== CallStatus.CONNECTED || props.localClass === ‘large-view’) return
callStore.call.bigScreenUserId = props.currentLocalScreen ? ‘player’ : ‘localVideo’
}
…
在uni-app中，live-pusher 组件用于实时视频录制和推流，如果在APP端出现黑屏问题，这通常与权限设置、组件配置或设备兼容性有关。以下是一些可能的解决方案，主要通过代码示例展示如何正确配置 live-pusher 组件以及检查相关权限。
1. 确保摄像头和麦克风权限
首先，确保你的APP已经正确申请并获得了摄像头和麦克风的权限。在 manifest.json 中添加必要的权限配置：
"mp-weixin": { // 示例平台为微信小程序，其他平台如app-plus等需相应配置
"requiredPrivateInfos": ["getUserInfo", "chooseImage", "camera"]
},
"app-plus": {
"distribute": {
"android": {
"permissions": [
"android.permission.CAMERA",
"android.permission.RECORD_AUDIO"
]
},
"ios": {
"NSCameraUsageDescription": "APP需要访问您的相机",
"NSMicrophoneUsageDescription": "APP需要访问您的麦克风"
}
}
}
2. live-pusher 组件配置
确保 live-pusher 组件在页面中正确配置，并检查其属性设置。以下是一个基本配置示例：
<template>
<view class="container">
<live-pusher
id="livePusher"
:url="pushUrl"
mode="aspectFill"
autoplay="true"
muted="false"
beauty="0"
whiteness="0"
aspect="9:16"
@statechange="statechange"
></live-pusher>
<button @click="startPush">开始推流</button>
<button @click="stopPush">停止推流</button>
</view>
</template>
<script>
export default {
data() {
return {
pushUrl: 'rtmp://your_rtmp_server/live/streamkey' // 替换为你的RTMP服务器地址和流密钥
};
},
methods: {
startPush() {
this.$refs.livePusher.start({ success: () => console.log('推流开始') });
},
stopPush() {
this.$refs.livePusher.stop({ success: () => console.log('推流停止') });
},
statechange(e) {
console.log('LivePusher状态变化:', e.detail);
}
}
};
</script>
3. 设备兼容性检查
不同设备可能对 live-pusher 的支持有所不同，尤其是在Android设备上。确保测试的设备支持你的RTMP服务器配置，并检查是否有任何已知的兼容性问题。
总结
上述代码和配置旨在帮助解决 live-pusher 在APP端出现黑屏的问题。如果问题依旧存在，建议检查RTMP服务器的日志，确认推流数据是否成功发送，同时确认设备摄像头和麦克风是否工作正常。此外，查阅uni-app官方文档和社区，了解是否有相关的更新或补丁也是解决问题的好方法。
