PeerJS – HTML5Experts.jp

SpeechRecognitionとWebRTCでつながる新感覚言葉遊び「コトバツナギ」の技術全て見せます！

藤岡宏和 — Tue, 26 Aug 2014 00:00:15 +0000

「コトバツナギ」というWebコンテンツを作成し、HTML5 Japan Cup 2014で最優秀賞を頂きました。コトバツナギは、SpeechRecognitionとWebRTCを軸にしたマルチユーザーコンテンツです。このコンテンツで使っている主な技術の解説をしたいと思います。

概要

コトバツナギは、声に出して声で遊ぶマルチユーザーコトバアソビゲームです。

PCサイトを開き、スマートフォンを皆で持って集まって遊ぶゲームになっています。スマートフォンの代わりにマイク機能付きのノートPCでも可です。

WebRTCとwebkitSpeechRecognitionを使っているため、2014年8月の時点ではPC・スマホともにChromeブラウザのみ対応です。iOSのChromeはWebRTCとwebkitSpeechRecognitionに非対応のため不可ですが、MacのChromeは動作します。一人でも遊べます。

動作環境が限られるので遊べないユーザーがいる場合もあると思い、デモ動画も用意しました。

　解説文字無しの動画はこちら → [http://youtu.be/G6HGNISv4mo]

コトバツナギの主な技術をまとめると、

SSL
WebRTC（getUserMedia）
WebRTC（PeerJS）
SpeechRecognition
SpeechSynthesis
Web Audio
テキスト解析
画像検索

で、できてます。

次章より詳しく説明していきます。

getUserMediaとSSL

WebRTCでカメラ・マイク入力を利用可能にするgetUserMediaは、使用する度にブラウザに許可を得るダイアログが出てしまいます。このままだとゲームとして遊ぶには問題がありますが、httpsでアクセスできるようにすると回避できるため、SSLを導入しました。httpsの場合、アクセスしているドメインに対して最初に1回だけ許可すると、その後の許可は不要になります。（ブラウザを閉じても、設定をクリアするまで有効）

コトバツナギでは、カメラ・マイクでそれぞれ許可ダイアログが出るので、最初に計2回の許可が必要になります。getUserMediaのvideo・audioを一度に扱えば一回で済みますが、マイク入力は使えるけどカメラが使えない（またはカメラの利用が嫌だ）という場合にも対応するため、このコンテンツではそれぞれの許可を分けました。

PeerJS

PCとスマートフォン間でWebRTCによる通信を実現するためにPeerJSを利用しています。PeerJSは無料で使えるPeerServer Cloud serviceを用意してくれていますがSSLに対応していません。今回は、レンタルしているVPSにPeerServerをインストールして、下記のサーバーサイドjavascriptをnode.jsのforeverコマンドで起動し、PeerServerを立てました。

var fs = require('fs');
var PeerServer = require('peer').PeerServer;
var server = new PeerServer({
	port: [ポート番号を指定します],
	path: '[パスを指定したい場合は記述します]',
	ssl: {
		key: fs.readFileSync('[sslのkeyファイルのパスが入ります]'),
		certificate: fs.readFileSync('[sslのcrtファイルのパスが入ります]')
	}
});

アイコトバでハジメル

PCとスマートフォンを接続する際に、数字入力や文字入力をするコンテンツがよくありますが、その方法はあまり味気ないと以前より思っていたので、このコンテンツでは別の方法を検討しました。タップと声だけで遊べるコンテンツにしたかったので、アイコトバを声に出して言ってから始める仕組みにしています。

コトバツナギではアイコトバやゲーム本編での音声認識に、webkitSpeechRecognitionを使ってます。アイコトバは予めいくつか用意しておいて、認識した音声を対応する数字に変換するという仕組みをとっています。

var recognition = new webkitSpeechRecognition();
recognition.maxAlternatives=1; //webkitSpeechRecognitionは複数の解析候補を出力してくれる場合があるが、このコンテンツでは一つだけに絞って使用。
recognition.onresult = function(event) {
	//音声認識の解析結果のテキスト
	var resultText=event.results[0][0].transcript;

	//resultTextを予め用意してあるリストに照合して、マッチしたら該当の数字に変換
}
recognition.start();

なお、webkitSpeechRecognitionは、onresult以外に、onstart、onend、onaudiostart、onsoundstart、onspeechstart、onspeechend、onsoundend、onaudioend、onnomatch、onerrorという多くのイベントがあり、必要に応じて使い分けることが重要になります。

解析結果（上記resultText）を数字に変換したら、WebRTCのDataChannel（PeerJSのDataConnection）を利用してPC側のゲーム本体と通信します。

var peer = new Peer('[自分のID番号]', {host: '[PeerServerのhost]', port: ['ポート番号'], path: '[パスを指定してPeerServerを立ち上げた場合は記述]'});

var connect = peer.connect('[接続先のゲーム本体のID番号。このコンテンツでは、resultTextのテキストを数字に変換]');
connect.on('open', function(){
	//接続成功
}
connect.on('data', function(data){
	//接続先から送られてきたdataを処理
}

数字入力や文字入力を使った方が動作は安定するのですが、あえてアイコトバを使うようにしたのは、声に出して遊ぶゲームであることをゲーム本編の前にユーザーに体験してもらい、確認・練習してもらうという意図があります。また、ゲーム本編の前にマイク入力の許可をさせておきたいという狙いもあります。

ゲームモードの選択

ゲームは「シリトリでアソブ」「レンソウでアソブ」の2つのモードで遊べるようにしています。

ゲームモードを選択する際、スマートフォンの場合にはタップ操作以外に端末を右か左に傾けることでも選べるようにしました。参加者みんなが体を傾けて選択している絵が作れたら面白いと思い、こういう機能をつけてます。

端末側の傾き検知は、以下のようになっています。必要に応じて、傾き検知を開始・停止できるようにしておくと便利です。

var peer = new Peer([自身のID番号],[PeerServer情報]);
var connect = peer.connect([ゲーム本体のID番号]);

//傾き検知が必要になったらstartDeviceMotion()を呼んでaddEventListenerする
var startDeviceMotion=function(){
	window.addEventListener('devicemotion',onDevicemotion);
};

//必要ない時に止められるようにしておく
var stopDeviceMotion=function(){
	window.removeEventListener('devicemotion',onDevicemotion);
};

//端末が傾くと呼ばれる。実際にはaddEventListnerしていると常に呼ばれ続ける。
var onDevicemotion=function(e){
	var gravity = e.accelerationIncludingGravity;
	var data={mode:"gravity",gx:gravity.x,gy:gravity.y};
	connect.send(data);
};

ユーザーの端末傾き情報をゲーム側で受け取って、ゲームモード決定するところは以下のようになっています。このコンテンツのように一対多で接続する場合は、WebRTCのDataChannel（PeerJSのDataConnection）を接続毎に保持して、各端末からの通信を処理します。

var users=new Array();
var peer = new Peer([ゲーム本体のID番号],[PeerServer情報]);

peer.on('connection', function(connect) {
	//一対多の接続の場合は端末から接続がある毎に呼ばれるので、connectを保持しておく。
	//今回はUserクラスを用意してconnectを保持
	var user=new User(connect);
	users.push(user)
});

//各ユーザーがシリトリを選んでいるかレンソウを選んでいるか調べる
var cnt=0;
setInterval(function(){
	var siritoriSelected=0;
	var rensouSelected=0;

	for(var i=0;i3){
		if(siritoriSelected>=rensouSelected){
			//シリトリをはじめる
		}else{
			//レンソウをはじめる
		}
	}

},500);

//Userクラス
var User=function(connect){

	connect.on('data', function(data){
		//接続先の端末からいろいろな通信情報がここに送られるので、処理分岐できるようにしておく
		if(data.mode=="gravity"){
			onGravity(data);
		}
	});

	var onGravity=function(data){
		//data.gx、data.gyを元にアイコンを移動させる。
	};
	
	//画面右の方にいるか左の方にいるか調べてシリトリかレンソウを返す
	this.getSelectedMode=function(){
		var selectMode;
		if([左の方にいる場合]){
			selectMode= "siritori";
		} else{
			selectMode= "rensou";
		}
		return selectMode;
	}
}

ゲームモード決定時には「シリトリでアソブ」か「レンソウでアソブ」と、ゲーム本体から声が出ますが、これは音声合成で発話しています。

var speech=new SpeechSynthesisUtterance();
speech.text="しりとりであそぶ";
speech.lang = "ja-JP";
speech.volume = 1;
speechSynthesis.speak(speech);//speechSynthesisはwindowが持っているオブジェクト

ゲーム本番

シリトリゲーム、または連想ゲームでコトバをつないで遊びます。

「シリトリでアソブ」のゲームの処理の流れを、利用している技術要素とともに図にしました。おおまかには、①～⑧の流れでコトバをつないでいきます。

カメラの利用が許可されている場合、回答する度に毎回操作端末側のカメラでユーザーを撮影して、ゲーム本体に画像を送信しています（フロー②）。

また、ユーザーの操作端末がノートPCの場合は、回答の音声を端末側で録音し、blobデータとしてゲーム本体に送信しています。（フロー②、③）録音にはrecorder.jsを利用しました。recorder.jsはrecorderWorker.jsがセットになっており、Web Workerとして使う仕組みになっているようです。

var mediaStream;
var rec;
var audioContext=new AudioContext();

navigator.getUserMedia({audio:true}, 
	function(stream) {
		mediaStream=stream;
		var source = audioContext.createMediaStreamSource(stream);
		rec=new Recorder(source,{workerPath:[recorderWorker.jsまでのパス]"});
		rec.record();
	},
	function(err){
		//エラーの場合は何もしない。
		//スマホの場合はwebkitSpeechRecognitionと同時併用できないのでエラーになる。
	}
);

//録音終了したいタイミングで呼び出す
var recStop=function(){
	rec.stop();
	mediaStream.stop();

	//wav形式に変換したらonRecExportedを呼び出す
	rec.exportWAV(onRecExported);
};

//wav形式変換が完了するとblobデータが取得できる
var onRecExported=function(blob){
	//blobをWebRTCでゲーム本体に送信
};

スマートフォンの場合、2014年8月現在ではSpeechRecognitionとgetUserMediaのaudioを同時に使えない仕様になっていたので、残念ながらスマートフォンの場合は録音を諦めました。（SpeechRecognitionを同時に使わなければ、スマートフォンでも録音することができます）

なお、ここで録音撮影した音声・画像は、ゲーム終了時に使います。

ゲーム終了

ゲーム終了すると、これまでつないだコトバが連続して再生されます。

getUserMediaのvideoが使える場合、終了時に流れる各コトバに表示されているユーザー画像は、ゲーム中に回答した時に、毎回撮影したものを表示しています。（ゲーム本番のフロー②で撮影）それぞれのコトバを発声した時に、どんな顔をしていたかがわかるようになっています。（ページ上部のデモ動画参照）

また、ノートPCを使って回答したユーザーのコトバの場合、ゲーム中に回答した時に、録音した音声を再生します。（ゲーム本番のフロー①②で録音）上述の通りスマートフォンでは音声録音がSpeechRecognitionと併用できないので、スマートフォンを使って回答したユーザーのコトバの場合は、音声合成で代用します。

var audioContext=new AudioContext();

//audioBlobはゲーム時に保存していたblobデータ
if(audioBlob){
	//audioContextはコンテンツ内でnewできる数に上限があるため、何度も同じ処理をする場合は、毎回newするのはなるべく避ける。
	//このコンテンツのように同時発音する可能性がなければ、AudioContextは再利用した方がnew上限エラーにならないので良いと思われる。
	if(!audioContext){
		audioContext=new AudioContext();
	}
	var source = audioContext.createBufferSource();

	audioContext.decodeAudioData(audioBlob,function(buffer){
		source.buffer = buffer;
		source.connect(audioContext.destination);
		source.start(0);
	});

//audioblobがない場合は合成音声で発話。recognitionTextはゲーム時に保存していた音声解析のテキスト。
}else{
	var speech=new SpeechSynthesisUtterance();
	speech.text=recognitionText;
	speech.lang = "ja-JP";
	speech.volume = 1;
	speechSynthesis.speak(speech);
}

最後に

コトバツナギの主な仕組みは上記のようになっています。ゲーム本編だけでなく、ゲーム終了後にも参加者みんなで結果を振り返って楽しんでもらえるように作っています。音声解析がなかなかうまくいかないことも多いですが、思わぬ解析結果になることも含めて楽しんでもらえれば幸いです。
よかったら遊んでみてください。

■コトバツナギ
https://kotoba.tsukuenoue.com/

WebRTC開発者向けライブラリ「PeerJS」はこうして作られた

仲裕介 — Thu, 09 Jan 2014 02:00:26 +0000

NTT Communications（以下、NTT Com）が提供するWebRTC開発用プラットフォーム SkyWayはPeerJSをベースに構成されています。この記事ではPeerJS開発者であるEric Zhang氏の素顔に迫ります！

はじめに

2013年11月19日から21日にアメリカで開催されたWebRTC Conference & Expoに合わせて、NTT ComのSkyWay開発担当者がアメリカを訪れ、PeerJS開発者の一人であるEric Zhang氏にインタビューを行いました。

（写真左：NTT com SkyWay開発チームの飯田アレン真人氏、写真右：PeerJS開発者のEric Zhang氏）

──PeerJSとは？

WebRTCを活用したアプリケーションを開発できるようにするためのJavaScriptライブラリ。PeerServer Cloud serviceというWebRTCを実現するための仲介サーバ機能も提供している。

http://peerjs.com/

──SkyWayとは？

Web開発者が高度な知識の習得や環境の整備をすることなく、WebRTCを活用したアプリケーションを開発できるように、PeerJS互換のJavaScriptライブラリ、仲介サーバ機能、WebAPI、日本語の開発ドキュメントを提供している。

http://nttcom.github.io/skyway/

学生時代に二人で開発をスタート

──どのような方が開発に携わられているのですか？

私とMichelle Buの二人で開発しています。私は、過去にBinaryJSやNowJSなどを開発していました。特に、ネットワーク系の技術を簡単に使いやすくするためのライブラリ開発が得意です。MichelleはGoogleでインターンシップをしていたこともあり、JavaScriptを用いた開発経験が豊富なんです。

──PeerJSはいつごろから開発を始めたのですか？

私やMichelleがカリフォルニア大学バークレー校に在籍していた、2012年の12月にスタートしました。

WebRTCが流行るのはわかっていた

──WebRTCという技術に触れてみて、最初はどう思いましたか？

WebRTC DataChannelを利用してみると、多くの問題があることがわかりました。APIはブラウザごとに互換性がない、データのシリアライゼーションができない、そもそもシグナリングサーバが存在しないため利用するハードルが高いなど、とにかく使いにくい印象でした。しかし、ブラウザ上で動くWebアプリケーションはネイティブアプリケーションに比べて、ネットワーク技術を活用した開発を苦手としています。そのため、今後WebRTCは間違いなく流行る技術だと確信しました。

──なぜPeerJSを開発しようと考えたのですか？

私はもともと、JavaScriptの機能を簡単に利用できるようにするJavaScriptライブラリが好きでした。だからWebRTCの機能をみんなが簡単に使えるライブラリが、もっとあれば便利だと考え、開発をスタートしました。当初は開発者向けのチュートリアルも少なく、W3Cの仕様も毎週のように変わっていたこともあってかなり苦労しましたが、なんとか公開することができました。頑張ったかいあって、公開初日にGitHubにて700スターを頂きました。私が今までに開発したJavaScriptライブラリの中で、最も大規模なライブラリになりましたね。

PeerJS開発の日々

──開発はどのように進めているのですか？

私とMichelleは仕事をしながら、プライベートの時間でPeerJSの開発を進めてきました。現在も、毎日仕事から帰ってきたらメールとPeerjs – Google Groupを確認し、個別の質問への回答やバグ修正などを行っています。Chromeのコミットログも定期的に確認し、WebRTCに関する実装の進み具合も把握するようにしています。

PeerJSに求めることは互換性と安定性

──今後PeerJSに新しい機能追加を行う予定はありますか？

PeerJSへの機能追加は最小限にしたいと考えています。WebRTCの仕様自体が変化し続けているため、ブラウザのバージョンが上がるたびに使えなくなるという事態は避けなければなりません。WebRTC Working Groupの動向をウォッチし、仕様の変化に迅速に対応するとともに、高い安定性と互換性を維持していく方針です。もちろん、私達以外の開発者によるPeerJSへの機能追加は大歓迎です。そのためにMITライセンスで公開していますので、ぜひ、新しい機能をいろいろと追加してみてください。

──最近はどのような開発をしているのでしょうか？

PeerJSは2013年9月20日に、Version 0.2.xから0.3.xへメジャーバージョンアップを行いました。主な変更は、WebRTCのMediaChannelへの対応です。2ヶ月ほどの開発で、同時にコア部分のリファクタリングも行いました。ループ処理を極力省き、信頼性や処理速度の向上などを目的にしたコードの最適化を行っています。処理速度向上のアプローチとしては、WebScoketsによる接続を行う前に、XHRにて通信することで、50msほど処理を速くすることができました。これは価値があることだと考えています。

今はバグ修正と処理速度の高速化に注力しています。例えば、Chrome 31からSCTP DataChannelがデフォルトで有効になりました。Chromeの実装ではデータを一時保管するバッファーサイズが1MBしかないため、データ転送速度が速いとデータが溢れてしまう可能性があります。そのため、これに対処するためのバッファーインターフェースを実装する必要があります。（※1）その他にもエラー処理や、ユーザのイベント処理を改善していきたいと考えています。

※１・・・この機能はVersion 0.3.6 Beta (3 Dec 2013)にて実装されました。

──PeerJSのマネタイズはどう考えていますか？

公開しているPeerServer Cloud serviceの運用には、費用はかかります。ですが、開発者の方に素早くサービスを開発してもらうことに重点を置いているため、私達でサーバを維持できるかぎり、有償化するつもりはありません。

WebRTCは課題も多いけど、新しい可能性を秘めた技術

──WebRTCに関して課題だと感じていることはありますか？

WebRTCはPeer-to-Peerを前提にしているので、グループビデオチャットを簡単に実装することができません。サーバ側でミキシングを行い、複数人でチャットなどができる商用サービスはいくつか存在します。しかし、オープンソースで公開されているものはありません。今後はnpm installで簡単にインストールできる、オープンソースのサーバプロダクトが出てくることを願っています。

──WebRTCを活用した新しいユースケースはありますか？

PeerCDNというサービスは面白いと思います。これは、Webサイト上の画像や音声、動画などのコンテンツを、その時に同じようにWebサイトを閲覧しているユーザ同士でシェアしあうサービスです。WebRTCの機能を使い、Peer-to-Peerの片方がCDNの役割を果たし、コンテンツを他方に配信します。サーバからダウンロードするよりも高速にコンテンツが取得できるようになれば、多くの人から注目されるでしょう。

WebRTCは新しくてとても魅力的なAPIです。今後の可能性に期待しています。

終わりに

今回はPeerJSの開発者であるEric Zhang氏へのインタビューをお送りしました。残念ながら、Michelle Bu氏には時間が合わずお話を伺うことができませんでしたが、Eric氏は一人のエンジニアとしてすごくバイタリティにあふれている方でした。また、HTML5とJavaScriptでつくるエコシステムにすごい可能性を感じており、ちょっと大げさかもしれませんが、同時にWeb技術への愛が感じられました。今後の活躍を大いに期待したいと思います。

NTT ComのSkyWay開発チームは、今後もSkyWayをはじめとするWebRTCに関する情報発信を行っていきますので、ご期待ください。

ここだけの話、ErichとMichelleはお付き合いしているそうです。二人がこの先もうまくいくといいですね。

[Eric Zhang/エリック・ザング] 中国生まれで2000年からアメリカに在住。2009年にカリフォルニア大学バークレー校に入学。在学中にFlotype incにてNowJSの開発に携わる。2012年には同じく学生だったMichelle Buと共にPeerJSの開発を始める。現在はLever incの開発に携わりつつ、PeerJSの開発も継続して行っている。JavaScriptライブラリの開発が得意でBinaryJSの開発なども行っている。http://ericzhang.com/