Apparently native html5 or modern browsers do not support running .m3u8
playlist directly or I was missing something in the original code. Even
adding the correct mime types in apache2 didn't work so I decided to
embed hls.js into the video html files to support hls playlist.
This commit is contained in:
Maurice ONeal 2023-03-11 16:32:00 -05:00
parent 78919effcf
commit 3c5dbec24c
3 changed files with 27 additions and 6 deletions

View File

@ -246,7 +246,7 @@ bool rdConf(shared_t *share)
share->pixThresh = 50;
share->imgThresh = 800;
share->maxDays = 15;
share->maxEvents = 20;
share->maxEvents = 40;
share->maxLogSize = 50000;
share->skipCmd = false;
share->schSec = 60;

View File

@ -37,7 +37,7 @@ using namespace std;
using namespace std::filesystem;
using namespace std::chrono;
#define APP_VER "2.0.t6"
#define APP_VER "2.0.t7"
#define APP_NAME "Motion Watch"
#define REC_LOG_NAME "rec_log_lines.html"
#define DET_LOG_NAME "det_log_lines.html"

View File

@ -71,7 +71,7 @@ void genHTMLul(const string &outputDir, const string &title, shared_t *share)
// regName.substr(0, regName.size() - 5) removes .html
auto name = regName.substr(0, regName.size() - 5);
htmlText += "<a href='" + regName + "'><img src='" + name + ".jpg" + "' style='width:25%;height:25%;'</a>\n";
htmlText += "<a href='" + regName + "'><img src='" + name + ".jpg" + "' style='width:12%;height:12%;'</a>\n";
}
}
@ -112,9 +112,30 @@ void genHTMLvid(const string &name)
htmlText += "<link rel='stylesheet' href='/theme.css'>\n";
htmlText += "</head>\n";
htmlText += "<body>\n";
htmlText += "<video width=100% height=100% controls autoplay>\n";
htmlText += " <source src='" + name + ".m3u8' type='video/MP2T'>\n";
htmlText += " <script src=\"https://cdn.jsdelivr.net/npm/hls.js@1\">\n";
htmlText += " </script>\n";
htmlText += " <video width=100% height=100% id=\"video\" controls>\n";
htmlText += " </video>\n";
htmlText += " <script>\n";
htmlText += " var video = document.getElementById('video');\n";
htmlText += " if (Hls.isSupported()) {\n";
htmlText += " var hls = new Hls({\n";
htmlText += " debug: true,\n";
htmlText += " });\n";
htmlText += " hls.loadSource('stream.m3u8');\n";
htmlText += " hls.attachMedia(video);\n";
htmlText += " hls.on(Hls.Events.MEDIA_ATTACHED, function () {\n";
htmlText += " video.muted = true;\n";
htmlText += " video.play();\n";
htmlText += " });\n";
htmlText += " }\n";
htmlText += " else if (video.canPlayType('application/vnd.apple.mpegurl')) {\n";
htmlText += " video.src = 'stream.m3u8';\n";
htmlText += " video.addEventListener('canplay', function () {\n";
htmlText += " video.play();\n";
htmlText += " });\n";
htmlText += " }\n";
htmlText += " </script>\n";
htmlText += "</body>\n";
htmlText += "</html>";