WebRTC + Web Audio API = スーパーサイヤ人

WebRTC +
Web Audio API =
スーパーサイヤ人

2013/02/23 #daiNagoyaJS vol.5

13年2月23日土曜日

いつもぎりぎり、
@girigiribauerです


本日のネタは、
大なごやJS Vol.3で
話したネタの
完全版です


今日話す内容


今日話す内容

1. 作ってきたコンテンツの概要
2. デモ
3. WebRTC, Web Audio API などの話
4. まとめ


WebRTC +


WebRTC +
Web Audio API =


ドラゴンボールとは
• みんな大好きドラゴンボール
• サイヤ人は、金色の髪のスーパーサイ
ヤ人に変身する

• 変身すると
強くなるのは
男のロマン
映画あるよ！ http://www.dragonball2013.com/


スーパーサイヤ人に
なってみたかった


元ネタ


• i'm a super saiyan
http://www.youtube.com/watch?v=lIv88cC86r0


respect!

• i'm a super saiyan
http://www.youtube.com/watch?v=lIv88cC86r0


全力投球の
中二病は
coolだと思う


そして前回・・・


リベンジネタ
• 実は大なごやJS Vol.3 でやったネタ
(2012/07/21)

• 前回は、ホントに軽く作ってみた


リベンジネタ
• あれ、音声がとれない → まだ未実装
• （本番当日）
「ク、クリックで・・・
代用しました・・・」


まさかのクリック


ユーザー体験と
しては 0点


それも
今や昔の話・・・


君もなれる！
スーパーサイヤ人に！


デモ
• なれる！スーパーサイヤ人！
http://girigiribauer.com/dragonball-super-saiyan/


満足


使用した主なAPIなど

•WebRTC (getUserMedia)

• Web Audio API
• Canvas


このあたりの話を
ピンポイントで
抜粋して紹介


WebRTC
(getUserMedia)
• RTCは、Real Time Communication
の略

• その中の getUserMedia は、
ローカルにあるカメラ、マイクに
アクセスできる


対応状況
（※2013/02/23時点）

• http://caniuse.com/stream

対応状況
（※2013/02/23時点）

• Chrome, Operaに続いて
Firefoxも getUserMedia が使える！

• Firefoxはabout:configのフラグ付き

• IEは、そもそもCU-RTC-Webという
別仕様を推進してる
(CU: Customizable, Ubiquitous)


getUserMedia の
基本的な使い方

• navigatorオブジェクトにある
getUserMedia メソッド

• 引数を3つ取る
• 1つ目は、デバイスの種別指定のオブ
ジェクト（テキストではない）


getUserMedia の
• 2つ目は、ローカルデバイスに
アクセスが出来たときに生成される、
mediaStream オブジェクトを
引数にもつ、コールバック関数

• 3つ目は、上記失敗したときの
コールバック関数


getUserMedia の
• そこまで複雑じゃない、数行レベル
• クロスブラウザな書き方は、
navigator.getUserMediaに対して
上書きできないので、
ちょっと工夫する


getUserMedia の
var getUserMedia = function(t, onsuccess, onerror) {
if (navigator.getUserMedia) {
return navigator.getUserMedia(t, onsuccess, onerror);
} else if (navigator.webkitGetUserMedia) {
return navigator.webkitGetUserMedia(t, onsuccess, onerror);
} else if (navigator.mozGetUserMedia) {
return navigator.mozGetUserMedia(t, onsuccess, onerror);
} else if (navigator.msGetUserMedia) {
return navigator.msGetUserMedia(t, onsuccess, onerror);
} else {
throw new Error('No getUserMedia implementation found.');
}
};

• navigator.getUserMediaごと返す

• あとはfunctionでラッピングするなり

getUserMedia の
• デバイスへの接続がうまくいった後、
とりあえず表示させるまでの話
（前回の資料をさらっと再紹介）


取得した LocalMediaStream オブジ
ェクトをきちんと表示するところまで
(1)

• canvas要素を作る、もしくは予め作っ
た要素を参照する
• var canvas =
document.getElementById('canvas');
var context = canvas.getContext('2d');


(2)

• createObjectURL にさっきの
LocalMediaStream オブジェクトを
ぶちこんで、BlobURL（リソースを参
照してる）を取得する
• var videoUrl = createObjectURL(stream);


(2)

• デバイスをBlobURLとして受け取るこ
とで、同様のインターフェースで扱え
る（URL参照 ≒ デバイス参照）

• Blobは Binary Large OBject の略、
FileAPI 周りでよく使われてる


(3)

• video タグの src 属性に、
さっきの BlobURL をつっこむ
• var video = document.getElementById('video');
video.src = videoUrl;
video.autoplay = true;

• ※autoplay 属性がないと最初の1コマ
だけで止まっちゃうのでつける

• 単に表示のみなら、ここまででOK

(4)

• あとは連続して canvas に video 要
素を反映してやるだけ
• var render = function() {
context.drawImage(video, 0, 0, w, h);
requestAnimationFrame(render);
};
requestAnimationFrame(render);


video は分かった
では audio は？


その前に、
Web Audio API
を考える必要がある


Web Audio API
• 文字通り、Web の Audio の API
• ノードというオブジェクト同士を
つなぎ合わせることで制御する

• 中にはAnalyserノード、数値として
解析できちゃうものもある

• 仕様が幅広くて、まだまだ全容把握で
きてない


対応状況
（※2013/02/23時点）

• http://caniuse.com/audio-api

対応状況
（※2013/02/23時点）

• Chrome, Safari, iOS Safari が使える

• つい数日前に、Firefox Nightly にて
Web Audio API がフラグ付きで導入

• Firefox21 か 22 あたりで
Web Audio API が正式実装される？


対応状況
（※2013/02/23時点）

• Firefox では、about:config から
media.webaudio.enabled を true に

• ただし、Firefoxはまだ完全じゃないと
ころもある（詳しくは後述）

Web Audio API で
今回やりたいこと
• 今回やりたいのは、
入力から数値として取れるところまで

• 出力側は必ずしも必要ではない

• ライブ入力の音声を、リアルタイムに
周波数として取れれば良いので、
AnalyserNode を使えばOK


少し戻って・・・


前回の資料より


ここでようやく
今回のキモ


WebRTC +
Web Audio API =
(＝ライブ音声入力)


ドコとドコが
繋がっているの？
• 先ほどの getUserMedia で出てきた
mediaStream オブジェクトを対象の
メソッドに渡して連携させる

• video側は、
createObjectURL(stream) を使って
BlobURLを取得し、video.src として
利用していた


ドコとドコが

• audio側は、AudioContext オブジェ
クトを用いる

• audio周りの処理が、AudioContext
オブジェクトのメソッドを介して行わ
れる

• なので、まず AudioContext を作る

• var context = getAudioContext();

ドコとドコが
• video側の createObjectURL(stream)
の、audio側に相当しているものは、
context.createMediaStreamSource(s
tream)

• 意味はそのまんま、mediaStream を
入力として作ります、と書いてある

• 2つの仕様が連携することで、逆に
videoよりもシンプルで分かりやすい


ライブ音声入力の
周波数ごとの値を
取得できる
ところまでの流れ


取得した LocalMediaStream
オブジェクトを、値として処理
できるところまで (1)
var context = getAudioContext();
var source = context.createMediaStreamSource(stream);
var audioAnalyser = context.createAnalyser();
var audioAnalyzedData =
new Uint8Array(audioAnalyser.frequencyBinCount);
source.connect(audioAnalyser);
audioAnalyser.getByteFrequencyData(audioAnalyzedData);

• AudioContext を作る



• AudioContext に対して、
createMediaStreamSource メソッド
を呼ぶと、
MediaStreamAudioSourceNode とい
う出力用のノードが取得できる



• 先ほどとは別に、
AudioContext に対して
createAnalyser メソッドを呼ぶと、
AnalyserNode という、音データの解
析ができるノードが取得できる



• （今すぐ必要ではないけど、）
あらかじめ周波数分のUint8Array型の
型付き配列（Typed Array）を
作っておく

• ただの配列でも良いけど、速度の問題


• source は出力オンリーなので、
audioAnalyserノードの入力につなぐ

• mediaStream オブジェクトから、
audioAnalyserノードの入力までが
つながった



• audioAnalyserノードの
getByteFrequencyData メソッドを
任意のタイミングで呼ぶことで、
型付き配列 audioAnalyzedData に
毎回データが入る



• 後はただの配列に対する処理
• 今回のコンテンツでは、簡素化するた
めに周波数ごとの平均値を取り、それ
を時間軸に対しても平均化
（一瞬だけ音がでかくなることがある
のを反応しないようにならす）

• 平均化された数値をしきい値と比較

Web Audio API
• まだまだ機能は豊富にあるけど、
きりがないので一旦この辺で・・・

• AnalyserNode だけでも、
色々応用考えられそう

• 例：音声入力だけで操作するゲーム

• 例：絶対音感を再現するとか

おまけ

• Q. Firefoxではライブ音声入力できな
いの？

• A. まだAudioContext のメソッドが
足りないっぽいです


おまけ
• context.create
MediaStreamS
ource がないで
すね・・・

• これがないと、
ライブ音声入力
をつなぐことが
出来ません


Canvas

• 前回もちょっと使ったけど、今回は
よりCanvasに向いている表現にトライ

• 気が溜まっていく表現は、下から上に
放射線上に変化していってほしい

• （ここから先はおまけです）


Canvas

• 先行して検証用コンテンツを
作ってみた

• radical arrow
http://jsdo.it/pypupypa/radical-arrow


Canvas


Canvas における
save(), restore()
• 自分も最初に Canvas を触ったころ、
勘違いして理解できなかったところ

• context.save() は、Canvasのピクセ
ル情報を保持するのではなく、
contextを保持する

• ここでいうcontextの保持とは、
Canvasの回転、変形具合や色など


Canvas における
save(), restore()

• 実はこの矢印の座標計算、x軸を
プラスにすることだけやっている

• 回転角度から、sin, cosを使って
x, yがいくつで、次の移動が・・・
みたいなことはやってない


Canvas における
save(), restore()
context.save();
...
context.translate(canvasWidth / 2, canvasHeight / 2);
context.rotate(rad);
context.translate(-canvasWidth / 2, -canvasHeight / 2);
context.drawImage(image, x, y);
...
context.restore();

• まず context.save() で今のcontext
を保存しておく（あとで戻すため）


Canvas における
save(), restore()


Canvas における
save(), restore()
context.save();
...
...
context.restore();

• context に対して様々な処理をして
drawImage で矢印を描画する


Canvas における
save(), restore()
context.save();
...
...
context.restore();

• context.restore() を呼ぶと、context
に対して回転や移動などの処理をする前
の状態に戻る

• 元通りの座標に戻るので、オブジェクト
ごとに処理が固定化できる

Canvas その他

• 一定フレームごとの描画処理で、
前に描いたものに対して、半透明の背
景色で塗りつぶすと、残像っぽくなる

• これだけたくさんのオブジェクトを
DOM要素でやったらたぶんつらい
（つらそうなのでやってない）


エフェクトも
それなりに


すげーそれっぽい！


エンジニアでも
これくらいまでなら
誰でもできるはず


リアルタイムWeb！

• リアルタイムに色々できるように
なってきた、素敵な時代

• ブラウザの進化すごい


ライブ音声入力

• 声というユーザーインターフェース
• Web Audio API は、
いじりがいがありそう


くだらないことに
全力投球するの楽しい

• 元ネタは、茶化すわけではなくて
本当にリスペクトしてる

• あそこまで熱くなれるものを、
なんとかして他の人にも体験させられ
ないだろうか？

• 体験の共有


これからも
くだらないことに
全力投球でいきます！


ありがとう
ございました！


WebRTC + Web Audio API = スーパーサイヤ人

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to WebRTC + Web Audio API = スーパーサイヤ人

Similar to WebRTC + Web Audio API = スーパーサイヤ人 (8)

More from girigiribauer

More from girigiribauer (8)

Recently uploaded

Recently uploaded (16)

WebRTC + Web Audio API = スーパーサイヤ人