アプリはここ https://kozycorner.github.io/twitcasting_collaboration_thumbnail/
できること
ツイキャスでライブ中のユーザのIDを指定すると、その人の画面を取得して、コラボキャスのユーザのサムネイルが表示される領域を完璧に切り出し(分割し)ます。
使い方
ID(Username)を指定して「取得」ボタンを押し、画像が取得されたらタイプを選択してください。右側(スマホとかでは下側)に切り出された画像が表示されますので、端末の保存機能を使って保存して使ってください。
使うと何が嬉しいの?
ラジオキャスにコラボしに行くときに、自分のサムネイルにこれで切り出した画像を使うと、背景と同化し、そこにいないかのように見せることができます。それが嬉しいかは知りません。著作権には十分気をつけてください。
技術の話
TwitCasting APIv2からLive Thumbnailを取得して、フロント側で画像を切り出しています。なお、APIを直接叩くとCORSで怒られるので、AWS REST APIのHTTP統合を経由することで回避しています(AWSはじめてだからこれで2週間くらい使った)。
フロント側はHTML5 Canvas + JavaScriptで、ハードコーディングした座標情報を元に切り出してBASE64で表示しています。
まとめ
みんなもツイキャスで透明人間になろう!
canvas
楽しい!CORS
の恩恵はわかるけどちょっとつらい!!
以上!!