新增功能
This commit is contained in:
Your Name
Generated
Vendored
+164
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="trtc-player-container">
|
||||
<live-player
|
||||
v-if="streamId"
|
||||
class="trtc-player"
|
||||
:id="player.streamID"
|
||||
:data-userid="player.userID"
|
||||
:data-streamid="player.streamID"
|
||||
:data-streamtype="player.streamType"
|
||||
:src="player.src"
|
||||
mode="RTC"
|
||||
:autoplay="player.autoplay"
|
||||
:mute-audio="player.muteAudio"
|
||||
:mute-video="player.muteVideo"
|
||||
:orientation="player.orientation"
|
||||
:object-fit="player.objectFit"
|
||||
:background-mute="player.enableBackgroundMute"
|
||||
:min-cache="player.minCache"
|
||||
:max-cache="player.maxCache"
|
||||
:sound-mode="soundMode"
|
||||
:enable-recv-message="player.enableRecvMessage"
|
||||
:auto-pause-if-navigate="player.autoPauseIfNavigate"
|
||||
:auto-pause-if-open-native="player.autoPauseIfOpenNative"
|
||||
:debug="player.debug"
|
||||
@statechange="_playerStateChange"
|
||||
@fullscreenchange="_playerFullscreenChange"
|
||||
@netstatus="_playerNetStatus"
|
||||
@audiovolumenotify="_playerAudioVolumeNotify"
|
||||
/>
|
||||
<div v-if="player.stopVideo" class="trtc-dark-mask"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TRTCCloud, { translateTRTCStreamId } from '@tencentcloud/trtc-cloud-wx'
|
||||
|
||||
const trtcCloud = TRTCCloud.getTRTCShareInstance()
|
||||
const trtc = trtcCloud.trtc
|
||||
const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
|
||||
|
||||
export default {
|
||||
name: 'TRTCPlayer',
|
||||
props: {
|
||||
streamId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: {},
|
||||
TRTCStreamId: '',
|
||||
soundMode: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
streamId(newVal) {
|
||||
this.setTRTCStreamId(newVal)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
trtcCloud.logger.info('trtc-player attached', this.streamId)
|
||||
if (this.streamId) {
|
||||
InterfaceEventEmitter.emit('playerDomReady', { isReady: true, view: this.streamId })
|
||||
}
|
||||
this.TRTCStreamId = this.getTRTCStreamId(this.streamId)
|
||||
this.bindTRTCCloudEvent()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.executeCleanup()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.executeCleanup()
|
||||
},
|
||||
methods: {
|
||||
executeCleanup() {
|
||||
trtcCloud.logger.info('trtc-player detached', this.streamId)
|
||||
InterfaceEventEmitter.emit('playerDomReady', { isReady: false, streamId: this.streamId })
|
||||
this.unbindTRTCCloudEvent()
|
||||
},
|
||||
setTRTCStreamId(id) {
|
||||
trtcCloud.logger.info('trtc-player setTRTCStreamId', id)
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this.$emit('update:streamId', id)
|
||||
this.TRTCStreamId = this.getTRTCStreamId(id)
|
||||
this.$nextTick(() => {
|
||||
trtcCloud.logger.info('trtc-player setTRTCStreamId success', id)
|
||||
resolve()
|
||||
InterfaceEventEmitter.emit('playerDomReady', { isReady: true, view: id })
|
||||
})
|
||||
} catch (err) {
|
||||
trtcCloud.logger.info('trtc-player setTRTCStreamId fail', id, err)
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 其他方法保持原有逻辑...
|
||||
getTRTCStreamId(streamId) {
|
||||
const tempArray = streamId.split('_')
|
||||
const userId = tempArray.slice(0, -1).join('_')
|
||||
const streamType = Number(tempArray[tempArray.length - 1])
|
||||
return translateTRTCStreamId(userId, streamType)
|
||||
},
|
||||
bindTRTCCloudEvent() {
|
||||
InterfaceEventEmitter.on('playerAttributesChange', this.playerAttributesChange)
|
||||
InterfaceEventEmitter.on('playerAudioRouteChange', this.playerAudioRouteChange)
|
||||
},
|
||||
unbindTRTCCloudEvent() {
|
||||
InterfaceEventEmitter.off('playerAttributesChange', this.playerAttributesChange)
|
||||
InterfaceEventEmitter.off('playerAudioRouteChange', this.playerAudioRouteChange)
|
||||
},
|
||||
playerAttributesChange(event) {
|
||||
const { view, playerAttributes, callback } = event
|
||||
if (view === this.streamId) {
|
||||
this.player = { ...this.player, ...playerAttributes }
|
||||
callback && callback()
|
||||
}
|
||||
},
|
||||
playerAudioRouteChange(event) {
|
||||
const { soundMode, callback } = event
|
||||
this.soundMode = soundMode
|
||||
callback && callback()
|
||||
},
|
||||
_playerStateChange(event) {
|
||||
trtc.playerEventHandler(event)
|
||||
},
|
||||
_playerFullscreenChange(event) {
|
||||
trtc.playerFullscreenChange(event)
|
||||
},
|
||||
_playerNetStatus(event) {
|
||||
trtc.playerNetStatus(event)
|
||||
},
|
||||
_playerAudioVolumeNotify(event) {
|
||||
try {
|
||||
event.currentTarget.dataset.streamid = this.player.streamID
|
||||
trtc.playerAudioVolumeNotify(event)
|
||||
} catch (err) {
|
||||
trtcCloud.logger.warn(err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trtc-player-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.trtc-player {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.trtc-dark-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Generated
Vendored
+142
@@ -0,0 +1,142 @@
|
||||
<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>
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import TRTCCloud from '@tencentcloud/trtc-cloud-wx'
|
||||
import TRTCPusher from './components/TRTCPusher.vue'
|
||||
import TRTCPlayer from './components/TRTCPlayer.vue'
|
||||
|
||||
// 导出TRTCCloud所有功能
|
||||
export * from '@tencentcloud/trtc-cloud-wx'
|
||||
|
||||
// 导出Vue组件
|
||||
export { TRTCPusher, TRTCPlayer }
|
||||
|
||||
// 默认导出TRTCCloud实例
|
||||
export default TRTCCloud
|
||||
|
||||
// 添加自动安装功能
|
||||
const install = (app) => {
|
||||
app.component('TRTCPusher', TRTCPusher)
|
||||
app.component('TRTCPlayer', TRTCPlayer)
|
||||
}
|
||||
|
||||
export { install }
|
||||
Reference in New Issue
Block a user