APIを介してリアルタイムコミュニケーション機能を実現するためのAPIです。WebRTCでは、P2Pのコネクション確立からデータ通信を行うための仕様が定義されています。よって、WebRTCを使うとプラグイン無しで、双方向のリアルタイムコミュニケーション機能を必要とするコンテンツが容易に開発できます。現状は、W3Cでドラフトが公開されています。http://www.w3.org/TR/webrtc/WebRTCはいくつかの関連するAPIがあります。ドラフトなのでWebRTCに対応ブラウザは、下記のようになっています。12WebRTCの使い方まずはWebRTCを接続手順を説明します。最初にベンダープレフィクスのついているクラスがいくつかあるので、使えるかどうか確認します。window.RTCIceCandidate);次に接続用のwindow.RTCPeerConnectionを生成します。今回ローカル接続なので、引数は無しです。//受信側ICEの候補が取得できるイベントをハンドリングしておきます。ICEの候補が見つかったら受信側に設定します。}}受信側にもICEの候補が取得できるイベントをハンドリングしておきます。ICEの候補が見つかったら送信側に設定します。}}次に受信側は、ストリームを受け取った時のハンドリングを行います。URL.createObjectURL(event.stream);}次に送信側は、事前に取得しておいたMediaStreamを設定します。pc1.addStream(localMediaStream);これで準備が整ったので、オファーを作成して受信側に設定します。受信側は、オファーに応答するためのアンサーを作成して送信側に設定します。pc1.setRemoteDescription(description);}上記で説明した接続するまでのソースです。この処理の前にMediaStreamを取得しておく必要があります。pc1.setRemoteDescription(description);}ライブデモローカルのみでRTCPeerConnectionを試すデモです。ライブデモサンプル:ライブチャットWebRTCをつかったライブチャットを作成してみましょう。事前準備WebRTCは、インターネット超えたP2P接続を行うためにNAT越えするためのサーバが必要になります。これは、P2P通信を開始するためには、お互いの端末のグローバルアドレスを知る必要があるからです。)と呼ばれる仕組みです。ICEは、STUNやTURNなどのNAT越えの手順をまとめたものです。ICEで取得したグローバルIPアドレスとポート番号を通信するホスト間で交換するとNAT越えすることが可能です。STUNサーバやTURNサーバは、自作できますが、今回は、STUNサーバーとして、googleが公開しているサーバーを利用します。STUNサーバから受け取ったICE情報を受け渡しするためのWebアプリケーションが必要になります。今後チャットサーバと呼びます。オファー側まずは、googleが公開しているSTUNサーバーを定義しておきます。]};次にピアコネクション間のデータチャンネルを使用する設定を定義しておきます。]};チャットを開始する前に前回の解説したMediaStreamを取得しておきます。error);}MediaStreamの取得成功のコールバックでWebRTCの設定を行います。1.ピアコネクションの生成2.メッセージ用のDataChannelの生成3.オファーを生成します。//3}ピアコネクションの生成する引数に、STUNサーバーを定義とデータチャンネルを使用する設定を指定します。peerCon.addStream(localMediaStream);}オファーが生成できたらピアコネクションのsetLocalDescriptionにオファーを設定しておきます。それが成功したら、チャットサーバにオファーを送信します。error);}アンサーが返ってきたらピアコネクションのsetRemoteDescriptionにアンサーを設定しておきます。これでハンドシェイクが完了します。RTCSessionDescription(answer));}アンサー側アンサー側も同様にMediaStreamの取得成功のコールバックでWebRTCのピアコネクションの生成しておきます。オファーを受け取るとピアコネクションのsetRemoteDescriptionにオファーを設定しておきます。オファーを設定したらその応答となるアンサーを生成します。error);}アンサーの生成が成功したらピアコネクションのsetLocalDescriptionにオファーを設定しておきます。error);}データ送受信データ送受信するためには、データチャンネルを取得します。peerCon.createDataChannel(...);送信は、データチャンネルのsendメソッドつかって送信します。sendChannel.send(value);受信は、データチャンネルのonmessageのイベントで取得します。);};ライブチャットデモ名称とルーム名を入れて参加ボタンをクリックしてください。1ルームにつき2人までは入れます。ライブチャットデモまとめ今回は、WebRTCを使ってリアルタイムコミュニケーション機能をつかってみました。全てのブラウザでは使えませんが、サーバなしでP2P機能を使えるとなるとビデオ会議室にデータ交換などに応用してみてはいかがでしょうか。WebRTCのAPIは、複雑なのでライブラリを使うことをお勧めします。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。