2024-02-15 22:07:50 +01:00
< ? 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播放器， </ 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 " ;
2024-02-15 22:07:54 +01:00
import { ignoreCustomElementPlugin , filterKeywordPlugin , h5PlayerComponent } from " ./assets/js/vue.helper.js "
2024-02-15 22:07:50 +01:00
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 );
2024-02-15 22:07:54 +01:00
app . use ( filterKeywordPlugin );
2024-02-15 22:07:50 +01:00
app . mount ( '#app' );
</ script >
</ body >
</ html >
