142 lines
4.1 KiB
Vue
142 lines
4.1 KiB
Vue
<template>
|
|
<div class="trtc-pusher-container">
|
|
<live-pusher
|
|
class="trtc-pusher"
|
|
:url="pusher.url"
|
|
mode="HD"
|
|
:autopush="pusher.autopush"
|
|
:enable-camera="pusher.enableCamera"
|
|
:enable-mic="pusher.enableMic"
|
|
:muted="pusher.muted"
|
|
:enable-agc="pusher.enableAgc"
|
|
:enable-ans="pusher.enableAns"
|
|
:enable-ear-monitor="pusher.enableEarMonitor"
|
|
:auto-focus="pusher.enableAutoFocus"
|
|
: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"
|
|
:background-mute="pusher.enableBackgroundMute"
|
|
:audio-quality="pusher.audioQuality"
|
|
:audio-volume-type="pusher.audioVolumeType"
|
|
:audio-reverb-type="pusher.audioReverbType"
|
|
:waiting-image="pusher.waitingImage"
|
|
:beauty-style="pusher.beautyStyle"
|
|
:fps="pusher.fps"
|
|
:filter="pusher.filter"
|
|
@statechange="handleStateChange"
|
|
@netstatus="handleNetStatus"
|
|
@error="handleError"
|
|
@bgmstart="handleBGMStart"
|
|
@bgmprogress="handleBGMProgress"
|
|
@bgmcomplete="handleBGMComplete"
|
|
@audiovolumenotify="handleAudioVolumeNotify"
|
|
/>
|
|
<live-player class="trtc-player" :sound-mode="soundMode"></live-player>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TRTCCloud from '@tencentcloud/trtc-cloud-wx'
|
|
|
|
const trtcCloud = TRTCCloud.getTRTCShareInstance()
|
|
const trtc = trtcCloud.trtc
|
|
const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
|
|
|
|
export default {
|
|
name: 'TRTCPusher',
|
|
data() {
|
|
return {
|
|
pusher: {},
|
|
soundMode: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
trtcCloud.logger.info('trtc-pusher attached')
|
|
this.bindTRTCCloudEvent()
|
|
InterfaceEventEmitter.emit('pusherDomReady', true)
|
|
},
|
|
beforeUnmount() {
|
|
this.executeCleanup()
|
|
},
|
|
beforeDestroy() {
|
|
this.executeCleanup()
|
|
},
|
|
methods: {
|
|
executeCleanup() {
|
|
trtcCloud.logger.info('trtc-pusher detached')
|
|
InterfaceEventEmitter.emit('pusherDomReady', false)
|
|
this.unbindTRTCCloudEvent()
|
|
trtcCloud.exitRoom()
|
|
},
|
|
pusherAttributesChange(event) {
|
|
const { pusher, callback } = event
|
|
this.pusher = { ...this.pusher, ...pusher }
|
|
callback && this.$nextTick(callback)
|
|
},
|
|
playerAudioRouteChange(event) {
|
|
const { soundMode, callback } = event
|
|
this.soundMode = soundMode
|
|
callback && callback()
|
|
},
|
|
bindTRTCCloudEvent() {
|
|
InterfaceEventEmitter.on('pusherAttributesChange', this.pusherAttributesChange)
|
|
InterfaceEventEmitter.on('playerAudioRouteChange', this.playerAudioRouteChange)
|
|
},
|
|
unbindTRTCCloudEvent() {
|
|
InterfaceEventEmitter.off('pusherAttributesChange', this.pusherAttributesChange)
|
|
InterfaceEventEmitter.off('playerAudioRouteChange', this.playerAudioRouteChange)
|
|
},
|
|
handleStateChange(event) {
|
|
trtc.pusherEventHandler(event)
|
|
},
|
|
handleNetStatus(event) {
|
|
trtc.pusherNetStatusHandler(event)
|
|
},
|
|
handleError(event) {
|
|
trtc.pusherErrorHandler(event)
|
|
},
|
|
handleBGMStart(event) {
|
|
trtc.pusherBGMStartHandler(event)
|
|
},
|
|
handleBGMProgress(event) {
|
|
trtc.pusherBGMProgressHandler(event)
|
|
},
|
|
handleBGMComplete(event) {
|
|
trtc.pusherBGMCompleteHandler(event)
|
|
},
|
|
handleAudioVolumeNotify(event) {
|
|
if (!trtcCloud.isEnterRoom) return
|
|
trtc.pusherAudioVolumeNotify(event)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.trtc-pusher-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.trtc-pusher {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.trtc-player {
|
|
width: 0;
|
|
height: 0;
|
|
display: flex;
|
|
}
|
|
</style>
|
|
|