連載:NuxtとWebRTCで作るビデオチャット– category –
-
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第11回】少人数通話へ:メッシュ実装と SFU という選択肢
NuxtとWebRTCで作るビデオチャット連載の最終回。宛先付きシグナリングと参加者ごとの接続で最大4人のメッシュ通話を実装し、人数による通信量の増え方を実測。SFUの選択肢と本番までの残作業も整理。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第10回】切断・再接続とエラーハンドリング
NuxtとWebRTCで作るビデオチャット連載の第10回。WebSocketの指数バックオフ再接続、restartIceによる経路の復旧、利用者向けの状態表示を実装。サーバー再起動やTURN障害で検証した結果も紹介。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第9回】MediaRecorder で録画する前に考えること
NuxtとWebRTCで作るビデオチャット連載の第9回。MediaRecorderとisTypeSupportedでブラウザ内の録画を実装し、了承の確認と相手への録画中表示を追加。保存・同意・管理など発注前に決めることも解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第8回】DataChannel でテキストチャット
NuxtとWebRTCで作るビデオチャット連載の第8回。DataChannelをnegotiatedで作り、サーバーを通さずにテキストチャットを送受信。offer衝突を避ける作成タイミング、文字数の数え方、受信データの検証を解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第7回】画面共有
NuxtとWebRTCで作るビデオチャット連載の第7回。getDisplayMediaで画面を取得し、replaceTrackで再交渉なしにカメラ映像と差し替える画面共有を実装。停止ボタンでの自動復帰や対応端末の注意点も解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第6回】STUN/TURN と本番デプロイ:「社外とつながらない」を解消する
NuxtとWebRTCで作るビデオチャット連載の第6回。社外とつながらない原因とTURNの役割を解説し、時間制限付きTURN認証情報を発行するAPI、relayモードでの検証、HTTPS・WebSocketのデプロイ構成を紹介します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第5回】ミュートとカメラオフ
NuxtとWebRTCで作るビデオチャット連載の第5回。track.enabledでマイクのミュートとカメラオフを実装し、シグナリングで状態を相手に伝えて表示します。途中参加者への状態同期や発注時の確認点も解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第4回】ルーム作成と招待リンク、入室前プレビュー
NuxtとWebRTCで作るビデオチャット連載の第4回。UUIDでルームを作成して招待リンクをコピーし、入室前にカメラを確認。定員超過はシグナリングサーバーで断ります。入室管理で発注時に決める点も解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第3回】RTCPeerConnection で1対1通話をつなぐ(offer/answer/ICE)
NuxtとWebRTCで作るビデオチャット連載の第3回。RTCPeerConnectionとPerfect negotiationでoffer/answer/ICE候補を交換し、1対1のビデオ通話をつなぎます。2タブでの確認方法も解説。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第2回】Nitro の WebSocket でシグナリングサーバーを作る
NuxtとWebRTCで作るビデオチャット連載の第2回。Nuxt 4(Nitro v2)の実験的WebSocketでシグナリングサーバーを作り、ルーム単位の中継、メッセージの型共有と検証、ブラウザ側の接続処理を実装します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第1回】カメラとマイクを取得してプレビューし、デバイスを選べるようにする
NuxtとWebRTCで作るビデオチャット連載の第1回。getUserMediaでカメラ・マイクをプレビューし、enumerateDevicesでデバイス選択、許可拒否・未接続・使用中のエラー表示まで実装します。 -
連載:NuxtとWebRTCで作るビデオチャット
【NuxtとWebRTCで作るビデオチャット 第0回】Nuxt 4でビデオチャットの土台を作る:なぜHTTPSが必要なのか
NuxtとWebRTCでビデオチャットを作る連載の第0回。全体像と全12回の目次、Nuxt 4の土台作り、カメラ・マイクにHTTPS(Secure Context)が必要な理由と、LANのスマホで動かない原因・確認方法を解説します。
1
