CodeIQ MAGAZINECodeIQ MAGAZINE

リラックスして楽しみながらWebRTCが学べる「WebRTC Meetup Tokyo」 #webrtcjp #webrtc

2014.05.15 Category:勉強会・イベント Tag: , ,

  • 22
  • このエントリーをはてなブックマークに追加
main1

WebRTCに特化した勉強会「WebRTC Meetup Tokyo #1」が「21cafe」で開催された。参加人数は定員最大の40人。

CodeIQからはビールやおつまみの差し入れもし、非常になごやかかつリラックスした雰囲気の中で行われた。参加者たちは気負うことなく、WebRTCを習得しようという熱気に包まれていた。
by 馬場美由紀 (CodeIQ中の人)

プログラマだけではない。WebRTCに関心のある人なら誰でも参加できる

「この勉強会のターゲットはプログラマだが、Webデザイナーやサービスを考える人など限定はない。これからは1カ月もしくは2カ月に1回の割合で同勉強会を開催していく予定。このような集まりをきっかけに、日本でWebRTCを流行らせていきたい」
同勉強会の主催者である仲裕介氏が冒頭でこう呼びかけ、勉強会はスタートした。

仲氏はNTTコミュニケーションズに所属するWebエンジニア。Web技術者向けの情報メディア「HTML5 Experts.jp」では副編集長として情報発信を行う一方、コミュニティ活動も積極的に行っている。

今回の会場を提供してくれたのは、渋谷にある 「21cafe」。21cafeはIT・Web業界で働くエンジニアとWebクリエイターのための無料のイベントスペースだ。

「広告などはしていないので、ぜひ口コミで広めて欲しい」と21cafeの運営事務局平沢さん。

WebRTCとは。P2P通信を確立するには

ハンズオンの先生役を務めたのは、インフォコムのがねこまさし氏。
「今日はシグナリングの話だけ。Peer-to-Peerがつながる前の話。UserMediaやSTUN/TURNなどの話はなし。地味な話ですが、これがわかればWebRTCがわかります」。こう言い切りハンズオンは始まった。

今回のハンズオンには元ネタがある。がねこ氏がHTML5Experts.jpに書いた以下の記事だ。

「既に試した方は同じ話なので、聞かなくて結構です」と参加者の笑いを誘い、和気あいあいとした雰囲気の中、WebRTCについて簡単な解説を始めた。

参加者のほとんどはWebRTCに触れたことのある人だったが、中にはWebRTCに関心はあるが触れたことのない人もいたからだ。

「WebRTCは映像や音声などリアルタイムに取得されたデータをブラウザ間で送受信する仕組み。それを担当するのがRTCPeerConnectionというクラスである。このRTCPeerConnectionで使用するのはUDP/IP。また通信のリアルタイム性を重視しており、UDPのポートは動的に割り振られ、JavaScriptから決めることができない」

続いてがねこ氏が説明したのは、Peer-to-Peer(P2P)通信が確立するまでについて。P2P通信を行うには相手のIPアドレスを知る必要があること。

そして動的に割り振られるUDPのポート番号も知る必要があること。WebRTCではそれらの情報をやり取りするために、Session Description Protocol(SDP)の交換を行う。

これにより各エンドポイント(ブラウザ)の情報を示すのだ。その情報とは、例えばメディアの種類(音声、映像)、メディアの形式(コーデック)、データ転送プロトコル、通信で使用する帯域などである。ちなみにSDPは「WebRTC専用ではなく、VoIPなどで利用されている」とがねこ氏は言う。

またInteractive Connectivity Establishment (ICE)の交換も行う。これも「WebRTC専用ではない」とがねこ氏。これは途中経路の情報を示すためで、複数ある場合も多いという。

WebRTC通信を手動でつなげる

このようなP2P通信を確立するまでの情報のやり取りが「シグナリング」である。

「ここまでは前置きです。これからが本格的なハンズオンの始まりです。手動でWebRTC通信をつなげみたい。まずは私がやってみます」と、自身でつなげる様を披露した。がねこ氏のやり方を見た後は、本格的なハンズオンが始まった。

ネタ元の記事にURLをスクリーンに示したがねこ氏は、「『手動シグナリングの改良版』のソースを自分のマシンにコピーして、Chromeでアクセスしてください」と声をかける。WebRTC通信をつなげるには、Webサーバーが必要なのだが、参加者の中にはすでにこの準備段階で戸惑う人も。そのあたりのサポートはがねこ氏に加え、主催者の仲氏も行っていた。

起動した2つのChromeウィンドウで「Start video」というボタンを押し、カメラ(UserMedia)にアクセスしている状態にしたあとは、各SDPのやり取りを左、右のウィンドウにコピー&ペーストしていくのである。

具体的にはまず左のウィンドウで「Connect」ボタンを押し、SDPの文字列を生成し、右のウィンドウにペースト。次に[Receive SDP]ボタンを押し、SDPの文字列を生成する。それを左のテキストエリアにペーストし、[Receive SDP]ボタンを押す。これでSDPのやり取りは完了である。

「ここまででわからないところのある人」と問いかけたところ、何人かから質問が飛びだした。中には「PeerConnectionに対してCreateOfferすると、そこで戻ってくるアクセスにoffer sdpが入ってくるのに、それをsetLocalDescriptionでもう一度セットしますよね。なんでもらったものなのにくれた人に戻す必要があるのか」という鋭い質問も飛び出した。

それに対しては仲氏が「SDPを生成する処理とデベロッパ側でSDPの内容を編集してコントロールするために処理を分けているだけでは」と回答。またある参加者も「SDPを書き換えたいだけではないかと思う。例えばオーディオのエンコードコーディックを変えることなどを想定してのでは」と付け加えた。

「とはいえ現状、文字列を書き換えるのは至難の業。テキストをパースして書き換えるなど、W3Cの標準化の中では将来的にはJSONなどでやれるようにしたいという話があるようだ」と仲氏。

ICE Candidateのやり取りも手動で

ハンズオンは後半のICE Candidateのやり取りに。「これはPeerConnection側から非同期にどんどんルートが発生して渡されていく。

JavaScript側から勝手に送りつけられるので、イベントハンドラを指定してあげる必要がある」とがねこ氏。自らやり方を披露しながら、どういう風にやり取りが行われるか解説。

そして参加者にもSDPのときと同様、2つのウィンドウでテキストを生成させ、手動でコピー&ペーストとして、やり取りを完成させていく作業を進行させていった(やり取りの作成の方法は、元記事で詳しく解説しているのでそちらを参照のこと)。

「手動シグナリングはなぜかうまくいかないケースがある。直近のケースでは7台中4台はうまくいったが、3台はうまくいかなかった。でもその理由はわかっていない。すべてのコピー&ペーストが終わると通信を始めるはずだが、成功率はどのくらいでしょう。通信がうまくいった人はいますか?」とがねこ氏は声をかけると、今回はほとんどの人がつながった模様。中には失敗した人もいるようだが、「原因がわかっていないので、探ってくれると嬉しい」とがねこ氏は続ける。

また今回は複数経路分まとめて渡すという方法を採ったが、本来、ICE Candidateは1本ずつやり取りされる。そこで参加者から「ICE Candidateがどのくらいの本数、やり取りが終わったことがわかるのか」と質問が出た。

その問いに仲氏は「ブラウザの実装上はどんどんつながるところから試していく」と回答すると「ということは送る順番が重要だとことですか」という質問が続いた。

それに対しても「ブラウザはコストの低いところから送るはず」と答えた後、Trickle ICEというICEのやり取りを高速化するための仕様を紹介。「この仕様はChromeなどには対応しているよう。IETFに仕様があるので、興味のある人はぜひ、調べて欲しい」と仲氏。

シグナリングサーバーを作成し、WebRTC通信を自動化しよう

ここで手動編は終了し、シグナリングサーバー編に。「手動編を体験したみなさんは、シグナリングサーバーの必要性が実感したと思うが、改めてここでシグナリングサーバーの必要性を整理したい」

こう語ったがねこ氏。シグナリングサーバーはお互いのIPアドレスを知らないブラウザ同士が情報を受け渡すには、双方がIPアドレスを知っている仲介役が必要である。それがシグナリングサーバーというわけだ。

「今回はNode.jsとSocket.IOを使うので、それらをインストール。それができればサーバー側のプログラムを、冒頭で紹介した記事「WebRTC初心者でも簡単にできる!Node.jsで仲介(シグナリング)を作ってみよう」からコピーして持ってきてください」というがねこ氏の言葉で、参加者もNode.jsやSocket.IOをインストールする。

その後のSocket.IOの接続、通信処理をJavaScriptに追加するという処理の方法についても、画面にコードを映して解説。「ここが一番の山場。見えにくい人はWebの記事を参照して頑張って」とエールを送っていた。苦戦する人も多く、中には諦めた人も…。そんなとき次のような質問が。

「SDPを受け取ったときに、受け取った側がRTCSessionDescriptionCを返す。そこで何が変わっているのか」

この問いに仲氏は「将来的にあそこで何かを書き換えるつもりなんだろうと思う。今はそういう風にやるしかない。ちなみに後から出てくるPeerJSはこれを簡単にできるようなライブラリなので、この辺の処理がわかった上でPeerJSを使うとよりその真のありがたさがわかると思う」と回答していた。

SDPのやり取りが自動化されたところで、次はSDP/ICE Candidateを送る部分を変更する作業。これも手動の時に記述していたものを全部自動で遅れるよう、最後にsocket.json.send(cadidate)を付け足すという作業を行ったところですべて終了。あとは実際に動かしてみるだけだが、うまくいかない人も多かったようだ。

最後にWebRTCに注目する理由(特別な仕組みは不要で誰でも参加できる市場であること。専用アプリなしで会話できるというユーザーメリット。完全にプログラマブル部品として利用可能という事業者メリット。製品/サービスに組み込んで利用できること)を披露し、がねこ氏によるハンズオンは終了した。

WebRTCを使った技術の無駄遣いチャット!? うしちゃん(仮)

30分の休憩の後、各人10分のLTが始まった。最初のLTとして登壇したのはNTTコミュニケーションズ 小松健作氏。タイトルの「うしちゃん(仮)」とは、SkyWayで開発した多人数ビデオチャットサービスのこと。

「開発コードには必ずかえるをつけることになっており、多人数ビデオチャットの開発コードはうしがえるで、社内ではうしちゃんと呼んでいる」と小松氏は説明する。じつはうしちゃんはWebRTCを使った技術の無駄遣いチャットとして、海外メディアでも取り上げられたことがあるそう。

うしちゃんは認証することなく、簡単に使えるのが特長だということで、画面にチャットに入るためのURLを披露し、「8人まで入れるので早い者勝ち」と参加者にうしちゃんへの参加を促した。実際のサービスを見せたところで今日の本題を発表。それは「マルチパーティのWebRTCアプリを作るときのポイント」の紹介である。

同サービスが使えるのはWebRTCに対応しているChromeとopera。もう一つWebRTCに対応しているブラウザとしてFirefoxがあるが、実は同サービスは使えないという。その理由は映像ビットレートの問題にある。ビデオのサイズはデフォルトだとVGAサイズ(640×480ピクセル)。しかしChromeの最大ビットレートは2Mbpsになるという。

「8人でフルメッシュだと最大で56ストリーム、各2Mbpsとすると112Mbpsになってしまう」のだ。テレビ東京のワールドビジネスサテライトの「トレンドたまご(トレたま)」で同サービスは紹介された際、外からつなげたところ、映像がカタカタしてすごく悲しかったので、調べたところ、先の問題が「発覚した」と小松氏は振り返る。

そこでビデオのクオリティを下げることに。現在はフレームレートも15/secに下げたことで、安定しているという。このようなビットレートを減らすための処理にFirefoxは対応していないから使えないというのだ。

ほかにもハウリングを抑制するような処理をしてメディアストリームをつくるということにもFirefoxは対応していないなど、理由はあるそう。「ぜひ、このサービスを使ってください」と会場に呼びかけ、小松氏のLTは終了した。

プライバシー保護を考慮したビデオチャット「Secret Talk」

次のLTはハンズオンに引き続いて登壇した、がねこ氏。タイトルは「Secret Talkをつくってみた」。Secret Talkとは、プライバシー保護を考慮したビデオチャット。顔を隠したり、顔以外を隠したりすることができるというサービスだ。

「これはシリアスなモノではなくネタです」とがねこ氏は強調する。このようなサービスが生まれたのは、社内でデモをしたときに要望があったからだそう。用途としては「在宅勤務を想定している」のだそうだ。簡単にサービスの概要を紹介した後、デモを実施しながら、その仕組みをスライドでも紹介。

同サービスは隠したい部分をマウスで領域指定し、WebSocket経由で相手に伝え、相手側でその情報を合成する。顔以外を隠したいときは、領域と反転状態を相手に伝えることで対応する。マスクの描画には、「最初はCanvasを使おうと思ったが、マウスイベントがうまくとれなかったので断念した」と言う。

そこで今はdivを使い、<video>タグの上に無理矢理<div>タグを重ねているという。ただ、この方法だと顔以外をマスクするのは面倒くさいので、borderを個別に指定することで<div>タグ1つで指定できるようにしているという。

また同サービスでは顔の位置の自動的に検出し追尾できるようにしているという。これもやり方についても参考となるURLなどを紹介した後、デモを実施。さらに声を変える加工についてもチャレンジ。

これを実現するために採用したのがWebAudio API。デモを実施したが、このときはうまくいかなかった。最後に仕組みを簡単に説明してがねこ氏のLTは終了した。

CodeIQの問題でPeerJSの便利さを学ぶ「PeerJS3分クッキング」

3人目のLTは岩瀬氏による「PeerJS3分クッキング(CodeIQ出題問題解答編)」。タイトルにもあるように、PeerJSとは何かという解説に加え、今回のビール&おつまみスポンサーも務めたCodeIQ問題の解答と解説も行われた。岩瀬氏は今年月まで日本最大級のVoIPの中の人だったが、4月からWebエンジニアとして業務に従事している。

PeerJSとはWebRTCの開発を便利にするライブラリの一つだ。「WebRTCのコードは複雑で書くのが面倒くさい。そこでPeerJSを使うとかなり簡単になる」と岩瀬氏は語る。どのくらい簡単になるかということを、CodeIQの解答で説明していくことに。

まずPeerというオブジェクトを生成する。次にシグナリングするには相手の情報を知らないといけない。PeerIDにもらったIDが入っているのでそれをセットするコードを書く。するとPeerServerとの接続が確立。次はメディア設定。getUserMediaで、ビデオやオーディオのストリームを取得する。

「ここまで来たら電話をかけるだけ」と岩瀬氏。peer.callのあとに相手のIDを入れて自分のストリームを渡すと発信する。応答側は相手からの着信が来たときにcallを押すとネゴシエーションして応答する。

そこまでできればリモートのストリームを設定してあげれば完了だ。最後に「まだ解答していない人は、今からでも間に合いますよ」と呼びかけ、LTを終了。

ポケット・ミクをつなごう!「Play Synthesizer By Web RTC」

最後のLTは勉強会の途中に急遽参加が決まったヤマハの河合良哉氏。河井氏が披露したのは、「Play Synthesizer By Web RTC」。これはYoutubeで既にデモが公開されている。PeerJSで実現している。1台目のPCには音源とスピーカーを接続。もう一台のPCにはカメラとUSBのMIDIキーボードが接続されている。

「ここでPeerJSを使って接続。カメラには1台目のPCの画像が映っており、聞こえているのは1台目のPCが鳴らしている音楽。例えば1台目のPCに4月3日に発売された『大人の科学 歌うキーボード ポケット・ミク』をつなぐと、ミクの声が聞こえるなんてということもできるんです」と河合氏。ちなみにポケット・ミクは4980円(税別)だそう。

ポケミクアプリを開くと、右側に初音ミクさんがいて、口を開いて歌っている姿も見られるという。「こんな機器とコラボレーションしてWebRTCを使うと面白いモノができるのでは」と語り、河合氏のLTは終了。

最後まで楽しく盛り上がりながら終了した第1回「WebRTC Meetup Tokyo」。充実した時間を過ごせたようで、第二回の開催も早々に実現が決まっている。

  • 開催日程:6月3日(火)19:30~
  • 開催場所:21cafe
  • 詳細はこちら:WebRTC Meetup Tokyo #2

今回の勉強の様子は動画で公開しているので、WebRTCに興味を持った方はぜひ体験してみよう。

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

■関連記事

収入ゼロの一年目から年収1000万円へ!フリーランスエンジニアの賢い稼ぎ方... 大和氏の営業活動をアシストするエージェント企業ギークスと共同開催 フリーランスエンジニアの大和賢一郎氏は、2016年11月26日に技術評論社から著書『エンジニアがフリーランスで年収1000万円になるための稼ぎ方』を出版。この本は、大和氏の過去4年にわたるフリーランスの実体験から得たノウハウを紹介し...
祝3周年!21cafe管理人はぎえりが語る“エンジニア・コミュニティのハブ”としての軌跡... 改装となった「21cafe」には、西海岸の自由な風が吹く Web系のエンジニアやクリエイター界隈ではおなじみの「21cafe(ニイイチカフェ)」。ギークスが運営するイベントスペースで渋谷・道元坂途中という好立地だ。 エンジニアやデザイナーの非営利の勉強会やイベント目的であれば、予約すれば平日...
「IoT縛りの勉強会!IoTLT」が、毎月200人規模のエンジニア・クリエイターを集める人気の秘密... IT/Web業界におけるIoTブームを先駆けた勉強会 IT/Web業界におけるIoTブームの先陣を切ったともいえるLT(ライトニングトーク)スタイルの勉強会が、この3月で13回目を迎えようとしている。題して「IoT縛りの勉強会!IoTLT」。 IoT領域には関連する幅広い知識や技術があり...
リクルート全社基盤アーキテクチャ、最適検索スコア導出、Ansible vs Chef-Solo、No... 偽陽性判定のアルゴリズム「Bloom Filter」を検索基盤に活用 最初に登壇したのは、守谷純之介さん。リクルート全社検索基盤の開発に携わっており、「検索、検索、検索」の日々を送っている。 ▲株式会社リクルートテクノロジーズ アプリケーション・ソリューショングループ 守谷純之介さん 全社基盤...
5分間のLTで聴衆を魅了する!JavaScript超絶テクニック勉強会『JSオジサン』の人気の秘密... JSオジサンたちが吠える「俺の話を聞いてくれ!5分だけでもいい」 Webエンジニアは学習する人々である。仕事が終わった後や土日を利用した勉強会も、会社の枠組みを超えて盛んになる一方だ。 JavaScript方面で知られた勉強会が「JSオジサン」。第一回は、Webデザイン会社に勤める小島芳樹氏が、...
【祝1周年】基礎からマニアックまで、WebRTCなら何でもOKな「WebRTC Meetup #7」... 1周年を迎えるWebRTCに特化した勉強会「WebRTC Meetup」 WebRTC Meetup Tokyo #1開催から1周年を迎えた「WebRTC Meetup #7」が開催されたのは、東京・渋谷にあるITクリエイターのためのコミュニティスペース「TECH LAB PAAK」。 We...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ