You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<view class="player-container">
|
|
<video
|
|
id="livePlayer"
|
|
ref="videoPlayer"
|
|
:src="streamUrl"
|
|
autoplay
|
|
controls
|
|
style="width:100%;height:100%"
|
|
@error="onPlayError"
|
|
@play="onPlay"
|
|
@pause="onPause"
|
|
></video>
|
|
|
|
<view class="control-panel">
|
|
<button @tap="startPlay" :disabled="isPlaying">开始播放</button>
|
|
<button @tap="stopPlay" :disabled="!isPlaying">停止播放</button>
|
|
</view>
|
|
|
|
<view v-if="errorMsg" class="error-message">{{errorMsg}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const DEFAULT_RTMP_URL = 'rtmp://your-zlm-server/live/stream';
|
|
const DEFAULT_WEBRTC_URL = 'webrtc://your-zlm-server/live/stream';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
streamUrl: '',
|
|
isPlaying: false,
|
|
errorMsg: '',
|
|
useWebRTC: false
|
|
}
|
|
},
|
|
methods: {
|
|
async startPlay() {
|
|
try {
|
|
this.errorMsg = '';
|
|
|
|
// 根据协议选择URL
|
|
this.streamUrl = this.useWebRTC ? DEFAULT_WEBRTC_URL : DEFAULT_RTMP_URL;
|
|
|
|
// 如果是WebRTC且需要原生插件支持
|
|
if(this.useWebRTC && uni.requireNativePlugin) {
|
|
const webrtcPlugin = uni.requireNativePlugin('ZLMRTCClient');
|
|
await webrtcPlugin.startPlay({
|
|
url: this.streamUrl,
|
|
viewId: 'livePlayer'
|
|
});
|
|
}
|
|
|
|
this.isPlaying = true;
|
|
} catch (e) {
|
|
this.errorMsg = '播放失败: ' + e.message;
|
|
console.error(e);
|
|
}
|
|
},
|
|
stopPlay() {
|
|
this.streamUrl = '';
|
|
this.isPlaying = false;
|
|
},
|
|
onPlayError(e) {
|
|
this.errorMsg = '播放错误: ' + e.detail.errMsg;
|
|
this.isPlaying = false;
|
|
},
|
|
onPlay() {
|
|
this.isPlaying = true;
|
|
},
|
|
onPause() {
|
|
this.isPlaying = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.player-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.control-panel {
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
</style> |