第23回HTML5とか勉強会

keygx @keygx

WebRTCおもしろそうだな #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

うまくいくと、成功コールバックの引数にstreamが渡されるので、video.src=streamとかすればよい。 #html5j

tori3_jp @tori3_jp

getUserMedia実装したopera build RT @html5j: http://t.co/MkMEzoOX からDLできます。 ( #html5j live at http://t.co/aj6mHvcd)

keygx @keygx

取得したvideo streamをvideoタグへ渡すのか。なるほど #html5j

html5j @html5j

ダニエルさんがライブコーディングしてカメラのストリームを取得しようとしています！ ( #html5j live at http://t.co/k6QC99e1)

girigiribauer @girigiribauer

ChromeとかFirefoxの実装はいつごろになるのかなあ、楽しみだなあ ( #html5j live at http://t.co/mGW02b2G)

ふっちー @gryng02

デバイス周りは触ってみなくちゃな〜！面白そう！ #html5j

tori3_jp @tori3_jp

video要素にgetUserMediaを使ってカメラデバイスのstreamを渡す #html5j

html5j @html5j

video.src=stream ! ( #html5j live at http://t.co/k6QC99e1)

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

成功！WebCamのビデオを video.srcに流し込めた！ #html5j

tori3_jp @tori3_jp

危険なので開発用途でw #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

次は2d canvasに流し込むよ #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

videoのplayイベントで、context.drawImage() で描画。成功！ #html5j

html5j @html5j

WebCamの画像をCanvasに描画しています！ライブ画像をぐちゃぐちゃにしたり色や形を好きにできますね！ ( #html5j live at http://t.co/k6QC99e1)

ndruger @ndruger

PCとデバイスの連携は、アクセスしてきたPCに対してURL情報を持つQRコードを発行して表示して、連携したいデバイスのカメラで写してstream apiでQRコードを画像認識して、その2つが連携させるとかが楽そう #html5j

Ato Araki @atotto

ライブコーディングは勉強になるなー #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

次はsetIntervalで40msごとに、canvasに描画してみる。成功！と思いきやソースのvideo側の表示がおかしい！テスト版だがらねーw #html5j

Yoshiki Negishi / 根岸良樹 @negic

videoで撮った映像をcanvasに流し込んでる！ #html5j

alps_chappy @alps_chappy

WebRTCのデモ面白い #html5j

html5j @html5j

WebCamを描画したCanvasをクリックしたらそれが記録されるものをライブコーディング中です ( #html5j live at http://t.co/k6QC99e1)

itoyu @itoyu_

getUserMediaからの映像編集とか！！ #html5j

ふっちー @gryng02

webcam→video→canvas ほほー。 #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

次はcanvasのclickで、canvas.toDataURLでjpeg化して、別のcanvasにinsertBeforeして、サムネイル取りたい。。。失敗www #html5j

いちろう🌗腸脛靭帯炎再発🏃 @tichi73

キャプチャ画像を別にコピーするにはユーザの許可が必要なのでした。許可したら、、、成功！ #html5j

html5j @html5j

OperaのConfigでCameraのセキュリティ設定を変更しないと画像が保存できません！ ( #html5j live at http://t.co/k6QC99e1)