CORS problem

[nsmith1024]

Hello,

I'm trying to make a webpage where im using HLS.js in the browser to play live streams from different URLS on the webpage.

The problem is that if the user enters a URL to a live stream that is on a different server from my website, i get a CORS error.

Lets say i want to watch a live YouTube video (just an example). I give HLS.js in the browser the link to the YouTube stream. HLS.js will go directly to YouTube causing a CORS error immediately because the browser its not on YouTube website its on my site at the moment.

Do you have any idea how to fix this problem with the proxy? Or using some other way? Thanks

[warren-bank]

quick thoughts..

1. CORS is always a PITA.. but it's also a key policy in modern browser security
2. most HLS streams that I've encountered in the wild send very permissive CORS response headers, since they're usually hosted on a CDN.. not sure about YouTube
3. if you were to run a centralized proxy and configure your client to direct all video traffic through it.. that could certainly work, but it would require a LOT of bandwidth
   • note: the prefetch and caching feature of this proxy should most likely be disabled in such a case
4. if each user was to run their own local instance of a proxy server to tunnel video streams (for example, this one).. that's a lot to ask of your average know-nothing end-user.
   That being said..
   • it's the way that this proxy is intended to be used
   • it's the way that this proxy is integrated with my "Webcast-Reloaded" Chrome extension.
     More specifically..
     • landing page: # 1
     • is passed the (base64 encoded) URL to an HLS manifest in its hash
     • constructs a new URL that directs the video stream through the proxy
     • sends the new URL to landing page # 2
     • landing page: # 2
     • is (optionally) passed the (base64 encoded) URL to an HLS manifest in its hash
     • displays a dropdown of available video players that the user may choose (ex: Clappr, Theoplayer, VisualOn)
     • forwards the URL to a static webpage that contains the chosen video player library
     • landing page: Clappr
     • is (optionally) passed the (base64 encoded) URL to an HLS manifest in its hash
     • initializes a video player for the specified video
     • allows the video to be cast to a Google Cast device (on the same LAN)

additional thoughts..

• for the purpose of reproducing your error to verify the underlying problem, you can test the (unproxied) URLs giving you CORS problems with HLS.js in the video players listed above (ie: via landing page: # 2)
  • I'd highly recommend Clappr.. it's a great player and is completely open-source

[insthync]

I am finding for the same solution, I try to run this proxy with prefetch enabled (hlsd --port 9991 --prefetch --max-segments 30)

I did pass hashed URL to client, client can retrieve m3u8 content from the proxy but cannot read segment content (.ts files) because of CORS error (I use Clappr as a player).

Seems like .ts URLs not being changed to other ones which can be accessed, not sure how prefetch work, I was thought it will prefetch and store it somewhere and change m3u8 content to the changed URLs.

[warren-bank]

off-hand, my guess is:

• your problem probably has nothing to do with CORS
• you need to add the --host cli option and tell hlsd the address where the .ts segments should go
  • I'm sure the default is a sane best-guess.. but it's always better to be explicit, since this is such a vital value
• you can test my assertion by looking in Chrome devtools at the request for any of the .ts files..
  • are they going to the ip:port on the LAN where hlsd is running?
  • if not, configure the value so they do

[insthync]

I found the source of problem the URLs contain , so I have to modify the URLs regex, it is very small change, just delete 1 character.