Content for Youtube live m3u8 does not pass thru HLS-Proxy

[yomomano]

I seen several similar issues reported and tried all the answers but nothing seems to work, so here the following:

I am trying to stream a live Youtube channel and managed to fetch the m3u8 URL for it, and created a HLS-Proxy URL for it like this:

proxy_url='http://localhost:8081'
video_url='https://manifest.googlevideo.com/api/.....some very long url..---.QFbPavapnNEKuwk61I%3D/file/index.m3u8'
file_extension='.m3u8'
hls_proxy_url="${proxy_url}/"$(echo -n "$video_url" | base64 --wrap=0)"$file_extension"

This URL plays well in VLC for example but not Clappr.

When I use it as a src for a HTML5 video element using NPM hls.js library, the content remains pointing to Youtube (googlevideo). Here is how I create/assign the video src:

      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc); // HLS-Proxy like http://localhost:8081/....
        hls.attachMedia(videodom); // HTML5 video
      }

Once it starts playing, the outgoing connections all point to googlevideo, and I get a CORS error.

What am I doing wrong? I was assuming the content is all going thru the proxy by default. Or is hls.js to blaim?

Server start command:

npm start -- --port "8081" --host "localhost" --prefetch --max-segments 10 -v 4

• output attached-

Curl response YT URL https://manifest.googlevideo.com/api/manifest/hls_variant/....

curl -I "$hls_proxy_url"

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400
Content-Type: application/x-mpegURL

Connection: keep-alive
Keep-Alive: timeout=5

Also attached the master m3u8 for reference.

Thank you! Great project and documentation ! Perfect to learn the game.

SkyNewsLive-index.zip

out.log

[Warren Bank]

v0.20.4 was just released and pushed to npm.. and it fixes the problem. I needed to loosen the regex by allowing one extra character (',') in URL paths. Hopefully, this change won't break anything else.. by unintentionally matching other things that it shouldn't; wish I could remember the reason it was previously intentionally chosen to not be allowed.

Anyhoo.. here are some URLs that I just used to test Youtube.. to confirm that it's now working:

• Youtube: Sky News Live stream
  • HLS manifest for stream
  • proxied HLS manifest for stream
  • playing proxied HLS manifest in Clappr video player

[yomomano]

Perfect ! Thank you so much. The content URLs are updated now.

My next problem is how to render on a HTML5 video element. I use now hls.js as shown in my first message, but i see nothing. What would you suggest here? I use the video element for video texture on a webGL geometry.

Also: in clappr it does not play. VLC plays ok. Is it related to video issue?

[Warren Bank]

hls.js should (almost certainly) work.. but I haven't tried.. so dunno.

clappr most definitely works.. I just tested it; of course, the IP:port of my local proxy is probably going to be different from yours.. so adjust the URLs as needed.

[yomomano]

Everything is working fine via hls.js and HTML5 video. I even get the expected events like 'loadedmetadata', 'canplay' etc. Perfect.

Thanks Warren for this great tool !