LoginSignup
1
1

More than 3 years have passed since last update.

ツイキャスの画面をコラボキャス用に切り出すやつ 作った

Last updated at Posted at 2020-06-14

アプリはここ 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の恩恵はわかるけどちょっとつらい!!

以上!!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1