skimemo

_ Zenko＋Clapprでdash_shaka_playback 1_1002エラーが出た話

S3互換サーバー(Zenko)に動画ファイルを置き、HLSでアクセスしようとした場合、CORS(Cross-Origin Resource Sharing)が問題になります。
動画閲覧UIのHTMLは通常Zenko外にあるので、そこからZenkoにアクセスしようとしても、CORS制限でエラーとなってしまうのです。

私が遭遇したのは、localhost(開発環境)からClappr.PlayerでZenkoの動画ファイルを読みに行くケースです。
全てローカルで閉じている場合は正常に動画が再生されるのですが、ファイルをZenkoに置くと以下のエラー画面となってしまいます。

Could not play video.
There was a problem trying to load the video.
Error code: dash_shaka_playback:1_1002

エラーコードで検索しても何も引っかかりません。
しかし、JavaScriptのconsoleに具体的な内容が出力されていました。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.webdb.co.jp/path/to/mpd/output.mpd. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

つまり、CORSヘッダーが無くてアクセスができない、と言っています。

Zenkoの環境は、DockerでZenkoが動き、表はapacheがrewriteをしています。
そこで、httpd.conf(実際にはvhost.conf)にrewriteと共存する形で記述する必要があります（たぶん）。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

<VirtualHost 61.206.124.164:443>
    ServerName s3.webdb.co.jp
    <Location />
        <IfModule mod_headers.c>
            SetEnvIf Origin "http(s)?://(localhost|domain2\.com)$" AccessControlAllowOrigin=$0
            Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        </IfModule>
    </Location>
    RewriteEngine On
       : 

参考: https://codeday.me/jp/qa/20181130/41819.html

これで無事CORSヘッダーが出力され、動画も再生できるようになりました。
原因が分かるまでに半日、ヘッダーの出力方法が分かるまでに数時間かかりました・・・orz..

なお、設定変更後はブラウザのキャッシュをクリアしてから再読込した方が良さそうです。少なくともFirefoxでは設定画面からキャッシュクリアしないとキャッシュを読んでしまい、apacheの設定変更の効果を確認できませんでした。