132 lines
6.6 KiB
PHP
132 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,filterKeywordPlugin,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.use(filterKeywordPlugin);
|
||
app.mount('#app');
|
||
</script>
|
||
</body>
|
||
</html>
|