その他ニュースサイト・プログ等 WebRTC Standards WebRTC の標準化やプラウザ実装に関するニュースサイト ・ https : //webrtcstandards . info/ webrtcHacks B. 2 コミュニティ ( 英語 ) 。 WebRTC に関する技術的で詳細な記事を掲載しているニュースサイト ( 英語 ) 。 ・ https ://htm15experts. jp/ り、 WebRTC 関連の記事が多い。 日本初の HTML5 技術専門サイト。 NTT コミュニケーションズ株式会社が運営してお HTML5 Experts. ゆ ・ https : //webrtchacks . com/about/ WebRTC に関する製品を開発している株式会社時雨堂の創業者 v 司 untas さんのサイ Twisted Mind WebRTC タグ https ://htm15experts ・ jp/tag/webrtc/ 99 ・ https : //groups ・ google ・ com/group/discuss-webrtc ノートが便利。 WebRTC に関する議論がもっとも活発に行われている MLO プラウザーのリリース discuss-webrtc - Goog 厄 Groups 全世界 B. 2 コミュニティ Gist https ://gist . github. com/voluntas ・ https ://voluntas . github. io/ ト。 WebRTC にまつわる数多くの記事や発表資料が Gist で公開されている。

付録 B WebRTC の理解・活用に役立つ Web ページ集 B. 1 情報サイト 標準仕様・標準化作業グループ 98 ・ https ://webrtc.org/ G 。 ( ) gle が運営している WebRTC プロジェクト情報サイト。 WebRTC project プロジェクトサイト ・ https : //datatracker. ietf .org/wg/rtcweb/ IETF による WebRTC 作業グループ。主にプロトコルまわりの標準化を担当。 ReaI-Time Communication in WEB-browsers (rtcweb) ・ https : //www.w3.org/2011/04/webrtc/ W3C による WebRTC 作業グループ。主にクライアント側 API の標準化を担当。 Web ReaI-Time Communications Working Group

付録 B WebRTC の理解・活用に役立つ Web ページ集 mozilla. dev. media - Goog 厄 Groups 100 ・ https ://webrtc . ecl . ntt . com/ されており、よほどの大規模サービスでなければじゅうぶん無料で利用できる。 営されていたが、 2017 年 9 月から正式サービスを開始。無料利用枠がかなり大きく用意 TURN ・ SFU 各サーバーも提供。 2013 年 12 月から永らくトライアルサービスとして運 ム。 Web/iOS/Android/IoT 機器用 SDK 、画面共有ライプラリーのほか、シグナリング・ NTT コミュニケーションズ株式会社が提供している国産 WebRTC プラットフォー SkyWay プラットフォームサービス B. 3 ソフトウェア・サービス ・ https://webrtc—jp. slack. com WebRTC の使い方などについて日本語で質間できる Slack0 WebRTC-JP 過去の動画 https://goo ・ g1/BjEhku ・ https ://atnd.org/groups/webrtc して活動中。 は東京で、 2017 年 8 月からは大阪でも開催を開始。筆者は大阪側の言い出しっぺ担当と 2 ヶ月に 1 回程度開催されている WebRTC に特化した勉強会。 2014 年 4 月からまず WebRTC Meetup 日本国内 ・ https ://groups ・ google.com/group/mozilla.dev.media れている NILO Firefox における、 WebRTC を含むメディア系 API に関するアナウンスや議論が行わ

はじめに るのではないか。そう思った私は早速 WebRTC の使い方を勉強しはじめ、数日でプロト タイプを組み上げました。試しにフレンド同士で実際に使いながら遊んでみると、これが 思った以上に楽しい。さらに改良を加え、「イカデンワ」という名前で公開、 3 したところ、 予想を超える大きな反響を呼び、大変多くの方にご利用いただけるサービスとなったので す。それ以来、私は WebRTC の魅力に取りつかれました。 私は 2015 年末に TechBooster 、 4 の同人誌「 JavaScriptoon2*5 」で WebRTC の紹介記 事を執筆しました。この記事はありがたいことに各所から大変ご好評をいただきました が、執筆から時が経ち、今となっては時代遅れな記述が目立ちます。そこでこの記事をも とに、現在の仕様に沿うように大幅に加筆・修正し、一冊の本として再構成することにし ました。そうしてできたのが本書です。 本書はあくまでもタイトルどおり「わか ( った気がす ) る」ことを目標としており、わ かりやすさを優先するために必要以上の説明を避けている場合もあることをお断りしてお きます。 WebRTC の世界は広すぎる。 本書の対象範囲 本書で扱う内容は次のとおりです。 「 WebRTC とは何か」「何ができるか」という基本的な知識 ・ WebRTC が動作するしくみ ・ WebRTC を利用した Web アプリケーションの実装方法 WebRTC の動作に必要なサーバーの構築方法 ・ WebRTC に関連する Web プラウザーの挙動 次の内容については、本書では扱いません。 WebRTC の各機能についての少し掘り下げた知識 WebRTC で採用されている各プロトコルの詳細な仕様 Web プラウザーやサーバーの内部実装 ・ WebRTC を利用したネイテイプアプリケーションの実装方法 * 3 ちなみにこの名前は、 をモジッたものです。 * 4 技術系同人サークル。 * 5 2015 年 12 月 31 日、 ケータイ (PHS) なのに固定電話の形をしているという伝説の端末「イエデンワ」 https : //ikadenwa. ink/ http://techbooster.org/ C89 にて頒布。 https : //booth. pm/ja/items/178227 3

1 .5 最初の一歩 1 .5 最初の一歩 いきましよう。 ORTC 最初の説明は一こまでです。次章から WebRTC の各機能についてひとつずつ紐解いて 17 。具体的に何がどう「イケてない」のかは、後々言及します。 とは確かです。 しかしながら、多くの開発者にとってはあまり気にする必要はないものであるこ 一般的な WebRTC の API を実装しています。 際、 Edge など一部のソフトは低レイヤー API として ORTC を実装し、その上に あるいは低レイヤーな仕様としてのみ生き残るという可能性も考えられます。実 つつ、それ自身は時代の徒花として消えていくのかもしれません。 れています。 ORTC は、 WebRTC をより良いものにしたいという目的を達成し WebRTC の次期バージョンは、 ORTC の考え方を一部汲んだものになるといわ 及していません。 結局、 ORTC は対応したプラウザーが Edge だけだったこともあり、ほとんど普 けないことが多くなるため、難解で理解しにくいともいえます。 御を行えることです。その反面、アプリケーション側で面倒を見てやらないとい ORTC の特徴は、 WebRTC よりも API のレイヤーが低く、よりきめ細やかな制 れました。 するために新たなコミュニティーグループを発足させ、そこで ORTC が生み出さ と不満を表明しました % 彼と彼に賛同する人たちは、 " イケてない仕様 " を改善 業に関わっていたある技術者が、 WebRTC のとある仕様について「イケてない」 ORTC は、 WebRTC から枝分かれして生まれた技術です。 WebRTC の標準化作 対応していた ORTC について簡単に説明しておきましよう。 本文中では名前だけ登場しましたが、 Microsoft Edge が WebRTC よりも前から

第 8 章開発に便利な Tips & Tricks 8.2 プラウザーの内部情報を覗き見する Web アプリケーションのデバッグでは、 console. 10g ( ) を利用して、ある時点での 変数の値などをコンソールに出力することがよく行われます。しかし WebRTC では、 JavaScript から参照できる情報だけでは問題の解決に至らないことがあります。 たとえば、通信経路候補のうちどれが実際に採用されているか、送受信中のストリーム のビットレートやラグなど、 JavaScript から参照できない情報が多く存在しています。 Firefox と Chrome には、このようなプラウザーの内部に隠蔽されている情報を含め、 WebRTC 関連のログを確認できる WebRTC lnternals というべージが用意されてい こではそのページの表示方法を紹介し、それぞれの表示内容を比較してみます。 WebRTC rn 引 s ・ about : webrtc Firefox の場合 ます。 ( ① about:webrtc セッション統計 CIearHistory ーベージを保存デバッグモードを開を一」 - 検索 AEC コグ記録を開始 t 51 ] ht 中 : 川 st : 98a 02 : : 12 GMT + 080 ( お マ詳を表示 t 301 ht ゆ : 川 host : 98 砌勣 : 52 : 35 ( お月 詳を表示 接続ログ c 厄部 Log マログを表示 △図 8.6 Firefox の WebRTC lnternals ペー Firefox の WebRTC lnternals では、次のような情報を見ることができます。 ICE 統計 通信経路候補の一覧と試行結果、どれが採用されたか。 88 シ

第 8 章 開発に便利な Tips & Tricks 圧 1 プラウザーの挙動を変える くと便利なことをまとめて紹介します。 本書の最後に、 WebRTC を利用した Web アプリケーションを開発する上で知ってお 82 WebRTC のデバッグログの出力先を設定できます。 media. webrtc. debug.log_file true にすると TURN サーバー経由でないと通信できないようになります。 media. peerconnection. ice. proxy only / 同 . 「 e ね y ー 0 ⅲ y されるようになります。 true にするとデバイスの使用許可を求めるダイアログが表示されず、自動的に許可 media. navigator.permission. disabled こではそのうちいくっかを抜粋して紹介します。 集まっています。設定できる項目がかなり多く、すべてを紹介することはできないので、 etusermedia 、 media. navigator 、 media. peerconnection 、 media. webrtc あたりに Firefox では about :config で挙動を変更できます。 WebRTC 関連の項目は media ・ g Firefox の場合 注意して利用するようにしてください。 れています。設定項目によってはプラウザーの挙動が不安定になる恐れもあるので、十分 項目が用意されています。その中には WebRTC に関連した挙動を変更できる項目も含ま プラウザーには一般的な設定画面で変更できる設定項目以外に開発者向けの高度な設定

このボタンを押すと、 8.3 ローカルサーバーに外部から接続できるようにする (HTTPS 対応 ) ージが起動します。このページが表示されている状 テノヾック、ノ 態で getUserMedia でメディアストリームを取得したり WebRTC で通信を行ったりする と、統計情報が表示されます。なお、デバイスの使用許可は必ず「常に許可」するように してください。一時的な許可では統計情報を取得できず、動作しません。 十 WebRTC E 対書 n 5 、十一①ー張第能 ( we TC E 0 「「は引 moz - e 対印・に 龕 ト Create Dump GetUserMed ia Req 5t5 http引″ d9314 ( 56. ap. れ q 「 Ok.io / [hu1dhd1it3-Ol h ps : / / d9314 ( 56. 叩 . ng 「 ok. io /. (object Objectl, undefined 石 m ・ 2017 / 10 / 7 18 : 20 : 16 2017 / 10 / 7 1 & 20 : 16 2017 / 10 / 7 1820 : 16 2017 / 10 / 7 1 & 20 : 16 2017 / 10 / 7 18 : 20 : 16 201 〃 10 / 7 18 : 20 : 16 2017 / 10 / 7 1820 : 16 2017 / 10 / 7 18 : 20 : 16 2017 / 10 / 7 1820 : 16 2017 / 10 / 7 18 : 20 : 16 E ・ n 【 ト addTrack onnegotiationneeded ト addTrack 5 獸 Remo 【を De 、 ( ⅱ p ⅱ on addlceCandidate (host) ト ontrack ト Ontrack ト Onaddstream 0 れ引 gnaling 、い t を ( hang ~ ト、に一 Rem 20e5 ( ⅱ p 【 iOnOnSu ( ( es 、 △図 8.14 WebRTC Externals の表示 (Firefox) WebRTC ExternaIs は、 WebRTC に関する統計情報を取得する JavaScript を Web ページ内に埋め込むことで動作しています。そのため、 WebRTC を使用するべージを表 示するよりも前にデバッグページを起動しておく必要があります。デバッグページを起 動する前に表示されていたページについては統計情報を取得できないので注意してくだ 0 8.3 ローカルサーバーに外部から接続できるようにする (HTTPS 対応 ) WebRTC に直接関係するものではありませんが、開発を行う上で大変便利なサービス を紹介します。 たとえば手元のマシンで WebRTC を利用した Web アプリの開発を行っていて、開発中 のアプリを実行できるサーバーが起動しているとしましよう。このマシンでアプリを実行 する場合、アクセスする URL は http://localhost:xxxx/になります。 Chrome およ び safari では HTTPS のページでないと getUserMedia を利用できませんが、 localhost だけは例外として実行できるのでこの場合は間題ありません。 93

第 8 章開発に便利な Tips & Tricks Chrome の WebRTC rn s を Firefox と Edge で使う Chrome の高機能な WebRTC lnternals とほぼ同様のものを利用できるようにする、そ の名も WebRTC ExternaIs という拡張機能があります。オープンソース (MIT ライ センス ) で開発されており、 Firefox と Edge 、さらには Chrome にも、 4 対応しています。 Firefox では Firefox 向けアドオンのページ、 5 からインストールできますが、 Edge では ストアで公開されていないため、いわゆる " 野良拡張 " としてインストールしなければな りません。野良拡張を読み込むには、 about:flags で「拡張機能の開発者向け機能を有効 にする ( これによりデバイスが危険にさらされる可能性があります ) 」にチェックを人れ、 一度再起動してください。 ソースコードは GitHub で公開されています。次のコマンドを実行して手元のマシンに clone しておきます。 $ git clone https ://github.com/fippo/webrtc-externals Edge の画面右上のメニューから「拡張機能」を選択し、「拡張機能を読み込む」ボタン をクリックするとフォルダー選択ダイアログが表示されます。このダイアログで先ほど clone したフォルダーを選択すればインストール完了です。 また、 Chrome でも同様に。野良拡張 " のインストール手順でインストールできます。 使用方法 プラウザーの右上に図 8.13 のようなボタンが表示されています。 らない場合は、メニューの中に隠れているかもしれません。 もしボタンが見つか 暑 0 △図 8.13 WebRTC ExternaIs の起動ボタン (Firefox) * 4 もちろん、あまり使う意味はありませんが。 * 5 https ://addons.mozilla.org/ja/firefox/addon/webrtc¯externals/ 92

8.1 プラウザーの挙動を変える 0 : 00 : 40 : 500 810 図 8.2 Ch 「 ome のテストバターン映像 Edge の場合 Edge では about:flags で挙動を変更できます。現在は、 WebRTC 関連で指定できる 項目はほとんどありません。 WebRTC 接続でローカル旧アドレスを隠す ローカル IP アドレスが通信経路候補として発見されなくなります。同一 LAN 内 の端末同士でも、 ICE を使って外部と通信できるかを確認するために使えます。 Safari の場合 Safari の場合は開発メニューから挙動を変更できます。開発メニューが表示されていな い場合は、「 Safari 」→「環境設定・・・」と進み、「詳細」タブの下にある「メニューバ " 開発 " メニューを表示」にチェックを人れてください。 . 、、 -- ロウインドウヘルプ ページをこのアプリケーションで開く ユーザ工ージェント セキュリティ保護されていないサイトでのメディアキャプチャを許可 ℃ E 候補の制限を無効にする ノレガシ—WebRTC A 円を有効にする 擬キャプチャデバイスを使用 WebRTC スマート検索フィールドからの J aSc 「 i 可を許可 AppIeEvent からの JavaScript を許可 リモートオートメーションを許可 未署名の機能拡張を許可 Safari TechnoIogy Preview を入手 △図 8.3 Safari の開発メニューで設定できる WebRTC 関連の項目 85