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.
115 lines
3.5 KiB
Cheetah
115 lines
3.5 KiB
Cheetah
{{template "head.tmpl" .}}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0 text-dark">Play mse video</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item active">Play mse video</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.container-fluid -->
|
|
</div>
|
|
<div class="content">
|
|
{{template "player.tmpl" .}}
|
|
|
|
{{template "foot.tmpl" .}}
|
|
</div>
|
|
<script>
|
|
$(document).ready(() => {
|
|
startPlay();
|
|
});
|
|
|
|
let mseQueue = [],
|
|
mseSourceBuffer, mseStreamingStarted = false, videoSound=false;
|
|
|
|
function startPlay() {
|
|
let uuid = $('#uuid').val();
|
|
let channel = $('#channel').val();
|
|
location.protocol == 'https:' ? potocol = 'wss' : potocol = 'ws';
|
|
let url = potocol + '://' + location.host + '/stream/' + uuid + '/channel/' + channel + '/mse?uuid=' + uuid + '&channel=' + channel;
|
|
let mse = new MediaSource();
|
|
$("#videoPlayer")[0].src = window.URL.createObjectURL(mse);
|
|
mse.addEventListener('sourceopen', function() {
|
|
let ws = new WebSocket(url);
|
|
ws.binaryType = "arraybuffer";
|
|
ws.onopen = function(event) {
|
|
console.log('Connect to ws');
|
|
}
|
|
ws.onmessage = function(event) {
|
|
let data = new Uint8Array(event.data);
|
|
if (data[0] == 9) {
|
|
decoded_arr = data.slice(1);
|
|
if (window.TextDecoder) {
|
|
mimeCodec = new TextDecoder("utf-8").decode(decoded_arr);
|
|
} else {
|
|
mimeCodec = Utf8ArrayToStr(decoded_arr);
|
|
}
|
|
if(mimeCodec.indexOf(',')>0){
|
|
videoSound=true;
|
|
}
|
|
mseSourceBuffer = mse.addSourceBuffer('video/mp4; codecs="' + mimeCodec + '"');
|
|
mseSourceBuffer.mode = "segments"
|
|
mseSourceBuffer.addEventListener("updateend", pushPacket);
|
|
|
|
} else {
|
|
readPacket(event.data);
|
|
}
|
|
};
|
|
}, false);
|
|
|
|
}
|
|
|
|
function pushPacket() {
|
|
if (!mseSourceBuffer.updating) {
|
|
if (mseQueue.length > 0) {
|
|
packet = mseQueue.shift();
|
|
mseSourceBuffer.appendBuffer(packet);
|
|
} else {
|
|
mseStreamingStarted = false;
|
|
}
|
|
}
|
|
if ($("#videoPlayer")[0].buffered.length > 0) {
|
|
if (typeof document.hidden !== "undefined" && document.hidden && !videoSound) {
|
|
//no sound, browser paused video without sound in background
|
|
$("#videoPlayer")[0].currentTime = $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1)) - 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
function readPacket(packet) {
|
|
if (!mseStreamingStarted) {
|
|
mseSourceBuffer.appendBuffer(packet);
|
|
mseStreamingStarted = true;
|
|
return;
|
|
}
|
|
mseQueue.push(packet);
|
|
if (!mseSourceBuffer.updating) {
|
|
pushPacket();
|
|
}
|
|
}
|
|
|
|
$("#videoPlayer")[0].addEventListener('loadeddata', () => {
|
|
$("#videoPlayer")[0].play();
|
|
let browser = browserDetector();
|
|
if (!browser.safari) {
|
|
makePic();
|
|
}
|
|
});
|
|
//fix stalled video in safari
|
|
$("#videoPlayer")[0].addEventListener('pause', () => {
|
|
if ($("#videoPlayer")[0].currentTime > $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1))) {
|
|
$("#videoPlayer")[0].currentTime = $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1)) - 0.1;
|
|
$("#videoPlayer")[0].play();
|
|
}
|
|
});
|
|
|
|
$("#videoPlayer")[0].addEventListener('error', () => {
|
|
console.log('video_error')
|
|
});
|
|
</script>
|