WebエンジニアがWebRTCに関わるようになって学んだこと

はじめに

この記事は、WebRTC Advent Calendar 2017 13日目の記事です。

WebRTCは主にP2Pを用いた通信で相手とやりとりをします。この記事では、ApacheとPHPでWebアプリケーションを作っていた時のレベルの知識からWebRTCをやることになり、仕組みを学ぶ中で勉強した内容をまとめます。
※この記事はWebRTC初心者向けの記事になっています。

プロトコル

Apacheでサーバーを立てる場合、ほぼプロトコル部分に手を入れることはないと思います。クライアントはHTTPセッションによってインターネットを通ってサーバーにアクセスします。
TCPはHTTPで多く（ほぼ全てで）使用されている通信で、下記のような特徴があります。

Transmission Control Protocol(TCP)

• 3ウェイハンドシェイクによる通信の確立
• 通信が途切れた場合に再送する
• 順序を守って送信する

WebRTCは通信にUDPを採用しています（TCPも使用可能です）
UDPの特徴は以下の通りです。

User Datagram Protocol(UDP)

• 接続は確立しない
• 通信が保証されない
• とにかくデータを送信するだけ

UDPはいわゆる必要最低限の情報しか持たずにデータ通信を行うプロトコルです。
UDPは通信を確立する仕組みや接続元を確認するような仕組みはありませんが、その分高速でリアルタイム通信に向いています。
結果、遅延の少ないビデオ通話等が実現できています。

コーデック

通常のWebサイトで動画を扱うかはWebサイトにもよりますが、使用した場合にはサーバーにmp4(mp3)ファイルを置くかyoutubeのURLをvideoタグに入れるくらいだと思います。
HTMLはテキストファイルの通信になりますので、Webサイトだけでは映像や音声コーデックに触れる機会は少ないと思います。

ブラウザではgetUserMediaを使用することで、端末のマイク・カメラからストリームが取得できます。
WebRTCを使うことでクライアントPC同士のP2P通信が実現できますが、送受信するデータは基本的になんでも送信可能です。
getUserMediaで取得したストリームをやりとりすることで、ビデオ通話の実現が可能になります。
その際、コーデックは下記となります。（映像は選択可能です）

映像

• V8
• V9
• H.264

音声

• Opus

ただし、SafariはH.264にしか対応しておりません。

まとめ

WebRTCはブラウザで実装された技術ですが、内部を知ることで広い分野の知識を学ぶことができます。
ここでは触れなかった技術でもSDPやDTLSなどまだまだ詳しく説明できないような技術もたくさんあります。
ぜひ、一度WebRTCに触れてみてください。
興味を持った方は、WebRTC Meetupなど外部の勉強会に参加してみてください！