お問い合わせ

コース概要

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

1. navigator.permissionsを用いたブラウザ権限設定

  • ハードウェアへのアクセス:
    • ウェブカメラ
    • マイク
  • 任意設定可能な権限:
    • 地理位置情報取得
    • 通知表示
    • クリップボード読み書き
  • 権限照会方法および現状確認
  • 利用制限事項と各ブラウザ間の互換性について

2. navigator.mediaDevicesによるメディアデバイス情報取得

  • 接続済みデバイスの列挙処理
  • デバイス変更時の対応方法

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

  • API利用法:
    • navigator.permissions.query()
    • navigator.mediaDevices.enumerateDevices()
    • getUserMedia()
  • Safari用のフォールバック対応策

4. メディアデバイスの初期化と管理

  • デバイス初期化手順: getUserMedia(constraints)
  • メディア制約の指定方法
  • ストリーム開始および停止処理の仕方
  • 接続中に変更される機器への対応法

5. MediaRecorderを用いた録画機能実装

  • ストリーム配信・記録の開始と停止方法
  • .webm形式ファイルとして保存する手順
  • リアルタイム波形プレビューの作成法

オプション機能例:

  • ScriptProcessorNodeを利用した.wav形式への保存処理
  • 音声の周波数スペクトラム視覚化手法
  • 音量を示すデシベル値表示バー構築法
  • webkitSpeechRecognitionによる音声認識実装法

ピア間接続機能の構築

1. シグナリングサーバーの選定と設定

  • 双方向通信用チャネルの種類:
    • WebSocket
    • Socket.io
    • SignalR
  • メッセージ構造の設計方法
  • 簡略化版WebRTCクライアントの作成法
  • 完全なシグナリングフローの実装手順

2. WebRTCによるビデオ通話機能構築

  • 基本アーキテクチャ: Node.js + wsの組み合わせ
  • クライアント側実装用コンポーネント: RTCPeerConnectionの活用方法
  • ローカル環境でのエンドツーエンドテスト手法

任意追加機能例:

  • 通話終了処理(接続切断・メディア停止)
  • グループ通話機能構築法(複数ユーザ対応の部屋設計)
  • トークンベース認証実装手法

3. 画面共有機能の導入方法

  • getDisplayMedia()を活用した対応法
  • システム設計および設定オプション一覧

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

  • SDPの基本仕様と構成内容解説
  • SDP情報の読み取りおよび解釈方法
  • コーデック機能:<
    • 音声・映像データ変換に関する知識
    • ネゴシエーション手順と管理手法
    • フォールバック戦略例示

5. getStats()を用いた通信統計情報収集

  • 利用可能な各種統計データの説明
  • 統計値読み解き方と分析手法
  • リアルタイムビットレート・ジッター表示チャート作成法
  • ネットワーク品質に応じた動的調整戦略の例示

6. 上記全てのテーマについては

  • 実践型演習も組み込まれています

要求

本研修は、ビデオチャットや画面共有、音声ストリーミングなどブラウザ上でのリアルタイム通信機能を構築するフロントエンド開発者・フルスタック開発者、技術アーキテクト、およびエンジニア向けです。受講者にはJavaScriptやウェブ技術に関する基礎知識が求められますが、Node.jsおよびWebSocketベースの通信経験があるとなお良いでしょう。

 14 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (3)

今後のコース

関連カテゴリー