Embed: Added flv.js to meta player

CMakeLists.txt

@@ -387,10 +387,12 @@ add_executable(MistOutHTTP
   generated/videojs.js.h
   generated/webrtc.js.h
   generated/mews.js.h
+  generated/flv.js.h
   generated/player_dash.js.h
   generated/player_dash_lic.js.h
   generated/player_video.js.h
   generated/player_webrtc.js.h
+  generated/player_flv.js.h
   generated/skin_default.css.h
   generated/skin_dev.css.h
   generated/skin_videojs.css.h
@@ -483,6 +485,10 @@ add_custom_command(OUTPUT generated/mews.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/min/wrappers/mews.js mews_js generated/mews.js.h
   DEPENDS sourcery ${SOURCE_DIR}/embed/min/wrappers/mews.js
 )
+add_custom_command(OUTPUT generated/flv.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/min/wrappers/flv.js flv_js generated/flv.js.h
+  DEPENDS sourcery ${SOURCE_DIR}/embed/min/wrappers/flv.js
+)
 # players
 add_custom_command(OUTPUT generated/player_dash_lic.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/players/dash.js.license.js player_dash_lic_js generated/player_dash_lic.js.h
@@ -500,6 +506,10 @@ add_custom_command(OUTPUT generated/player_webrtc.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/players/webrtc.js player_webrtc_js generated/player_webrtc.js.h
   DEPENDS sourcery ${SOURCE_DIR}/embed/players/webrtc.js
 )
+add_custom_command(OUTPUT generated/player_flv.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/players/flv.min.js player_flv_js generated/player_flv.js.h
+  DEPENDS sourcery ${SOURCE_DIR}/embed/players/flv.js
+)
 # css
 add_custom_command(OUTPUT generated/skin_default.css.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/min/skins/default.css skin_default_css generated/skin_default.css.h

embed/min/wrappers/flv.js

@@ -0,0 +1 @@
+mistplayers.flv={name:"HTML5 FLV Player",mimes:["flash/7"],priority:MistUtil.object.keys(mistplayers).length+1,isMimeSupported:function(e){return MistUtil.array.indexOf(this.mimes,e)==-1?false:true},isBrowserSupported:function(e,t,r){if(location.protocol!=MistUtil.http.url.split(t.url).protocol){if(location.protocol=="file:"&&MistUtil.http.url.split(t.url).protocol=="http:"){r.log("This page was loaded over file://, the player might not behave as intended.")}else{r.log("HTTP/HTTPS mismatch for this source");return false}}if(!window.MediaSource){return false}try{function o(e){return window.MediaSource.isTypeSupported('video/mp4;codecs="'+e+'"')}function a(e){function t(t){return("0"+e.init.charCodeAt(t).toString(16)).slice(-2)}switch(e.codec){case"AAC":return"mp4a.40.2";case"MP3":return"mp3";case"AC3":return"ec-3";case"H264":return"avc1."+t(1)+t(2)+t(3);case"HEVC":return"hev1."+t(1)+t(6)+t(7)+t(8)+t(9)+t(10)+t(11)+t(12);default:return e.codec.toLowerCase()}}var i={};for(var l in r.info.meta.tracks){if(r.info.meta.tracks[l].type!="meta"){i[a(r.info.meta.tracks[l])]=r.info.meta.tracks[l].type}}t.supportedCodecs=[];for(var l in i){var n=o(l);if(n){t.supportedCodecs.push(i[l])}}if(!r.options.forceType&&!r.options.forcePlayer){if(t.supportedCodecs.length<t.simul_tracks){r.log("Not enough playable tracks for this source");return false}}return t.supportedCodecs.length>0}catch(e){}return false},player:function(){this.onreadylist=[]},scriptsrc:function(e){return e+"/flv.js"}};var p=mistplayers.flv.player;p.prototype=new MistPlayer;p.prototype.build=function(e,t){this.onFLVLoad=function(){if(e.destroyed){return}e.log("Building flv.js player..");var r=document.createElement("video");r.setAttribute("playsinline","");var o=["autoplay","loop","poster"];for(var a in o){var i=o[a];if(e.options[i]){r.setAttribute(i,e.options[i]===true?"":e.options[i])}}if(e.options.muted){r.muted=true}if(e.options.controls=="stock"){r.setAttribute("controls","")}if(e.info.type=="live"){r.loop=false}flvjs.LoggingControl.applyConfig({enableVerbose:false});flvjs.LoggingControl.addLogListener(function(t,r){e.log("[flvjs] "+r)});var l={type:"flv",url:e.source.url,hasAudio:false,hasVideo:false};for(var a in e.source.supportedCodecs){l["has"+e.source.supportedCodecs[a].charAt(0).toUpperCase()+e.source.supportedCodecs[a].slice(1)]=true}e.player.create=function(t){t=MistUtil.object.extend({},t);e.player.flvPlayer=flvjs.createPlayer(t,{lazyLoad:false});e.player.flvPlayer.attachMediaElement(r);e.player.flvPlayer.load();e.player.flvPlayer.play();if(!e.options.autoplay){r.pause()}};e.player.create(l);e.player.api={};function n(t){Object.defineProperty(e.player.api,t,{get:function(){return r[t]},set:function(e){return r[t]=e}})}var s=["volume","buffered","muted","loop","paused",,"error","textTracks","webkitDroppedFrameCount","webkitDecodedFrameCount"];if(e.info.type!="live"){s.push("duration")}else{Object.defineProperty(e.player.api,"duration",{get:function(){if(!r.buffered.length){return 0}return r.buffered.end(r.buffered.length-1)}})}for(var a in s){n(s[a])}function p(t){if(t in r){e.player.api[t]=function(){return r[t].call(r,arguments)}}}var s=["load","getVideoPlaybackQuality","play","pause"];for(var a in s){p(s[a])}e.player.api.setSource=function(t){if(t!=l.url&&t!=""){e.player.flvPlayer.unload();e.player.flvPlayer.detachMediaElement();e.player.flvPlayer.destroy();l.url=t;e.player.create(l)}};e.player.api.unload=function(){e.player.flvPlayer.unload();e.player.flvPlayer.detachMediaElement();e.player.flvPlayer.destroy()};e.player.setSize=function(e){r.style.width=e.width+"px";r.style.height=e.height+"px"};Object.defineProperty(e.player.api,"currentTime",{get:function(){return r.currentTime},set:function(t){var o=.5;for(var a=0;a<r.buffered.length;a++){if(t>=r.buffered.start(a)&&t<=r.buffered.end(a)-o){return r.currentTime=t}}e.log("Seek attempted outside of buffer, but MistServer does not support seeking in progressive flash. Setting to closest available instead");return r.currentTime=r.buffered.length?r.buffered.end(r.buffered.length-1)-o:0}});t(r)};if("flvjs"in window){this.onFLVLoad()}else{var r=MistUtil.scripts.insert(e.urlappend(mistplayers.flv.scriptsrc(e.options.host)),{onerror:function(t){var r="Failed to load flv.js";if(t.message){r+=": "+t.message}e.showError(r)},onload:e.player.onFLVLoad},e)}};

embed/minimize_internal.sh

@@ -44,6 +44,8 @@ echo "    Minimizing wrappers.."
 #fi
   echo "      Minimizing mews";
   terser -mn -o min/wrappers/mews.js -- wrappers/mews.js
+  echo "      Minimizing flv.js";
+  terser -mn -o min/wrappers/flv.js -- wrappers/flv.js
 echo "    Done.";
 
 echo "  Minimizing CSS..";

embed/player.js

@@ -811,7 +811,7 @@ function MistVideo(streamName,options) {
                 //restore video position
                 if (MistVideo.info.type != "live") {
                   var f = function(){
-                    this.currentTime = time;
+                    MistVideo.player.api.currentTime = time;
                     this.removeEventListener("loadedmetadata",f);
                   };
                   MistUtil.event.addListener(MistVideo.video,"loadedmetadata",f);

embed/skins.js

@@ -341,7 +341,7 @@ MistSkins["default"] = {
       if (MistVideo.options.autoplay) {
         //because Mist doesn't send data instantly (but real time), it can take a little while before canplaythrough is fired. Rather than wait, we can just start playing at the canplay event
         MistUtil.event.addListener(MistVideo.video,"canplay",function(){
-          if (MistVideo.player.api.paused) {
+          if (MistVideo.player.api && MistVideo.player.api.paused) {
             var promise = MistVideo.player.api.play();
             if (promise) {
               promise.catch(function(e){

embed/skins/default.css

@@ -114,7 +114,6 @@ svg.icon.timeout {
 }
 .mistvideo:not([data-hide-submenu]) .mistvideo-hoverWindow:hover >svg.icon.settings .fill,
 .mistvideo[data-show-submenu] svg.icon.settings .fill,
-
 .mistvideo[data-fullscreen] svg.icon.fullscreen .fill {
   fill: $accent;
 }

embed/wrappers/dashjs.js

@@ -187,7 +187,6 @@ p.prototype.build = function (MistVideo,callback) {
     this.onDashLoad();
   }
   else {
-    
     var scripttag = MistUtil.scripts.insert(MistVideo.urlappend(mistplayers.dashjs.scriptsrc(MistVideo.options.host)),{
       onerror: function(e){
         var msg = "Failed to load dashjs.js";

embed/wrappers/flv.js

@@ -0,0 +1,248 @@
+mistplayers.flv = {
+  name: "HTML5 FLV Player",
+  mimes: ["flash/7"],
+  priority: MistUtil.object.keys(mistplayers).length + 1,
+  isMimeSupported: function (mimetype) {
+    return (MistUtil.array.indexOf(this.mimes,mimetype) == -1 ? false : true);
+  },
+  isBrowserSupported: function (mimetype,source,MistVideo) {
+    
+    //check for http/https mismatch
+    if (location.protocol != MistUtil.http.url.split(source.url).protocol) {
+      if ((location.protocol == "file:") && (MistUtil.http.url.split(source.url).protocol == "http:")) {
+        MistVideo.log("This page was loaded over file://, the player might not behave as intended.");
+      }
+      else {
+        MistVideo.log("HTTP/HTTPS mismatch for this source");
+        return false;
+      }
+    }
+    
+    if (!window.MediaSource) { return false; }
+    
+    try {
+      function test(mime) {
+        return window.MediaSource.isTypeSupported("video/mp4;codecs=\""+mime+"\"");
+      }
+      function translateCodec(track) {
+        
+        function bin2hex(index) {
+          return ("0"+track.init.charCodeAt(index).toString(16)).slice(-2);
+        }
+        
+        switch (track.codec) {
+          case "AAC":
+            return "mp4a.40.2";
+          case "MP3":
+            return "mp3";
+            //return "mp4a.40.34";
+          case "AC3":
+            return "ec-3";
+          case "H264":
+            return "avc1."+bin2hex(1)+bin2hex(2)+bin2hex(3);
+          case "HEVC":
+            return "hev1."+bin2hex(1)+bin2hex(6)+bin2hex(7)+bin2hex(8)+bin2hex(9)+bin2hex(10)+bin2hex(11)+bin2hex(12);
+          default:
+            return track.codec.toLowerCase();
+        }
+        
+      }
+      var codecs = {};
+      for (var i in MistVideo.info.meta.tracks) {
+        if (MistVideo.info.meta.tracks[i].type != "meta") {
+          codecs[translateCodec(MistVideo.info.meta.tracks[i])] = MistVideo.info.meta.tracks[i].type;
+        }
+      }
+      source.supportedCodecs = [];
+      for (var i in codecs) {
+        //i is the long name (like mp4a.40.2), codecs[i] is the type (audio/video)
+        var s = test(i);
+        if (s) {
+          source.supportedCodecs.push(codecs[i]);
+        }
+      }
+      if ((!MistVideo.options.forceType) && (!MistVideo.options.forcePlayer)) { //unless we force mews, skip this player if not both video and audio are supported
+        if (source.supportedCodecs.length < source.simul_tracks) {
+          MistVideo.log("Not enough playable tracks for this source");
+          return false;
+        }
+      }
+      return source.supportedCodecs.length > 0;
+    } catch(e){}
+    
+    return false;
+  },
+  player: function(){
+    this.onreadylist = [];
+  },
+  scriptsrc: function(host) { return host+"/flv.js"; }
+};
+var p = mistplayers.flv.player;
+p.prototype = new MistPlayer();
+p.prototype.build = function (MistVideo,callback) {
+  
+  this.onFLVLoad = function() {
+    if (MistVideo.destroyed) { return; }
+    
+    MistVideo.log("Building flv.js player..");
+  
+    var video = document.createElement("video");
+    
+    video.setAttribute("playsinline",""); //iphones. effin' iphones.
+    
+    
+    //apply options
+    var attrs = ["autoplay","loop","poster"];
+    for (var i in attrs) {
+      var attr = attrs[i];
+      if (MistVideo.options[attr]) {
+        video.setAttribute(attr,(MistVideo.options[attr] === true ? "" : MistVideo.options[attr]));
+      }
+    }
+    if (MistVideo.options.muted) {
+      video.muted = true; //don't use attribute because of Chrome bug: https://stackoverflow.com/questions/14111917/html5-video-muted-but-stilly-playing?rq=1
+    }
+    if (MistVideo.options.controls == "stock") {
+      video.setAttribute("controls","");
+    }
+    if (MistVideo.info.type == "live") {
+      video.loop = false;
+    }
+    
+    //send logging through our system
+    flvjs.LoggingControl.applyConfig({
+      enableVerbose: false
+    });
+    flvjs.LoggingControl.addLogListener(function(loglevel,message){
+      MistVideo.log("[flvjs] "+message);
+    });
+    
+    var opts = {
+      type: "flv",
+      url: MistVideo.source.url,
+      //isLive: true, //not needed apparently
+      hasAudio: false,
+      hasVideo: false
+    };
+    //if for example audio is not supported, send hasAudio = false flag or you get a bunch of errors ^_^
+    for (var i in MistVideo.source.supportedCodecs) {
+      opts["has"+MistVideo.source.supportedCodecs[i].charAt(0).toUpperCase()+MistVideo.source.supportedCodecs[i].slice(1)] = true;
+    }
+    MistVideo.player.create = function(o){
+      o = MistUtil.object.extend({},o); //create a copy to force flv.js to recreate the segments key
+      MistVideo.player.flvPlayer = flvjs.createPlayer(o,{
+        lazyLoad: false //if we let it lazyLoad, once it resumes, it will try to seek and fail miserably :)
+      });
+      MistVideo.player.flvPlayer.attachMediaElement(video);
+      MistVideo.player.flvPlayer.load();
+      MistVideo.player.flvPlayer.play();
+      if (!MistVideo.options.autoplay) {
+        video.pause();
+      }
+    }
+    MistVideo.player.create(opts);
+    
+    MistVideo.player.api = {};
+    
+    //redirect properties
+    //using a function to make sure the "item" is in the correct scope
+    function reroute(item) {
+      Object.defineProperty(MistVideo.player.api,item,{
+        get: function(){ return video[item]; },
+        set: function(value){
+          return video[item] = value;
+        }
+      });
+    }
+    var list = [
+      "volume"
+      ,"buffered"
+      ,"muted"
+      ,"loop"
+      ,"paused",
+      ,"error"
+      ,"textTracks"
+      ,"webkitDroppedFrameCount"
+      ,"webkitDecodedFrameCount"
+    ];
+    if (MistVideo.info.type != "live") {
+      list.push("duration");
+    }
+    else {
+      Object.defineProperty(MistVideo.player.api,"duration",{
+        get: function(){
+          if (!video.buffered.length) { return 0; }
+          return video.buffered.end(video.buffered.length-1);
+        },
+      });
+    }
+    for (var i in list) {
+      reroute(list[i]);
+    }
+    
+    //redirect methods
+    function redirect(item) {
+      if (item in video) {
+        MistVideo.player.api[item] = function(){
+          return video[item].call(video,arguments);
+        };
+      }
+    }
+    var list = ["load","getVideoPlaybackQuality","play","pause"];
+    for (var i in list) {
+      redirect(list[i]);
+    }
+    MistVideo.player.api.setSource = function(url){
+      if ((url != opts.url) && (url != "")) {
+        MistVideo.player.flvPlayer.unload();
+        MistVideo.player.flvPlayer.detachMediaElement();
+        MistVideo.player.flvPlayer.destroy();
+        opts.url = url;
+        MistVideo.player.create(opts);
+      }
+    };
+    MistVideo.player.api.unload = function(){
+      MistVideo.player.flvPlayer.unload();
+      MistVideo.player.flvPlayer.detachMediaElement();
+      MistVideo.player.flvPlayer.destroy();
+    }
+    MistVideo.player.setSize = function(size){
+      video.style.width = size.width+"px";
+      video.style.height = size.height+"px";
+    };
+    
+    //override seeking
+    Object.defineProperty(MistVideo.player.api,"currentTime",{
+      get: function(){ return video.currentTime; },
+      set: function(value){
+        var keepaway = 0.5; //don't go closer to buffer end than this value [seconds]
+        
+        //check if this time is in the buffer
+        for (var i = 0; i < video.buffered.length; i++) {
+          if ((value >= video.buffered.start(i)) && (value <= video.buffered.end(i)-keepaway)) {
+            //the desired seek time is in the buffer, go to it
+            return video.currentTime = value;
+          }
+        }
+        MistVideo.log("Seek attempted outside of buffer, but MistServer does not support seeking in progressive flash. Setting to closest available instead");
+        return video.currentTime = (video.buffered.length ? video.buffered.end(video.buffered.length-1)-keepaway : 0);
+      }
+    });
+    
+    callback(video);
+  }
+  
+  if ("flvjs" in window) {
+    this.onFLVLoad();
+  }
+  else {
+    var scripttag = MistUtil.scripts.insert(MistVideo.urlappend(mistplayers.flv.scriptsrc(MistVideo.options.host)),{
+      onerror: function(e){
+        var msg = "Failed to load flv.js";
+        if (e.message) { msg += ": "+e.message; }
+        MistVideo.showError(msg);
+      },
+      onload: MistVideo.player.onFLVLoad
+    },MistVideo);
+  }
+}

src/output/output_http_internal.cpp

@@ -121,6 +121,7 @@ namespace Mist {
     capa["url_match"].append("/videojs.js");
     capa["url_match"].append("/dashjs.js");
     capa["url_match"].append("/webrtc.js");
+    capa["url_match"].append("/flv.js");
     capa["url_match"].append("/skins/default.css");
     capa["url_match"].append("/skins/dev.css");
     capa["url_match"].append("/skins/videojs.css");
@@ -137,6 +138,7 @@ namespace Mist {
     capa["optional"]["wrappers"]["allowed"].append("dashjs");
     capa["optional"]["wrappers"]["allowed"].append("webrtc");
     capa["optional"]["wrappers"]["allowed"].append("mews");
+    capa["optional"]["wrappers"]["allowed"].append("flv");
     capa["optional"]["wrappers"]["allowed"].append("flash_strobe");
     capa["optional"]["wrappers"]["option"] = "--wrappers";
     capa["optional"]["wrappers"]["short"] = "w";
@@ -755,6 +757,11 @@ namespace Mist {
           response.append((char*)mews_js, (size_t)mews_js_len);
           used = true;
         }
+        if (it->asStringRef() == "flv"){
+#include "flv.js.h"
+          response.append((char *)flv_js, (size_t)flv_js_len);
+          used = true;
+        }
         if (!used){WARN_MSG("Unknown player type: %s", it->asStringRef().c_str());}
       }
       
@@ -863,6 +870,26 @@ namespace Mist {
       #include "player_webrtc.js.h"
       response.append((char*)player_webrtc_js, (size_t)player_webrtc_js_len);
       
+      H.SetBody(response);
+      H.SendResponse("200", "OK", myConn);
+      H.Clean();
+      return;
+    }
+    if (H.url == "/flv.js"){
+      std::string response;
+      H.Clean();
+      H.SetHeader("Server", "MistServer/" PACKAGE_VERSION);
+      H.setCORSHeaders();
+      H.SetHeader("Content-Type", "application/javascript");
+      if (method == "OPTIONS" || method == "HEAD"){
+        H.SendResponse("200", "OK", myConn);
+        H.Clean();
+        return;
+      }
+      
+      #include "player_flv.js.h"
+      response.append((char *)player_flv_js, (size_t)player_flv_js_len);
+      
       H.SetBody(response);
       H.SendResponse("200", "OK", myConn);
       H.Clean();