ついて雑多に書いています。JavaScriptはじめに先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。台のカメラで映したいタイピングしてる様子をリアルタイムで見たいというものです。クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。ログインを待ち受けします。イラレで作っておきました。ログインしてもらいます。ログインしてカメラの許可ボタンが押されると画像が映ります。ふたりともログインすると対決に移ります。先に打った方にポイントが入る方式で、ふたりとも打ち終わるとアニメーションして次の問題へ移ります。真ん中には当日来場した方の写真が映っており、メッセージをボードに記入してもらっています(ここではダミー画像)。そこに書いてあるメッセージを新郎・新婦が打ちこむ、というものでした。変換中の様子(「おめでとう」であれば「おm」の「m」とか)も観客から見れるようになっています。新郎新婦からはスクリーンにプロジェクタ投影されている文字は配置的に見れないので、手元で見れるようになっています。こちらは工数不足により最小限のデザインです。すべての問題を打ち終わると結果発表アニメーションが流れます。新郎・新婦どちらが勝つか投票し、当てた人から抽選で景品がもらえるとの企画だったのですが、当日はイイ感じに一問差で新婦さんが勝ってくれたおかげで盛り上がって本当に良かったです。用意した構成はこんな感じになります。メディア」から適切なカメラを設定くらいです。役割は以下の様な形になります。ブラウザが途切れてしまっても途中から再開できるレジューム機能なども盛り込んでいますが、ここでは触れません。操作してカメラ画は後ろに置いてクリッピングされるようにしています。すごい便利なのでこれでメソッドチェーンでもりもり書いています。以下のサイトを参考にしています。流し込むこれだけで可能です。自然言語で書くと長いですがコード的にはとてもシンプルです。つのストリームを転送出来ました。リダイレクトすることで解決しました。システムに加えても良かったかもしれません。そんなに有意な差は出なそうですが、私の方は購入時にオプションで性能あげていたから平気だったのかもしれません。入力情報のリアルタイムな取得これはとても簡単でした。タグの中身を取ってくるとどうやら変換途中の文字列も取ってこれるようです。data);});});これらをイイ感じに組み合わせればアプリが完成、というわけです。サーバ経由でコミュニケーションすると良いと思います。Blog(ブログ)webRTCでP2Pの動画チャットを頑張れば試せるデモ作ってみた。上記サイトを参考にすれば出来そうなので、必要に迫られたらやってみます。プライベートリポで作成してました。書き直すことにしました。新たにアプリをインストールする必要もなくなり、更に本当に直前まで(二次会中も)修正が可能だったため、限られたスケジュールの中で何とか本番まで漕ぎ着けることが出来ました。いった要件に応えるためには、利用するフレームワークの選定がとても重要だということを改めて痛感しました。一緒に開発をして下さった友人に感謝します。ありがとうございました。画の素材をお借りしました。はてなブログPro凹んでます。)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。