44 lines
1.3 KiB
HTML
44 lines
1.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>h264-live-player web client demo</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p id='frame_buffer'></p>
|
||
|
|
<br/>
|
||
|
|
<canvas id='cam' style="width:300px; height:200px;">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- provide WSAvcPlayer -->
|
||
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ws-avc-player@2.0.2/lib/WSAvcPlayer.min.js">;</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var canvas = document.getElementById('cam')
|
||
|
|
var fb = document.getElementById('frame_buffer')
|
||
|
|
|
||
|
|
// Create h264 player
|
||
|
|
var wsavc = new WSAvcPlayer(canvas, "webgl", 1, 35);
|
||
|
|
//expose instance for button callbacks
|
||
|
|
window.wsavc = wsavc;
|
||
|
|
|
||
|
|
var uri = "wss://camera.multitrackvts.com:1082/play2";
|
||
|
|
console.log('uri', uri);
|
||
|
|
|
||
|
|
var result = wsavc.connect(uri);
|
||
|
|
|
||
|
|
wsavc.on('disconnected',()=>console.log('WS Disconnected'))
|
||
|
|
wsavc.on('connected',()=>console.log('WS connected'))
|
||
|
|
wsavc.on('frame_shift',(fbl)=>{
|
||
|
|
fb.innerText = 'fl: '+fbl
|
||
|
|
})
|
||
|
|
|
||
|
|
wsavc.on('initalized',(payload)=>{
|
||
|
|
console.log('Initialized', payload)
|
||
|
|
})
|
||
|
|
|
||
|
|
wsavc.on('stream_active',active=>console.log('Stream is ',active?'active':'offline'))
|
||
|
|
|
||
|
|
wsavc.on('custom_event_from_server',event=>console.log('got event from server', event))
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|