Amazon IVSに対応する

概要

Vimeoを使った配信でちょっとネックになるポイントが増えてきたので、Amazon IVSに対応したい。

サンプル実装でDreamkast-UIに組み込めそうという実感が得られるところまで来たので、これを本番で使えるようにしたい。

サンプル実装: https://github.com/cloudnativedaysjp/dreamkast-ui/tree/implement-ivs

現在の課題

動画切り替え

Video.jsを使ったプレーヤーをComponentに組み込むところまでは出来ている。が、セッションやトラックの切り替えで動画を差し替える仕組みがまだ出来ていない。現在はIvsPlayerのplayBackUrlに固定値を渡しているので、これをDreamkast側から受け取った値を使うように修正する。

DreamkastからはVimeoの時と同じくTrack.tsxで videoId として渡されるものと考えて良い。(実際にはstreamのurlなんだけど)_ IvsPlayer component内でaddEventListenerしているからか、単純にpropで渡す内容をvideoIdに置き換えるだけでちゃんと動かなかった･･･

TSとして正しい形に

サンプルコードをベースにコピペしただけなので、IvsPlayer componentがTSとしては微妙な感じになっている。これを修正する必要がある

開発に利用できるstream url

https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8 https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.XFAcAcypUxQm.m3u8 https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8 https://d6hwdeiig07o4.cloudfront.net/ivs/956482054022/cTo5UpKS07do/2020-07-13T22-54-42.188Z/OgRXMLtq8M11/media/hls/master.m3u8

参考にしたサイト

公式ドキュメント https://docs.aws.amazon.com/ivs/latest/userguide/player-videojs.html

React と Video.js を使って Amazon IVS プレイヤーを実装する https://cloudpack.media/56011

cloudnativedaysjp / dreamkast-ui