Embed: added hls.js player

CMakeLists.txt

@@ -617,11 +617,13 @@ add_executable(MistOutHTTP
   generated/webrtc.js.h
   generated/mews.js.h
   generated/flv.js.h
+  generated/hlsjs.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/player_hlsjs.js.h
   generated/skin_default.css.h
   generated/skin_dev.css.h
   generated/skin_videojs.css.h
@@ -729,6 +731,10 @@ 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
 )
+add_custom_command(OUTPUT generated/hlsjs.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/min/wrappers/hlsjs.js hlsjs_js generated/hlsjs.js.h
+  DEPENDS sourcery ${SOURCE_DIR}/embed/min/wrappers/hlsjs.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
@@ -750,6 +756,10 @@ 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.min.js
 )
+add_custom_command(OUTPUT generated/player_hlsjs.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/players/hls.js player_hlsjs_js generated/player_hlsjs.js.h
+  DEPENDS sourcery ${SOURCE_DIR}/embed/players/hls.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/hlsjs.js

@@ -0,0 +1 @@
+mistplayers.hlsjs={name:"HLS.js player",mimes:["html5/application/vnd.apple.mpegurl","html5/application/vnd.apple.mpegurl;version=7"],priority:MistUtil.object.keys(mistplayers).length+1,isMimeSupported:function(e){return this.mimes.indexOf(e)==-1?false:true},isBrowserSupported:function(e,t,s){if(location.protocol!=MistUtil.http.url.split(t.url).protocol){s.log("HTTP/HTTPS mismatch for this source");return false}return true},player:function(){},scriptsrc:function(e){return e+"/hlsjs.js"}};var p=mistplayers.hlsjs.player;p.prototype=new MistPlayer;p.prototype.build=function(e,t){var s=this;var l=document.createElement("video");l.setAttribute("playsinline","");var r=["autoplay","loop","poster"];for(var i in r){var o=r[i];if(e.options[o]){l.setAttribute(o,e.options[o]===true?"":e.options[o])}}if(e.options.muted){l.muted=true}if(e.info.type=="live"){l.loop=false}if(e.options.controls=="stock"){l.setAttribute("controls","")}l.setAttribute("crossorigin","anonymous");this.setSize=function(e){l.style.width=e.width+"px";l.style.height=e.height+"px"};this.api=l;e.player.api.unload=function(){if(e.player.hls){e.player.hls.destroy();e.player.hls=false;e.log("hls.js instance disposed")}};function n(t){e.player.hls=new Hls({maxBufferLength:15,maxMaxBufferLength:60});e.player.hls.attachMedia(l);e.player.hls.on(Hls.Events.MEDIA_ATTACHED,function(){console.log("video and hls.js are now bound together !");e.player.hls.loadSource(t);e.player.hls.on(Hls.Events.MANIFEST_PARSED,function(e,t){console.log("manifest loaded, found "+t.levels.length+" quality level")})})}e.player.api.setSource=function(t){if(!e.player.hls){return}if(e.player.hls.url!=t){e.player.hls.destroy();n(t)}};e.player.api.setSubtitle=function(e){var t=l.getElementsByTagName("track");for(var s=t.length-1;s>=0;s--){l.removeChild(t[s])}if(e){var r=document.createElement("track");l.appendChild(r);r.kind="subtitles";r.label=e.label;r.srclang=e.lang;r.src=e.src;r.setAttribute("default","")}};function a(){n(e.source.url)}if("Hls"in window){a()}else{var p=e.urlappend(mistplayers.hlsjs.scriptsrc(e.options.host));MistUtil.scripts.insert(p,{onerror:function(t){var s="Failed to load hlsjs.js";if(t.message){s+=": "+t.message}e.showError(s)},onload:a},e)}t(l)};

embed/minimize_internal.sh

@@ -46,6 +46,8 @@ echo "    Minimizing wrappers.."
   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 "      Minimizing hls.js";
+  terser -mn -o min/wrappers/hlsjs.js -- wrappers/hlsjs.js
 echo "    Done.";
 
 echo "  Minimizing CSS..";

embed/wrappers/hlsjs.js

@@ -0,0 +1,127 @@
+mistplayers.hlsjs = {
+  name: "HLS.js player",
+  mimes: ["html5/application/vnd.apple.mpegurl","html5/application/vnd.apple.mpegurl;version=7"],
+  priority: MistUtil.object.keys(mistplayers).length + 1,
+  isMimeSupported: function (mimetype) {
+    return (this.mimes.indexOf(mimetype) == -1 ? false : true);
+  },
+  isBrowserSupported: function (mimetype,source,MistVideo) {
+    //check for http/https mismatch
+    if (location.protocol != MistUtil.http.url.split(source.url).protocol) {
+      MistVideo.log("HTTP/HTTPS mismatch for this source");
+      return false;
+    }
+    
+    return true;
+  },
+  player: function(){},
+  scriptsrc: function(host) { return host+"/hlsjs.js"; }
+};
+var p = mistplayers.hlsjs.player;
+p.prototype = new MistPlayer();
+p.prototype.build = function (MistVideo,callback) {
+  var me = this;
+  
+  
+  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
+  }
+  if (MistVideo.info.type == "live") {
+    video.loop = false;
+  }
+  if (MistVideo.options.controls == "stock") {
+    video.setAttribute("controls","");
+  }
+  video.setAttribute("crossorigin","anonymous");
+  this.setSize = function(size){
+    video.style.width = size.width+"px";
+    video.style.height = size.height+"px";
+  };
+  
+  this.api = video;
+  
+  MistVideo.player.api.unload = function(){
+    if (MistVideo.player.hls) {
+      MistVideo.player.hls.destroy();
+      MistVideo.player.hls = false;
+      MistVideo.log("hls.js instance disposed");
+    }
+  };
+  
+  function init(url) {
+    MistVideo.player.hls = new Hls({
+      maxBufferLength: 15,
+      maxMaxBufferLength: 60
+    });
+    MistVideo.player.hls.attachMedia(video);
+    MistVideo.player.hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+      console.log("video and hls.js are now bound together !");
+      //hls.loadSource("https://cattop/mist/cmaf/live/v9.m3u8");
+      //hls.loadSource("https://mira:4433/cmaf/live/v9.m3u8");
+      MistVideo.player.hls.loadSource(url);
+      MistVideo.player.hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+        console.log("manifest loaded, found " + data.levels.length + " quality level");
+      });
+    });
+  }
+  
+  MistVideo.player.api.setSource = function(url) {
+    if (!MistVideo.player.hls) { return; }
+    if (MistVideo.player.hls.url != url) {
+      MistVideo.player.hls.destroy();
+      init(url);
+    }
+  };
+  
+  MistVideo.player.api.setSubtitle = function(trackmeta) {
+    //remove previous subtitles
+    var tracks = video.getElementsByTagName("track");
+    for (var i = tracks.length - 1; i >= 0; i--) {
+      video.removeChild(tracks[i]);
+    }
+    if (trackmeta) { //if the chosen track exists
+      //add the new one
+      var track = document.createElement("track");
+      video.appendChild(track);
+      track.kind = "subtitles";
+      track.label = trackmeta.label;
+      track.srclang = trackmeta.lang;
+      track.src = trackmeta.src;
+      track.setAttribute("default","");
+    }
+  };
+  
+  function onHLSjsLoad(){
+    init(MistVideo.source.url);
+  }
+  
+  if ("Hls" in window) {
+    onHLSjsLoad();
+  }
+  else {
+    //load the videojs player
+    
+    var scripturl = MistVideo.urlappend(mistplayers.hlsjs.scriptsrc(MistVideo.options.host));
+    MistUtil.scripts.insert(scripturl,{
+      onerror: function(e){
+        var msg = "Failed to load hlsjs.js";
+        if (e.message) { msg += ": "+e.message; }
+        MistVideo.showError(msg);
+      },
+      onload: onHLSjsLoad
+    },MistVideo);
+  }
+  
+  callback(video);
+};

embed/wrappers/html5.js

@@ -1,6 +1,6 @@
 mistplayers.html5 = {
   name: "HTML5 video player",
-  mimes: ["html5/application/vnd.apple.mpegurl","html5/video/mp4","html5/video/ogg","html5/video/webm","html5/audio/mp3","html5/audio/webm","html5/audio/ogg","html5/audio/wav"],
+  mimes: ["html5/application/vnd.apple.mpegurl","html5/application/vnd.apple.mpegurl;version=7","html5/video/mp4","html5/video/ogg","html5/video/webm","html5/audio/mp3","html5/audio/webm","html5/audio/ogg","html5/audio/wav"],
   priority: MistUtil.object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
     return (MistUtil.array.indexOf(this.mimes,mimetype) == -1 ? false : true);

src/output/output_http_internal.cpp

@@ -130,6 +130,7 @@ namespace Mist{
     capa["url_match"].append("/dashjs.js");
     capa["url_match"].append("/webrtc.js");
     capa["url_match"].append("/flv.js");
+    capa["url_match"].append("/hlsjs.js");
     capa["url_match"].append("/skins/default.css");
     capa["url_match"].append("/skins/dev.css");
     capa["url_match"].append("/skins/videojs.css");
@@ -142,6 +143,7 @@ namespace Mist{
     capa["optional"]["wrappers"]["default"] = "";
     capa["optional"]["wrappers"]["type"] = "ord_multi_sel";
     capa["optional"]["wrappers"]["allowed"].append("html5");
+    capa["optional"]["wrappers"]["allowed"].append("hlsjs");
     capa["optional"]["wrappers"]["allowed"].append("videojs");
     capa["optional"]["wrappers"]["allowed"].append("dashjs");
     capa["optional"]["wrappers"]["allowed"].append("webrtc");
@@ -897,6 +899,11 @@ namespace Mist{
           response.append((char *)flv_js, (size_t)flv_js_len);
           used = true;
         }
+        if (it->asStringRef() == "hlsjs"){
+          #include "hlsjs.js.h"
+          response.append((char*)hlsjs_js, (size_t)hlsjs_js_len);
+          used = true;
+        }
         if (!used){WARN_MSG("Unknown player type: %s", it->asStringRef().c_str());}
       }
 
@@ -1034,6 +1041,26 @@ namespace Mist{
 #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();
+      return;
+    }
+    if (H.url == "/hlsjs.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_hlsjs.js.h"
+      response.append((char*)player_hlsjs_js, (size_t)player_hlsjs_js_len);
+      
       H.SetBody(response);
       H.SendResponse("200", "OK", myConn);
       H.Clean();