improve hls playback

raytj · Dec 24, 2018 · 668558f · 668558f
1 parent d7ad6d5
commit 668558f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/firmware_mod/controlscripts/rtsp-h264 b/firmware_mod/controlscripts/rtsp-h264
@@ -86,6 +86,7 @@ start()
 
     echo "================== START ===============" >> "$LOGPATH"
     echo "/system/sdcard/bin/v4l2rtspserver-master $RTSPH264OPTS $AUDIOPARAM $VIDEOFORMAT $CREDENTIAL $PORT" >> "$LOGPATH"
+    cd /system/sdcard/hls
     /system/sdcard/bin/v4l2rtspserver-master $RTSPH264OPTS $AUDIOPARAM $VIDEOFORMAT $CREDENTIAL $PORT 2>> "$LOGPATH" >> "$LOGPATH" &
     echo "$!" > "$PIDFILE"
   fi

diff --git a/firmware_mod/hls/hls.light.min.js b/firmware_mod/hls/hls.light.min.js
diff --git a/firmware_mod/hls/index.html b/firmware_mod/hls/index.html
@@ -0,0 +1,30 @@
+<html>
+<link rel="shortcut icon" href="about:blank" />
+
+<body>
+  <!--fill streamList variable with the list of streams -->
+  <script src="/getStreamList?streamList"></script>
+  <h3>HLS</h3>
+  <video controls id="hlsvideo"></video>
+  <script src="hls.light.min.js"></script>
+  <script>
+    var video = document.getElementById("hlsvideo");
+    if (Hls.isSupported()) {
+      var hls = new Hls();
+      hls.loadSource(streamList[0] + ".m3u8");
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, function() {
+        video.play();
+      });
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = streamList[0] + ".m3u8";
+      video.addEventListener('loadedmetadata', function() {
+        video.play();
+      });
+    } else {
+      document.write("HLS not supported");
+    }
+  </script>
+</body>
+
+</html>
diff --git a/firmware_mod/www/cgi-bin/status.cgi b/firmware_mod/www/cgi-bin/status.cgi
@@ -498,10 +498,11 @@ EOF
 PATH="/bin:/sbin:/usr/bin:/media/mmcblk0p2/data/bin:/media/mmcblk0p2/data/sbin:/media/mmcblk0p2/data/usr/bin"
 
 IP=$(ifconfig wlan0 |grep "inet addr" |awk '{print $2}' |awk -F: '{print $2}')
-echo "<p>Path to feed : <a href='rtsp://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast'>rtsp://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast</a></p>"
-echo "<p>HLS : <a href='http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.m3u8'>http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.m3u8</a></p>"
-echo "<p>MPEG-DASH : <a href='http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.mpd'>http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.mpd</a></p>"
-
+echo "<p>Path to feed: <a href='rtsp://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast'>rtsp://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast</a></p>"
+echo "<p>HLS: <a href='http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.m3u8'>http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.m3u8</a></p>"
+echo "<p>hls.js web player: <a href='http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)'>http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)</a></p>"
+echo "<p>MPEG-DASH: <a href='http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.mpd'>http://$IP:$(source /system/sdcard/config/rtspserver.conf; echo $PORT)/unicast.mpd</a></p>"
+echo "HLS & MPEG-DASH require the rtspserver to be started with the -S flag. This may reduce the compatibility with some ip camera viewers such as ipcamviewer etc."
 cat << EOF
     </div>
 </div>