Help us understand the problem. What is going on with this article?

カニを飛ばすサイトを作りました

More than 1 year has passed since last update.

自己紹介

1980YENというバンドの技術的なことをやってます。
普段は普通のサイト作ったりしてます。

kani.gif

静的サイトとリアルなバンド演奏をWebSocketを使って連動させる

食品まつり a.k.a foodmanという天才の人がカニって言ってるだけの曲を作ったので、ライブ中にカニって言うたびにサイト内にカニを飛ばしました。
以下に概念図を示します、よろしくご査収ください。
※画像は構想段階のもので一部本来の仕様と異なる部分があります
Image from iOS.jpg

  1. 食品さんのAbleton Liveプロジェクト内にでカニと言ってるだけのトラックがあったので、m4lでアタックをとる
  2. アタックのたびにEC2インスタンスにUDPを送りつける
  3. S3に置かれた静的サイトとEC2インスタンスをWebSocketでつなげておく
  4. m4lから送りつけられたタイミングでWebSocketでブラウザにイベントを投げつける
  5. サイト閲覧者各人のブラウザでカニが飛ぶ

Max/MSP、Python、JavaScriptあたりで実装しました。
ちなみに実際にサイト内でカニを飛ばしたのは同僚のウマ先生なので、フロントについては僕はあまり何もしていません。
繰り返しになりますがウマがカニを飛ばしました。
ちなみにThree.js使ったと言ってました。

課題や学び

WebSocketかServer-Sent Eventsか

今回はサーバから一方的にイベントを送る単方向通信なのでServer-Sent Events(以下SSE)で良かったのですが、httpプロトコルに則ってるから色々面倒くさいとかを読んでWebSocketを採用しました。
特に検証したわけではなかったので、SSEもそのうち試してみたいと思います。
ちなみにWebSocketは結構レイテンシ少なくてよかったです。

EC2インスタンスをSSLにするあたりでコケた

フロントはCloudFrontでSSL化していたのですが、EC2の方もSSL化しないとWebSocketはれないことが分かったので、色々調べたのですが、結局出来なくてフロントのSSLを切るという荒業に出ました。
あまりEC2を公開するカタチで使ったことないので、その辺の知見がカスなので勉強したいです。

インスタンスタイプについて

開発中はt2.micro、ライブ中はt2.mediumにしていたのですが、どれくらいの負荷があったのかは謎です。
今度ちゃんと計測するのが課題です。

まとめ

WebSocketはもっと不真面目に使うと面白いもの沢山出来る予感がしました。
今回の仕組みもライブ演出の外側という点で出来ることある気がします。
年末年始おめでたい雰囲気の演出としてカニを飛ばしたいという方はご相談ください。
1980YENの3rdアルバム「FAST FOOD」も宜しくおねがいします。

Hoouseei
生きています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした