コース概要

メディアデバイスの取り扱い

1. ブラウザ権限との取り組み(navigator.permissions)

  • ハードウェアへのアクセス:
    • Webカメラ
    • マイク
  • オプションの権限:
    • ジオロケーション
    • 通知
    • クリップボード(読み取り/書き込み)
  • 権限の照会とステータス
  • 制約事項とブラウザ互換性

2. メディアデバイスの読み取り(navigator.mediaDevices)

  • デバイスの一覧表示
  • デバイス変更の処理

3. クロスブラウザ互換性

  • APIの使用:
    • navigator.permissions.query()
    • navigator.mediaDevices.enumerateDevices()
    • getUserMedia()
  • Safariのフォールバック戦略

4. メディアデバイスの取り扱い

  • デバイスの初期化: getUserMedia(constraints)
  • メディアデバイスの制約条件
  • ストリームの開始と停止
  • デバイス変更の処理

5. MediaRecorderを使用したデバイスの録画

  • ストリーミングと録画の開始/停止
  • .webmファイルのダウンロード
  • リアルタイム波形プレビュー

オプション機能:

  • .wav形式で保存(ScriptProcessorNodeを使用)
  • オーディオFFTスペクトルの可視化
  • デシベルでの音量バー
  • webkitSpeechRecognitionを使用した音声認識

ピア接続

1. シグナリングサーバー

  • 双方向チャネルのオプション:
    • WebSocket
    • Socket.io
    • SignalR
  • メッセージ構造
  • 簡易的なWebRTCクライアント
  • 完全なシグナリングフロー

2. WebRTCによるビデオチャット

  • アーキテクチャ: Node.js + ws
  • WebRTCクライアント: RTCPeerConnection
  • ローカルE2Eテスト

オプション機能:

  • コールハングアップ(接続の終了、メディアの停止)
  • グループ通話(マルチユーザー部屋)
  • トークンベースのシンプルな認証

3. 画面共有

  • getDisplayMedia()の使用
  • アーキテクチャとオプション

4. セッション記述プロトコル(SDP)

  • 概要と内容
  • SDPの読み取りと解釈
  • コーデック:
    • オーディオ & ビデオ
    • ネゴシエーションと制御
    • フォールバック戦略

5. WebRTC統計(getStats())

  • 統計の種類
  • 統計の解釈方法
  • ライブビットレート/ジッターチャート
  • 品質適応戦略

6. すべてのトピックは

  • 実践的なユースケース

要求

このコースは、ビデオチャット、画面共有、オーディオストリーミングなどのブラウザベースのリアルタイム通信機能を構築するフロントエンド開発者、フルスタック開発者、技術アーキテクト、エンジニア向けです。参加者はJavaScriptとウェブ技術に関する実用的な知識が必要で、Node.jsやWebSocketベースの通信の経験があることが望ましい。

 14 時間

参加者の人数


参加者1人当たりの料金

お客様の声 (5)

今後のコース

関連カテゴリー