Communication)で定義されているAPIの一つで、ローカルのWebカメラやマイクからストリームデータを取得するためのAPIです。APIの詳細はW3Cでドラフトが公開されています。APIでは、通信時のストリームについて定義されています。これによって、Webカメラから取得した画像やマイクから取得した音声は、加工することが可能です。最初にnavigator.getUserMedia関数が使えるか確認します。W3Cでは、navigator.getUserMediaと定義されていますが、まだドラフト段階なのでベンダープレフィックスがついています。Microsoft用よって、利用する際には、下記のように書いてベンダー毎にチェックします。navigator.msGetUserMedia);次にnavigator.getUserMediaを使ってMediaStreamを取得します。取得したMediaStreamからWebカメラとマイクのデータにアクセスできるようになります。navigator.getUserMediaを使うと非常に簡単にWebカメラをVideoタグに表示することができます。最初のパラメータでは、アクセスするメディアのタイプを指定します。ライブチャット(画像のみ/音声なし)今回はWebカメラの映像を使ったライブチャットを作ってみます。)形式の画像に変換します。navigator.getUserMediaでMediaStreamを取り出してVideoタグで再生させます。});そしてCanvasに再生中のVideoを描画します。この場合のCanvasはVideoを書き込むだけのバッファ的な利用になるのでスタイルで隠しておきます。URLスキームに変換します。URLスキームは、data:から始まる文字列です。canvas.toDataURL('image/webp');Webp形式の画像はバイナリなのでbase64形式で文字列化あれています。URLスキーム形式となったwebp画像データをWebSocket経由で相手に投げます。投げるタイミングは、サーバの負荷や帯域などを考慮してきまます。});}サーバサイド今回チャット機能は、Primusを使います。Primusは、Node.jsのリアルタイムWebのフレームワークのラッパーライブラリです。PrimusでWebSocketのなかでEngine.IOをつかっています。PrimusRooms);それに加えてチャットのルーム機能を実現するためにPrimusにルーム機能を追加するPrimus-Roomsライブラリを使います。APIを使うと簡単にローカルのWebカメラにアクセスすることができました。今回は、Webカメラから取得したデータを使ってライブチャットを作成してみました。他にもCanvas連携して画像処理や顔認識などに応用してみてはいかがでしょうか。次回は音声ありのライブチャットをつくってみます。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。