<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)
})
// 可移动窗口的默认位置top:8% right:10%
const windowWidth = uni.getSystemInfoSync().windowWidth
const windowHeight = uni.getSystemInfoSync().windowHeight
// 手机设备宽度 - 小窗口宽度 - 偏移值
const x = windowWidth - 178 / 2 - 18 / 2
const y = windowHeight * 0.1
/**
* 屏幕切换
*/
const switchScreen = () => {
if (callStatus.value !== CallStatus.CONNECTED || props.localClass === 'large-view') return
callStore.call.bigScreenUserId = props.currentLocalScreen ? 'player' : 'localVideo'
}
/**
* 状态变化事件
*/
const pusherStateChangeHandler = (e: any) => {
console.log('状态变化事件:pusher :>> ', e)
}
/**
* 网络状态通知
*/
const pusherNetStatus = (e: any) => {
// console.log('网络状态通知:pusher :>> ', e)
}
/**
* 渲染错误事件
*/
const pusherErrorHandler = (e: any) => {
console.log('渲染错误事件:pusher :>> ', e)
}
/**
* 返回麦克风采集的音量大小
*/
const pusherAudioVolumeNotify = (e: any) => {
// console.log('返回麦克风采集的音量大小:pusher :>> ', e)
}
</script>
<style lang="scss" src="./style/index.scss" scoped></style>
<style lang="scss" scoped>
.movable-area {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
}
</style>
1***@qq.com
- 发布:2024-08-30 14:52
- 更新:2024-08-30 14:52
- 阅读:78
0 个回复