131 lines
6.6 KiB
PHP
131 lines
6.6 KiB
PHP
|
<?php include ("./link/session.php") ?>
|
|||
|
|
<!doctype html>
|
|||
|
|
<html lang="uft-8">
|
|||
|
|
<head>
|
|||
|
|
<?php include ("./public/head.inc") ?>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<?php include ("./public/menu.inc") ?>
|
|||
|
|
<div data-simplebar>
|
|||
|
|
<main class="page-content player" id="app" v-cloak>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-10">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body" >
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="d-flex align-items-center gap-3 px-2 py-1">
|
|||
|
|
<div class="flex-grow-0">
|
|||
|
|
<label class="fw-bold">
|
|||
|
|
<cn>频道</cn>
|
|||
|
|
<en>Channel</en>:
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-grow-0">
|
|||
|
|
<select class="form-select" v-model="activeChnId" @change="onChangePlayerChn">
|
|||
|
|
<option v-for="(item,index) in handleActivePlayerConf" :value="item.id" :data-attr-codec="item.encv.codec" :data-attr-suffix="item.stream.suffix" :data-attr-audio="item.enca.codec !== 'close'">{{item.name}}</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-grow-0" v-if="playerCodec === 'h265'">
|
|||
|
|
<label class="fw-bold">
|
|||
|
|
<cn>缓冲</cn>
|
|||
|
|
<en>Buffer</en>:
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-grow-0" v-if="playerCodec === 'h265'">
|
|||
|
|
<div class="input-group">
|
|||
|
|
<input type="text" class="form-control" v-model="bufferTime" @change="onChangeBufferTime">
|
|||
|
|
<span class="input-group-text">ms</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-12 mt-2 mb-2">
|
|||
|
|
<h5-player :url="playerUrl" :codec="playerCodec" :audio="playerAudio" :buffer="bufferTime"></h5-player>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row mt-2">
|
|||
|
|
<div class="col-lg-12 tips">
|
|||
|
|
<cn>1、使用h5播放器，需要在输出设置页面开启对应视频通道的rtmp输出协议</cn>
|
|||
|
|
<en>1. To use H5 player, enable the RTMP protocol for the corresponding video channel</en>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-12 tips">
|
|||
|
|
<cn>2、播放h265编码的视频流对电脑配置要求较高,如果遇到音视频卡顿问题,请更换性能更好的电脑播放</cn>
|
|||
|
|
<en>2. Playing H265 encoded video stream has high requirements for computer configuration. If you encounter audio and video delay problem, please replace the device with better performance</en>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
<?php include ("./public/foot.inc") ?>
|
|||
|
|
<script type="module">
|
|||
|
|
import { useDefaultConf } from "./assets/js/vue.hooks.js";
|
|||
|
|
import { ignoreCustomElementPlugin,h5PlayerComponent } from "./assets/js/vue.helper.js"
|
|||
|
|
import vue from "./assets/js/vue.build.js";
|
|||
|
|
|
|||
|
|
const {createApp,ref,reactive,watch,watchEffect,computed,onMounted} = vue;
|
|||
|
|
const app = createApp({
|
|||
|
|
components:{
|
|||
|
|
"h5-player": h5PlayerComponent
|
|||
|
|
},
|
|||
|
|
setup(props,context) {
|
|||
|
|
|
|||
|
|
const { defaultConf } = useDefaultConf();
|
|||
|
|
|
|||
|
|
const state = {
|
|||
|
|
activeChnId : ref(0),
|
|||
|
|
playerUrl: ref(""),
|
|||
|
|
playerCodec: ref(""),
|
|||
|
|
playerAudio: ref(false),
|
|||
|
|
bufferTime:ref(200)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const unwatch = watch(defaultConf,(value)=>{
|
|||
|
|
for(let i=0;i<defaultConf.length;i++) {
|
|||
|
|
let item = defaultConf[i];
|
|||
|
|
if (item.enable && item.stream.rtmp) {
|
|||
|
|
state.activeChnId.value = item.id;
|
|||
|
|
state.playerUrl.value = 'http://'+window.location.host+'/flv?app=live&stream='+item.stream.suffix;
|
|||
|
|
state.playerCodec.value = item.encv.codec;
|
|||
|
|
state.playerAudio.value = item.enca.codec !== "close";
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
unwatch();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const handleActivePlayerConf = computed(()=>{
|
|||
|
|
return defaultConf.filter((item,index)=>{
|
|||
|
|
return !!(item.enable && item.type !=="ndi" && item.stream.rtmp);
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const onChangeBufferTime = () => {
|
|||
|
|
localStorage.setItem("bufferTime",state.bufferTime.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onChangePlayerChn = (event) => {
|
|||
|
|
const selectElement = event.target;
|
|||
|
|
const selectedOption = selectElement.options[selectElement.selectedIndex];
|
|||
|
|
state.playerUrl.value = 'http://'+window.location.host+'/flv?app=live&stream='+selectedOption.getAttribute('data-attr-suffix');
|
|||
|
|
state.playerCodec.value = selectedOption.getAttribute('data-attr-codec');
|
|||
|
|
state.playerAudio.value = selectedOption.getAttribute('data-attr-audio');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(()=>{
|
|||
|
|
let buffer = localStorage.getItem("bufferTime");
|
|||
|
|
if(buffer !== null && buffer !== undefined)
|
|||
|
|
state.bufferTime.value = buffer;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return {...state,handleActivePlayerConf,onChangePlayerChn,onChangeBufferTime}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
app.use(ignoreCustomElementPlugin);
|
|||
|
|
app.mount('#app');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|