hls.js streaming code does not work in NWJS app, but works in Chrome browser

I am building an NWJS app that uses hls.js library (https://github.com/video-dev/hls.js) to do HLS streaming (as Chrome does not currently have native HLS support).

If I run the app, the video does not stream. The page opens with the video element, and it appears to load something (shows a white to gray gradient), but does not begin the stream. If I click the play button, the video element changes dimensions and appearance, and just shows a black screen.

However, I can open the index page directly in Chrome browser and the code runs fine, and the video begins streaming on loading the page. I can pause and play the video as expected.

Can anyone see why this code which works fine in Chrome browser will not run properly in NWJS?

I'm running nwjs version 0.94.0 SDK.

HTML:

<!doctype HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>HLS Viewer</title>
  <script type="text/javascript" src="../javascript/hls.js"></script>
  <script type="text/javascript" src="../javascript/hls_init.js"></script>
</head>

<body>
  <video id="test_video" controls></video>
</body>
</html>

JS initializing script:

function initHLS() {
  let video = document.getElementById('test_video');

  var hls = new Hls({
    debug: true,
  });

  hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');

  hls.attachMedia(video);
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    video.muted = true;
    video.play();
  });
}

window.addEventListener("DOMContentLoaded", initHLS);

package.json:

{
  "name": "CamViewNWJS2",
  "description": "IP Camera Viewer built on Nodejs",
  "version": "0.0.1",
  "icon": "icons/app.icns",
  "main": "html/main.html",
  "chromium-args": "--enable-logging=stderr",
  "window": {
    "toolbar": false,
    "width": 1500,
    "height": 900,
    "position": "center"
  },
  "nodejs": true,
  "scripts": {
    "prod": "nwbuild --platforms win64 --buildDir dist/ ./"
  },
  "devDependencies": {
    "nw": "^0.12.0",
    "nw-builder": "^3.7.0"
  }
}

The javascript API for implementing HLS can be found here (However, I have downloaded the script and it is part of the package):

https://hlsjs.video-dev.org/dist/hls.js

Structure:

package.json
html       |- index.html
javascript |- hls_init.js
           |- hls.js

Here is a link to the log generated when running as NWJS app (too large to put in the post - I think most of it is generated output by hls.js)

https://kevinallasso.org/public/nwjs_error.log

Solution

My assumption is, if you are dealing with video, you will need to replace the FFMPEG dll that ships with NW.js. Google pays to license commercial video/audio codecs for Chrome. However, they don't do that for Chromium. So it only has the open source audio/video codecs. NW.js is based on Chromium.

NW.js has a page about this:

https://nwjs.readthedocs.io/en/latest/For Developers/Enable Proprietary Codecs

It includes instructions on how to do a custom build of FFMPEG to be compatible with your version of NW.js. It also links to prebuilt binaries maintained by the community:

https://github.com/nwjs-ffmpeg-prebuilt/nwjs-ffmpeg-prebuilt/releases

Though these are not available for all version of NW.js, so you'd need to pick a version that matches, and also make sure your global Node version matches the version in NW.js.

Also, you'd still need to deal with licensing these codecs for your software if you are concerned with the legal usage of them.