SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

さくさく作ろう! さっくるのWebRTC入門

ビデオチャットもさくっと作れる! WebRTCによるブラウザ間リアルタイム通信はじめの一歩

さくさく作ろう! さっくるのWebRTC入門 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード videochat.html (3.0 KB)

 本連載では、Web上でリアルタイムコミュニケーションを実現する規格「WebRTC」について、API仕様の解説やライブラリを用いたアプリケーションの作成などを説明していきます。連載第1回となる今回は、簡単なビデオチャットアプリケーションを作成します。APIやその使い方は、実際にアプリケーションで動かしてみると理解が深まります。カメラ付きノートPC、もしくはUSBカメラやマイクなどをご準備の上、試してみてください。

  • X ポスト
  • このエントリーをはてなブックマークに追加

WebRTCとは

 WebRTCとは、ビデオや音声、データをブラウザ間でやり取り可能にする規格です(RTCは「Real-Time Communication」の略)。WebRTCの機能を利用することで、Webサイト上でビデオ・音声チャットやファイルをやり取りできます。

 具体例を見てみましょう。「appear.in」は、WebRTCを利用して開発されたWebアプリケーションで、同じチャットルームに入った人同士でビデオ・音声チャットができます(チャットルームはURLベースで分けられます)。アカウント登録やログインをしなくても使えますから、Chrome、Firefox、OperaのいずれかのWebブラウザでアクセスしてみてください。

WebRTCを利用した「appear.in」の画面
WebRTCを利用した「appear.in」の画面

 

 WebRTCを使えば、このようなリアルタイムコミュニケーションを行うWebアプリケーションを作ることができるのです。

 

WebRTCの通信形態

 WebRTCの特徴の1つは、通信をP2P方式で行う点です。通常のWebサイトでは、ブラウザとサーバの間で通信を行います。また、WebRTCとよく比較される規格に「WebSocket」がありますが、WebSocketでは必ずWebブラウザとサーバ間で通信を行うことになっています。チャットなど、ユーザ同士でデータをやり取りを行うのに使われることもありますが、その場合も必ずサーバを介して通信します。

Webで使用される通信プロトコルの通信形態
Webで使用される通信プロトコルの通信形態

 

 一方、WebRTCはサーバを介さず、P2Pによりユーザ間で直接通信を行うため、レスポンス性がより高い通信を実現できます。また、下位層のプロトコルに(TCPでなく)UDPを使っていることから、品質よりもリアルタイム性を重視した通信方式といえるでしょう。

 

API仕様書

 WebRTCのAPIは、次の2つの仕様として策定されています。

  • WebRTC 1.0: Real-time Communication Between Browsers
  • Media Capture and Streams

 WebRTC 1.0: Real-time Communication Between Browsersは、P2Pでブラウザ間を接続するためのJavaScript API仕様です。仕様はW3Cのサイトで公開されています。WebRTCのAPIの仕様策定はW3Cが、通信プロトコルの仕様策定はIETFが行っているのですが、どちらもまだ策定途中の段階です。

 Media Capture and Streamsは、PCに搭載されているカメラや、USB接続のカメラ・マイクのストリームを取得するための仕様です。仕様はW3Cのサイトで公開されています。こちらもまだ仕様策定中です。

 

ブラウザの対応状況

 ただし、WebRTCのAPIが実装されていないブラウザもあります。本稿執筆時点(2014年10月7日)で実装されているブラウザは次の3つのみです。

  • Chrome
  • Firefox
  • Opera

 SafariやInternet Exprolerはまだ使用することはできず、スマートフォンやタブレットでWebRTCを使用するには、AndroidのChromeを使うしかありません。

ブラウザのWebRTC対応状況(出典:caniuse.com)
ブラウザのWebRTC対応状況(出典:caniuse.com

 

 これは、PC版のChromeとは異なり、iOSのChromeで使用されているエンジンにはiOSアプリ向けに提供されているSafariのエンジンを使われているためです。Appleがその機能を提供していない現在、iOSのChromeでWebRTCを使用することはできません。

 また、Chromeで動いたプログラムがFirefoxやOperaで動くとも限らず、まだブラウザ間での対応状況は差があるというのが現状です。

 とはいえ、着々とWebRTCを使ったWebアプリケーションは増え続けています。 ぜひリアルタイムコミュニケーションを用いたWebアプリ開発にトライしてみましょう。

 

IEに「ORTC API for WebRTC」が実装

 去る10月27日、Internet Explorerに「Object RTC(ORTC)API for WebRTC」が実装されると発表がありました。このAPIについても、連載の中で触れていきたいと思います。ORTC API for WebRTCの仕様はこちらで公開されています。

次のページ
簡易ビデオチャットプログラム

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

さっくる(サックル)

本名は本間 咲来(ほんま さき)。NTTコミュニケーションズ 技術開発部 所属。Webエンジニアとしてサービスの開発やコミュニティ活動や標準化活動などを行う。最近はWebRTCを使ったアプリの開発(WebRTC Chat on SkyWayとか)が中心。html5jスタッフ。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8099 2014/11/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング