ホーム > プログラミング > ビデオチャットアプリを作る > 11. 独自データの送受信

11. 独自データの送受信



前項までに、リモート映像の表示、リモート音声の再生ができるようになりました。
Web RTCを利用すると、映像ストリームデータ、音声ストリームデータの送受信にとどまらず、独自データの送受信を行うことができます。
Web RTCを利用して独自データを送受信を行うには、DataChannelを作成します。
本項では、カスタムデータの送受信として、テキストデータの送受信を行います。

解説

カスタムデータの送受信ですべきことは、以下です。

準備

05. を実施していない場合は、まず、05. を実施します。

サーバー側の処理

変更なし。

ウェブページ

「public/index.html」ファイルを編集します。

「body」部の「リモート映像表示用の要素とリモート音声再生用の要素」の下に、以下に関するコードを追加します。

クライアント側の処理

「public/client.js」ファイルを編集します。

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

「Send OfferSDP.」ボタンを押すと呼ばれる関数

Offerする側は、OfferSDPを作成する前に、DataChannnelオブジェクトを作成します。作成したDataChannelオブジェクトを保持します。

「UIから呼ばれる関数」コード部の「Send OfferSDP.」ボタンを押すと呼ばれる関数について、DataChannelの作成に関する処理を追加します。

Data channel イベントが発生したときのイベントハンドラ

Offerされる側は、相手との接続が完了すると、DataChannelイベントが発生します。Data channel イベント時には、DataChannelオブジェクトを手にいれることができるので、手に入れたDataChannelオブジェクトを保持します。

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」関数に、「Data channel イベントが発生したときのイベントハンドラ」を追加します。

DataChannelオブジェクトのイベントハンドラの構築関数

作成もしくは手に入れたDataChannelオブジェクトについて、DataChannelに関するイベントハンドラを構築します。

「DataChannel関連の関数」コード部に、「DataChannelオブジェクトのイベントハンドラの構築」関数の定義を追加します。

「Send OfferSDP.」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」コード部に、「Send OfferSDP.」ボタンを押すと呼ばれる関数」の定義を追加します。

コネクションの終了処理関数

「RTCPeerConnection関連の関数」コード部の「コネクションの終了処理」関数の処理を変更します。

DataChannelが開いているか関数

「DataChannel関連の関数」コード部に、「DataChannelが開いているかを返却する」関数の定義を追加します。

動作確認

node でサーバーを起動します。

ブラウザを2つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。



片方のブラウザで「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。

テキストメッセージを送受信することができます。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app11/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app11/index.html

関連ページ

前項目 : 10. Trickle ICE 方式によるシグナリング

次項目 : 12. カメラ(マイク)の停止と再開


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.