无法从 chrome 发送者应用程序在 chromecast 上播放 HLS 直播或 VOD 流

Question

我的设置：

• XAMPP（版本 5.6.20）
• 使用源代码：https://github.com/googlecast/CastHelloVideo-chrome
• Google Chrome（版本 50.0.2661.94（64 位））
• Macbook air (10.11.1 (15B42))
• Chromecast 第二代（固件版本：1.18.55065）

修改后的 httpd.conf 位于此处：/Applications/XAMPP/xamppfiles/etc/httpd.conf

<Directory "/Applications/XAMPP/xamppfiles/htdocs">
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
#   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
.....
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
</Directory>

稍后在 httpd.conf 中确保已启用：

 LoadModule headers_module modules/mod_headers.so

如果我在 castvideo 与 https://github.com/googlecast/CastHelloVideo-chrome 的根路径相同的地方这样做： curl -I https://myserver.com/castvideo/index.html

我明白了：

HTTP/1.1 200 OK
Date: Tue, 10 May 2016 23:12:26 GMT
Server: Apache/2.4.18 (Unix) OpenSSL/1.0.2g PHP/5.6.20 mod_perl/2.0.8-dev Perl/v5.16.3
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Accept-Ranges: bytes
Content-Length: 3323
Content-Type: text/html

当我单击“加载自定义媒体”按钮加载 https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8 时，从来自 http://RECEIVER-IP-ADDRESS:9222 的 chromecast 日志中获取此错误：

XMLHttpRequest cannot load     https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.gstatic.com' is therefore not allowed access.
media_player.js:22  [ 23.204s] [goog.net.XhrIo] Request complete [GET https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8 0]
media_player.js:22  [ 23.212s] [cast.player.api.Host] error: cast.player.api.ErrorCode.NETWORK/311Gb @ media_player.js:22Eb.di @ media_player.js:22ib.log @ media_player.js:19Kb @ media_player.js:23L @ media_player.js:85xg.Ub @ media_player.js:166k.fd @ media_player.js:108of.fd @ media_player.js:109k.uc @ media_player.js:108pc @ media_player.js:34oc.dispatchEvent @ media_player.js:33Gc @ media_player.js:39Ic @ media_player.js:42D.Ui @ media_player.js:40D.zh @ media_player.js:40
media_player.js:22  [ 23.216s] [cast.player.api.Player] unload
cast_receiver.js:45  [ 23.376s] [cast.receiver.MediaManager] Load metadata error: [object Object]

问题：

为什么我不能播放 HLS 流？

为什么我会收到“请求的资源上没有 'Access-Control-Allow-Origin' 标头。”？当我卷曲时，它显示它存在。

Answer 1

我发现 Google Developer 网站提供了一种简单的方法来记住全局权限链接。如果要进行跨源请求，可以将permissions": ["<all_urls>"] 添加到清单中，或者您可以使用here 中描述的匹配模式。

这是一个使用 HLS 播放器的示例项目：https://github.com/RReverser/mpegts