Node.jsでYouTubeで同期再生してリアルタイムチャットするサービスを作りましたよ

開発経緯とシステム概要

auのうたパスで、みんなで一緒に同じ音楽を聴きながらリアルタイムチャットする企画があって面白かったので、動画が豊富にあるYouTubeを使って同じようなことをするサービスを作ってみた。

TauStream (Realtime chat with movies)(http://www.taustream.net/)

同じような楽しみ方をしたいのであればニコニコなどもあるのだけれど、ニコ動の場合は非同期でリアルタイム感がちょっと薄いし、ニコ生の場合はちょっとチャンネルを用意するのに敷居が高い感じがするので、もっとお手軽にできたらいいなと。
また、PicoTubeやBeatroboなどのTurntable系のが数年前に流行ったけれど、DJとかアバターとかのギミックはなしでもっと素朴な感じのが欲しいなと。

使っている言語はNode.js。主な利用ライブラリは以下のような感じ。

  • express : Webアプリケーションフレームワーク
  • socket.io : チャットの非同期通信。
  • ect : expressから呼び出すview。
  • mongoose : MongoDBとの接続。
  • connect-mongo : Webサイト部分のセッションストア。
  • passport : twitterの認証連携。
  • node-twitter-api : twittertweet連携。

今回はドメイン以外は無料で済まそうということで、サービス本体をHerokuに載せて、DBをMongoHQに載せている。

本当は現在メモリに載せているSocket.IOのセッションをRedisにストアするようにしてNode.jsをクラスタ構成にしたいところではあるのだけれど、まだそんなにアクセス数もないし、Dyno増やしてRedisサービスで十分な接続数を確保するぐらいだったら全部さくらVPSとかに載せ替えた方が安上がりじゃないのかということで、クラスタ化はもうちょっと様子見。

なお、チャット部分のSocket.IOのセッションは前述の通りオンメモリだけれど、Webサイト部分のセッションはconnect-mongoを使ってMongoHQ上で管理している。

また、各ページにGoogle Adsenseを貼り付けているが、YouTubeの規約上動画のページには広告を貼れないのでそこだけ除外している(参考:YouTube API Services Terms of Service  |  YouTube  |  Google Developers)。

使い方

閲覧

閲覧自体はサイトにアクセスしてRoomという、他の人が作った動画ページを開けばOK。

Roomには開始日時が設定されており、その日時の前にアクセスした場合は動画は再生されない。その日時以降にアクセスした場合は各クライアントで同期して動画が再生される。
また、動画は一定時間以上ずれると自動補正されるので、自分でシークしても強制的に特定の時刻に戻される。一時停止も可能だが、こちらも再生を再開するとそのタイミングで表示されるはずの時刻に自動シークする。

なお、Roomにアクセスしても動画は自動再生されない。これは「アクセスしたら急に恥ずかしい音がスピーカーから……」という事故を減らす目的もあるが、それとは別にYouTubeの仕様として「動画のView数はユーザが明示的に再生ボタンを押したときのみカウントされる(autoplayではカウントされない(参考:総再生時間レポート - YouTube ヘルプ))」というのがあるので、動画を使わせて貰っている分、少しはView数増に貢献しようという意図もある。
ページを開いている状態で開始日時になった場合も同様に自分で再生ボタンを押す仕様にした。

現在、Roomのオーナーが動画を途中で差し替えても閲覧最中の参加者に自動では反映されないので、その際はオーナーがチャットでその旨を連絡するなどして各参加者が手動で画面をリロードする必要がある。

チャットへの参加

チャットに参加したい場合はLoginボタンからTwitterアカウントでログインすることで可能になる。
入力欄の上にTweetのOn/Offのラジオボタン(デフォルトOff)があるが、これをOnにしてチャットに投稿すると同じ内容+閲覧Roomの付属情報が自分のTwitterアカウントにも投稿される。

自分のRoomの作成

自分のRoomを作りたい場合もLoginボタンからTwitterアカウントでログインすることで可能になる。
「タイトル」と「説明」と「YouTube動画URL」を入力して「Roomの開始日時」を設定して登録する。YouTube動画URLは複数設定することが可能。
通常は日本の「+0900」から変えることはないはずだが、開始日時のタイムゾーンを変更できる。これを変更して設定した場合でも参照時は自分のタイムゾーンに変換されて表示されるので注意。