How to enable CORS for streaming on Chromecast using Media Player library?
Chromecast supports streaming in MPEG-DASH, Smooth Streaming, and HLS and the Media Player library: https://developers.google.com/cast/docs/player provides Javascript support for these kind of use cases.
Since Streaming protocols, unlike most file based protocols, access content in an asynchronous way using XMLHTTPRequest, they are guarded against inappropriate access by the CORS header from the server where the resource originates.
It's been a recurring question regarding how to enable CORS for streaming on Chromecast in various environments such as dev, production, CDN, cloud hosted, etc. It'd be great if the SO community can all pitch in to provide insights and share your experiences on this topic.
Answer
To get started on this topic, let's remember that all requests created by the Media Player library: https://developers.google.com/cast/docs/player use either GET or POST method. Most of these requests fall into the category of simple requests (as opposed to the so-called preflighted requests) as far as CORS is concerned. For more details on this, check out this link: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS.
To set up CORS for your all media content that involve manifests, secondary manifests, segments, and crypto keys, if you have access to your servers, you may for example add an .htaccess file that includes a very permissive line like:
Header set Access-Control-Allow-Origin "*"
or you may add this line into your Apache server config file inside block and restart your Apache server. You can verify that the corresponding responses will have a header field like this:
Access-Control-Allow-Origin:·*(CR)(LF)
If you work with CDN, you'd have to work with them and get the necessary header fields added.
Once you have CORS configured properly, you will not be seeing the dreaded network error code: cast.player.api.ErrorCode.NETWORK anymore.
Below are examples of streams that provide CORS header fields:
MPEG-DASH:
- http://commondatastorage.googleapis.com/gtv-videos-bucket/dash/BigBuckBunny/bunny_10s/BigBuckBunny_10s_isoffmain_url_relative_DIS_23009_1_v_2_1c2_2011_08_30.mpd
- http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd
Smooth Streaming: - http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest - http://playready.directtaps.net/smoothstreaming/SSWSS720H264PR/SuperSpeedway_720.ism/Manifest
But this HLS stream below, for example, does not provide CORS Access-Control-Allow-Origin header field in its response.
http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8
You can use e.g. this tool: http://web-sniffer.net/ to sniff headers.