hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: Error handling for media resource based players; many small edits

Browse source
This commit is contained in:
Cat 2016-12-19 16:18:42 +01:00 • committed by Thulinma
parent c626fb2855
commit de3043a8e3
10 changed files with 188 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

192
embed/core.js
View file

@ -3,6 +3,7 @@
/////////////////////////////////////
var mistplayers = {};
var mistplayer_session_id = Math.round(Math.random()*1e12);
function MistPlayer() {};
MistPlayer.prototype.sendEvent = function(type,message,target) {
@ -40,7 +41,7 @@ MistPlayer.prototype.build = function () {
return err;
}
//creates the player element, including custom functions
MistPlayer.prototype.element = function(tag){
MistPlayer.prototype.getElement = function(tag){
var ele = document.createElement(tag);
ele.className = 'mistplayer';
this.element = ele;
@ -155,11 +156,7 @@ MistPlayer.prototype.buildMistControls = function(){
secs = Math.floor(secs - mins * 60);
var str = [];
if (hours) {
var h = '0'+hours;
if (hours < 100) {
h.slice(-2);
}
str.push(h);
str.push(hours);
}
str.push(('0'+mins).slice(-2));
str.push(('0'+secs).slice(-2));
@ -176,8 +173,10 @@ MistPlayer.prototype.buildMistControls = function(){
};
function whileLivePlaying(track) {
var playtime = (new Date()) - options.initTime;
//var playtime = (new Date()) - options.initTime;
var playtime = ele.currentTime*1e3;
timestampValue.nodeValue = formatTime((playtime + track.lastms)/1e3);
setTimeout(function(){
if (!ele.paused) {
@ -577,12 +576,14 @@ MistPlayer.prototype.buildMistControls = function(){
return true;
}
MistPlayer.prototype.askNextCombo = function(){
MistPlayer.prototype.askNextCombo = function(msg){
var me = this;
if (me.errorstate) { return; }
me.errorstate = true;
me.addlog('Showing error window');
var err = document.createElement('div');
var msgnode = document.createTextNode('Player or stream error detected');
var msgnode = document.createTextNode(msg ? msg : 'Player or stream error detected');
err.appendChild(msgnode);
err.className = 'error';
var button = document.createElement('button');
@ -609,22 +610,76 @@ MistPlayer.prototype.askNextCombo = function(){
};
MistPlayer.prototype.cancelAskNextCombo = function(){
if (this.errorstate) {
this.errorstate = false;
this.addlog('Removing error window');
this.element.style.opacity = 1;
var err = this.target.querySelector('.error');
if (err) {
this.target.removeChild(err);
}
this.errorstate = false;
}
};
MistPlayer.prototype.reload = function(){
this.unload();
mistPlay(this.mistplaySettings.streamname,this.mistplaySettings.options);
};
MistPlayer.prototype.nextCombo = function(){
this.unload();
var opts = this.mistplaySettings.options;
opts.startCombo = this.mistplaySettings.startCombo;
mistPlay(this.mistplaySettings.streamname,opts);
};
///send information back to mistserver
///\param msg object containing the information to report
MistPlayer.prototype.report = function(msg) {
///send a http post request
///\param url (string) url to send to
///\param params object containing post parameters
function httpPost(url,params) {
var http = new XMLHttpRequest();
var postdata = [];
for (var i in params) {
postdata.push(i+'='+params[i]);
}
http.open("POST", url, true);
http.send(postdata.join('&'));
}
//add some extra information
msg.userinfo = {
userAgent: navigator.userAgent,
page: location.href,
stream: this.streamname,
session: mistplayer_session_id
};
if ('index' in this) { msg.userinfo.playerindex = this.index; }
if ('playername' in this) { msg.userinfo.player = this.playername; }
if ('options' in this) {
if ('source' in this.options) {
msg.userinfo.source = {
src: this.options.source.url,
type: this.options.source.type
};
}
msg.userinfo.resolution = this.options.width+'x'+this.options.height;
}
try {
httpPost(this.options.host+'/report',{
report: JSON.stringify(msg)
});
}
catch (e) { }
}
MistPlayer.prototype.unload = function(){
if (('pause' in this) && (this.pause)) { this.pause(); }
if ('updateSrc' in this) { this.updateSrc(''); }
//delete this.element;
this.target.innerHTML = '';
};
/////////////////////////////////////////////////
// SELECT AND ADD A VIDEO PLAYER TO THE TARGET //
@ -633,6 +688,7 @@ MistPlayer.prototype.nextCombo = function(){
function mistPlay(streamName,options) {
var protoplay = new MistPlayer();
protoplay.streamname = streamName;
function embedLog(msg) {
protoplay.sendEvent('log',msg,options.target);
}
@ -710,6 +766,10 @@ function mistPlay(streamName,options) {
options.target.innerHTML = '';
options.target.removeAttribute('data-loading');
mistError('Error while loading stream info.');
protoplay.report({
type: 'init',
error: 'Failed to load '+info.src
});
}
info.onload = function(){
options.target.innerHTML = '';
@ -726,6 +786,10 @@ function mistPlay(streamName,options) {
if (!('source' in streaminfo)) {
mistError('Error while loading stream info.');
protoplay.report({
type: 'init',
error: 'No sources'
});
return;
}
@ -775,7 +839,6 @@ function mistPlay(streamName,options) {
embedLog('Checking available players..');
var source = false;
var mistPlayer = false;
function checkPlayer(p_shortname) {
if ((startCombo) && (!startCombo.started.player)) {
@ -864,6 +927,7 @@ function mistPlay(streamName,options) {
}
if (mistPlayer) {
//create the options to send to the player
var playerOpts = {
src: source.url+(('urlappend' in options) && (options.urlappend) ? options.urlappend : '' ),
@ -925,6 +989,7 @@ function mistPlay(streamName,options) {
//save the objects for future reference
var player = new mistplayers[mistPlayer].player();
player.playername = mistPlayer;
player.target = options.target;
if (!('embedded' in streaminfo)) { streaminfo.embedded = []; }
streaminfo.embedded.push({
@ -933,6 +998,7 @@ function mistPlay(streamName,options) {
player: player,
playerOptions: playerOpts
});
player.index = streaminfo.embedded.length-1;
if (player.setTracks(false)) {
//gather track info
@ -1004,13 +1070,21 @@ function mistPlay(streamName,options) {
catch (e) {
//show the next player/reload buttons if there is an error in the player build code
options.target.appendChild(player.element);
player.askNextCombo();
player.askNextCombo('Error while building player');
throw e;
player.report({
type: 'init',
error: 'Error while building player'
});
return;
}
options.target.appendChild(element);
element.setAttribute('data-player',mistPlayer);
element.setAttribute('data-mime',source.type);
player.report({
type: 'init',
info: 'Player built'
});
if (player.setTracks(false)) {
player.onready(function(){
@ -1019,24 +1093,48 @@ function mistPlay(streamName,options) {
}
//monitor for errors
player.checkStalledTimeout = false;
player.checkProgressTimeout = false;
element.checkStalledTimeout = false;
element.checkProgressTimeout = false;
element.addEventListener('error',function(e){
player.askNextCombo();
},true);
player.askNextCombo('The player has thrown an error');
var r = {
type: 'playback',
error: 'The player has thrown an error',
origin: e.target.outerHTML.slice(0,e.target.outerHTML.indexOf('>')+1),
};
if ('readyState' in player.element) {
r.readyState = player.element.readyState;
}
if ('networkState' in player.element) {
r.networkState = player.element.networkState;
}
if (('error' in player.element) && ('code' in player.element.error)) {
r.code = player.element.error.code;
}
player.report(r);
});
var stalled = function(e){
if (player.checkStalledTimeout) { return; }
player.checkStalledTimeout = setTimeout(function(){
if (element.checkStalledTimeout) { return; }
element.checkStalledTimeout = setTimeout(function(){
if (player.paused) { return; }
player.askNextCombo();
},5e3);
player.askNextCombo('Playback has stalled');
player.report({
'type': 'playback',
'warn': 'Playback was stalled for > 10 sec'
});
},10e3);
};
element.addEventListener('stalled',stalled,true);
element.addEventListener('waiting',stalled,true);
var progress = function(e){
if (player.checkStalledTimeout) {
clearTimeout(player.checkStalledTimeout);
player.checkStalledTimeout = false;
if (element.checkStalledTimeout) {
clearTimeout(element.checkStalledTimeout);
element.checkStalledTimeout = false;
player.cancelAskNextCombo();
}
if (element.checkStalledTimeout) {
clearTimeout(element.checkStalledTimeout);
element.checkStalledTimeout = false;
player.cancelAskNextCombo();
}
};
@ -1044,29 +1142,53 @@ function mistPlay(streamName,options) {
element.addEventListener('playing',progress,true);
element.addEventListener('play',function(){
player.paused = false;
if ((!player.checkProgressTimeout) && (player.element) && ('currentTime' in player.element)) {
if ((!element.checkProgressTimeout) && (player.element) && ('currentTime' in player.element)) {
//check if the progress made is equal to the time spent
var lasttime = player.element.currentTime;
player.checkProgressTimeout = setInterval(function(){
element.checkProgressTimeout = setInterval(function(){
var newtime = player.element.currentTime;
if (newtime == 0) { return; }
var progress = newtime - lasttime;
lasttime = newtime;
if (progress == 0) {
player.addlog('There should be playback but nothing was played');
player.askNextCombo();
var msg = 'There should be playback but nothing was played';
var r = {
type: 'playback',
warning: msg
};
player.addlog(msg);
if ('readyState' in player.element) {
r.readyState = player.element.readyState;
}
if ('networkState' in player.element) {
r.networkState = player.element.networkState;
}
if (('error' in player.element) && (player.element.error) && ('code' in player.element.error)) {
r.code = player.element.error.code;
}
player.report(r);
player.askNextCombo('No playback');
if ('load' in player.element) { player.element.load(); }
return;
}
if (progress < 4.9) {
player.addlog('It seems playback is \lagging ('+Math.round(100 - progress/0.5)/10+'%)');
player.cancelAskNextCombo();
if (progress < 5) {
var msg = 'It seems playback is lagging (progressed '+Math.round(progress*100)/100+'/10s)'
player.addlog(msg);
player.report({
'type': 'playback',
'warning': msg
});
return;
}
},5e3);
},10e3);
}
},true);
element.addEventListener('pause',function(){
player.paused = true;
if (player.checkProgressTimeout) {
clearInterval(player.checkStalledTimeout);
player.checkStalledTimeout = false;
if (element.checkProgressTimeout) {
clearInterval(element.checkProgressTimeout);
element.checkProgressTimeout = false;
}
},true);
@ -1096,6 +1218,10 @@ function mistPlay(streamName,options) {
else {
var str = 'Stream not found.';
}
protoplay.report({
type: 'init',
error: str
});
mistError(str);
}
}

4
embed/mist.css
View file

@ -107,6 +107,7 @@
.mistplayer .controls .button {
cursor: pointer;
width: 45px;
margin: 5px;
line-height: 45px;
font-size: 16px;
position: relative;
@ -115,6 +116,7 @@
}
.mistplayer .controls.smaller .button {
width: 15px;
margin: 0;
line-height: 15px;
font-size: 8px;
}
@ -299,7 +301,7 @@
background-color: black;
padding: 5px 10px;
right: -1000px;
bottom: 27px;
bottom: 23px;
}
.mistplayer .controls.smaller .tracks .settings {
padding: 2px 3px;

11
embed/test.html
View file

@ -16,6 +16,7 @@
// global options can be set here
var mistoptions = {
host: 'http://cat.mistserver.org:8080'
//host: 'http://thulmk3:8080'
//host: 'https://cat.mistserver.org:4433'
//host: 'http://localhost:8080'
};
@ -65,18 +66,19 @@
div.appendChild(msg);
div.style.color = 'red';
logele.appendChild(div);
},true);
});
document.addEventListener('log',function(e){
console.log('[log] '+e.message)
console.log('[log] '+e.message);
return;
var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message);
var div = document.createElement('div');
div.appendChild(msg);
logele.appendChild(div);
},true);
});
//tryplayers = Object.keys(mistplayers);
tryplayers = [];
tryplayers.push('derp');
tryplayers.push('automatic');
//tryplayers.push('html5');
//tryplayers.push('dashjs');
//tryplayers.push('videojs');
@ -84,6 +86,7 @@
//tryplayers.push('silverlight');
streams = [];
streams.push('live');
//streams.push('golive+ThePaddedRoom');
//streams.push('subtel');
//streams.push('ogg');
//streams.push('vids+mist.mp4');

2
embed/wrappers/dashjs.js
View file

@ -18,7 +18,7 @@ p.prototype.build = function (options,callback) {
cont.className = 'mistplayer';
var me = this;
var ele = this.element('video');
var ele = this.getElement('video');
ele.className = '';
cont.appendChild(ele);
ele.width = options.width;

2
embed/wrappers/flash_strobe.js
View file

@ -36,7 +36,7 @@ p.prototype.build = function (options) {
}
var ele = this.element('object');
var ele = this.getElement('object');
ele.setAttribute('width',options.width);
ele.setAttribute('height',options.height);

10
embed/wrappers/html5.js
View file

@ -39,7 +39,7 @@ p.prototype.build = function (options) {
var shortmime = options.source.type.split('/');
shortmime.shift();
var ele = this.element((shortmime[0] == 'audio' ? 'audio' : 'video'));
var ele = this.getElement((shortmime[0] == 'audio' ? 'audio' : 'video'));
ele.className = '';
cont.appendChild(ele);
ele.crossOrigin = 'anonymous'; //required for subtitles
@ -98,9 +98,15 @@ p.prototype.build = function (options) {
if (options.live) {
ele.addEventListener('error',function(e){
if ((ele.error) && (ele.error.code == 3)) {
e.stopPropagation();
ele.load();
me.cancelAskNextCombo();
e.message = 'Handled decoding error';
me.addlog('Decoding error: reloading..');
me.report({
type: 'playback',
warning: 'A decoding error was encountered, but handled'
});
}
},true);
}
@ -150,7 +156,7 @@ p.prototype.build = function (options) {
}
me.adderror(msg);
},true);
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting'];
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
for (var i in events) {
ele.addEventListener(events[i],function(e){
me.addlog('Player event fired: '+e.type);

2
embed/wrappers/jwplayer.js
View file

@ -17,7 +17,7 @@ mistplayers.jwplayer = {
var p = mistplayers.jwplayer.player;
p.prototype = new MistPlayer();
p.prototype.build = function (options) {
var ele = this.element('div');
var ele = this.getElement('div');
this.jw = jwplayer(ele).setup({
file: options.src,

2
embed/wrappers/silverlight.js
View file

@ -32,7 +32,7 @@ p.prototype.build = function (options) {
return p;
}
var ele = this.element('object');
var ele = this.getElement('object');
ele.setAttribute('data','data:application/x-silverlight,');
ele.setAttribute('type','application/x-silverlight');
ele.setAttribute('width',options.width);

2
embed/wrappers/theoplayer.js
View file

@ -17,7 +17,7 @@ mistplayers.theoplayer = {
var p = mistplayers.theoplayer.player;
p.prototype = new MistPlayer();
p.prototype.build = function (options) {
var ele = this.element('video');
var ele = this.getElement('video');
ele.src = options.src;
ele.width = options.width;

8
embed/wrappers/videojs.js
View file

@ -28,7 +28,7 @@ p.prototype.build = function (options) {
this.addlog('Building VideoJS player..');
var ele = this.element('video');
var ele = this.getElement('video');
cont.appendChild(ele);
ele.className = '';
ele.crossOrigin = 'anonymous'; //required for subtitles
@ -119,7 +119,7 @@ p.prototype.build = function (options) {
}
me.adderror(msg);
},true);
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting'];
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
for (var i in events) {
ele.addEventListener(events[i],function(e){
me.addlog('Player event fired: '+e.type);
@ -155,6 +155,10 @@ if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.m
};
}
p.prototype.updateSrc = function(src){
if (src == '') {
this.videojs.dispose();
return;
}
this.videojs.src({
src: src,
type: this.source.type