お問い合わせを送信いただきありがとうございます!当社のスタッフがすぐにご連絡いたします。
予約を送信いただきありがとうございます!当社のスタッフがすぐにご連絡いたします。
コース概要
メディアデバイスの取り扱い
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)
各技術的なレッスンには、概念を確実に理解するための複数の実践的な演習が含まれていました。
Andrei-Calin Bajea
コース - OWASP Top 10 2025
機械翻訳