LoginSignup
5
1

More than 5 years have passed since last update.

WebRTC入門者の会(勉強会)に参加しました

Posted at

勉強会の基本情報

概要

  • WebRTCに使うデバイスを選択するには(+おまけ)
  • WebRTCデバッグ入門

内容

WebRTCに使うデバイスを選択するには(+おまけ)

ディバス一覧の取得

  • 取得できるディバス

    • オーディオ入力ディバス(マイク)
    • ビデオ入力ディバス(カメラ)
    • オーディオ出力ディバス(スピーカー) ー chromeのみ(53~)
  • ディバス情報の内容

    • deviceId - ディバスID
    • kind - audiooutput(chromeのみ) videoinput audioinput
    • label - 名称
    • groupId - 同じハード機器内のディバスは同じなる仕様

labelを取得できるケース

  • Chrome - https://〜
  • Firefox - ユーザーがアクセスを許可している間(https://〜で「常に許可」したら、その後ずっと)

Andriodでフロント/バックカメラを指定


  var constraints = {
    audio: true
    video: { 
     facingMode: "user" // フロントカメラ(ユーザ側カメラ) ※デフォルトはこちら
     // facingMode: "environment" // バックカメラ(環境側カメラ)
    }
  };

Firefox ではFakeカメラ、Fakeオーディオが使える

 var constraints = {video: true, fake: true, audio: false};

WebRTCデバッグ入門

ケース1

  • 現象
    • ネットワーク的に接続されているか(chrome場合)
  • 対策
    • アドレスバーに、chrome://webrtc-internalsを入力して
    • Conn-xxxx-x-x という項目がある(有効なTransport/輸送路)
  • 確認
    • 存在しなければネットワーク的に接続されているか
    • ある場合でもタイムスタンプが更新されていない場合はその時点で利用されていない

ケース2

  • 現象
    • 音声、映像ストリームが流れているかを確認する
  • 対策
    • アドレスバーに、chrome://webrtc-internalsを入力して
    • AudioTrackとVideoTrack情報を確認する
  • 確認
    • 送受信バイト数がカウントアップしていればストリームは流れている

ケース3

  • 現象
    • カメラの映像やマイクの音声が取得できない
  • 対策
    • プルダウンで選択しブラウザをリロードすることで有効になる
    • navigator.mediaDevices.getUserMedia のAPIでエラー返すfunctionに、ログを出力
  • 確認
    • navigator.mediaDevices.getUserMediaで指定するキャプチャサイズ(widthとheight)の映像をWebカメラから取得できない
    • PC側のマスターボリュームが0になっているなど

メディアを解釈する サーバを介するもの

  • MCU(Multipoint Control Unit)

    • MCUはメディアを集約し、ミキシングし、各デバイスに流す。かなり、クライアントの処理負荷が軽いのがメリットだ。
    • サーバー側がデコードやエンコード処理必要であるので、負荷が高くなる
    • 代表例:Skype
  • SFU(Selective Forwarding Unit)

    • このアーキテクチャでは、まずクライアントは1つのストリームをSFUに送信する。SFUはエンドポイントが希望するストリームのみをリダイレクトする。
    • サーバー側に負荷が高くない
    • 代表例:Google Hangout

感想

  • 初めてWebRTCに関する勉強会に参加した
  • いろいろな情報をもらえることが良かった
  • 情報が大体的にクライアント側に集中しているが、サーバー側の情報が少ない
  • 参加者が30人ぐらいが、WebRTCに趣味ある方少ない感じ

メモ

5
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
5
1