リアルタイムエンコーディングなゲーム録画

どうもこんにちは、関東は大雪でりっくんはかまくらを作りました。

タイトルですが、動画を撮る際、今まではAVI(ほぼ劣化なしなファイル)→MP4(H.264)というプロセスを踏んでいたのですがいかんせん時間がかかると。
もちろん、そのお陰で高画質、低容量を実現できるのですが、ある程度画質悪くても即共有できるメリットが結構大きくて、この間試したリアルタイムエンコーディングがあまりスペックを圧迫しないとわかったので、ちょっとおすすめしてみます。

※細かい設定などなどは詰めておりません。予めご了承下さい。

Open Broadcaster Software

Open Broadcaster Softwareという、主に配信に使われるソフトウェアがあります。これ結構おすすめで、配信画面のカスタマイズがすごくやりやすいです。

具体的には

  • ゲームを低負荷で取り込める
  • もちろんデスクトップまるまるキャプチャもできる
  • アプリケーション単位でも録画できる
  • USBカメラとかも取り込める
  • 画面の上に画面を重ねる事とかできる(ゲーム画面に自分の顔を重ねたり)
  • シーンとして保存して、状況によって表示する画面を切り替えながら配信できる

と。特に後半2つのソースに別のソースを重ねるのがすごく直感的に出来る点と太字で書いたところが気に入ってます。

一番最後のやつは、例えばゲームを実際にプレイしている時はゲーム画面を全面に出しておきたいけど、マッチングしているときはデスクトップ全体を表示したいみたいなものを、シーンとして保存しておいてクリックひとつで切り替えることができるって感じです。

OBS

微妙に書いてますが、こんな感じでシーンを設定して、そのシーンに入れるソースを決定します。

・・・まぁ今回は関係ないんですが。

録画

ということで、H.264リアルタイムエンコですが、ほんとに、負荷あまり無いです。でも画質はお察しです。解像度を抑えて、ビットレートをちょっと高めに設定すれば全然見れる感じにはなります。

ビットレートもろもろは調整しないと結構でかい動画になっちゃうのでアレですが、最悪、これを黙ってYoutubeにアップすれば30分以内には共有できるって感じです。FTPサーバー等を利用すればもっと早く共有できるでしょう。

早さ必要?

さて、そんなリアルタイムにエンコする必要あるんだろうかってのはあるんですが、まぁ案外必要ないかもしれないですね。

なんかよくわからないテンションですごく良いなぁって思ってるんですが思いつくメリットとしては

  • HDDを圧迫しない(ほぼ生データなAVIを生成しないため)
  • 即渡せる

くらい?画質悪いしなぁと。

でも即渡せるってのが重要な場面がないことは無い気がするんですよねぇ。例えばなんかの練習で、皆で見返すみたいなときはかなり良いんじゃないかなぁと思います。

まとめ

そこまで高画質にこだわらないなら、リアルタイムでエンコすれば、一手間省けて楽に動画ストックできると思います。

2014年成人式とその役割と市民会館のスクリーンを使うにあたり気をつけたこと

どうもこんにちは成人式お疲れ様なりっくんですこんにちは。成人式の実行委員、3年目にして自身4度目の成人式の参加となりました。

新成人のみなさま、ご成人おめでとうございます。

Facebookの方で、Blogを書くまでが成人式とか言っちゃったんで、ちゃんと今回感じたこと、必要だったことはその日のうちにまとめておこうと思います。

過去の記事はこちら

このエントリの内容は

  • 本成人式における自分の役割
  • 2014年 わが市成人式において起きたことと、感想、反省点
  • 市民ホールのスクリーンを使うにあたり気をつけたこと

の流れで書いていきます。

ホールとMBA

私のお仕事

実行委員としてやることと言えば、主に会場の案内・警備、司会がメインとなるわけですが、私は簡単に言えば主にプロジェクター周りを担当しています。
具体的には、動画の編集と当日の再生、また、新成人スライドショー(当日新成人の写真を撮り、式典の最後に音楽とともに流すもの)を担当しています。3年間成人式に関わってきて、1年目は司会を務め、2年目からがプロジェクター周りの役割です。

3つ目のテーマ(市民ホールのスクリーンを使うにあたり気をつけたこと)はこの作業の都合上、動画編集をすることになるのですが、それをどのようにすれば見やすくなるかみたいなことを書くつもりです。そこそこ考えました、まぁ見づらかったら当日までに直そうと思ってたわけですが・・・w

基本的にはリハでキューのタイミングを確認し、できている動画を再生するだけの簡単な作業なわけですが、その裏に壮絶な動画編集、エンコード等々がありまして、更に写真を撮って音楽と合わせて再生する、それもそこそこしっかり見えるようにとなると・・・(まぁiPhoto使ってるんですけど)。

結構盛り上がるのがその新成人スライドショーでして、そのリアルタイム性が結構よい評価をいただけているみたいです。また、少し前の成人式で、新成人が最後のプログラムを待たずに出て行ってしまったことがあったのですが、自分たちがでるスライドショーをプログラムの最後に残すことで、なんだかんだでみんな残ってくれていました。

で個人的な反省点をまとめると(私的なメモです)

  • 寝坊し、15分遅刻した。(ほんとごめんなさい・・・)
  • フェーダーを設置し忘れ、スライドショーで正しい音楽が選択できているかモニターできなかった。
  • プロジェクターの色みの設定までしっかりできず、暗いと感じるシーンが多かった。
  • カメラの設定を事前に調整しておらず、序盤数枚が白飛びした。

逆に良かった点は

  • スライドショーはスムーズに行った。
  • 再生する動画の始めと終わりを黒背景からフェードインさせることで、プロジェクターを明けたままでも真っ暗なスクリーンを保持することが可能だった。
  • 読みやすい文字サイズ、フォントを選択できた(次の節で例を出して書きます)

まぁそんなところです。

2014わが市の成人式について

そうですね、ちょっと荒れましたね。壇上にあがってしまう新成人が出てしまい、彼らは笛を吹いてぴっぴーとうるさく、普通に成人式に参加した人(普通の定義については割愛しますが)にとっては本当に迷惑とか、少なくともうるさいくらいには思っているんじゃないでしょうか。

しかし、その俗にいう荒れた新成人も全体では10人ほどでしょうか、一部なんですよ。
某宗教団体が何食わぬ顔で本を配っていて、知らずに受け取ってしまって「これいらないんですけど・・・」って声をかけてくるような新成人だっているんです、私はそっと「こっそり座席にでも・・・」くらいに対応していたんですけどその位は勝手に放置できないような人も多くいるのです。

(・・・なう2時間寝てた ※執筆時)

でー、なんだっけ。

今回の損失はスピーカー一本って話でしたっけ?w

じゃなくて、個人的に運営側の反省点の列挙ですか。

  • 警備体制、新成人を壇上に上げてしまった件への対応(前回と違い小さなスピーカーだったことも問題か?)
  • スクリーンを使った催しが多かった。あれです、長い。
  • 座席への誘導、2階席うんたらの話、私は下にいて実感できなかったので別の人。

思いつきません、まぁこのくらいで。

でかいホールのスクリーンを使う上で気をつけた点

地区スライドショーというものを行い、事前に作ったのですが、その一つの画像がこちら。

鬼公園

画像に施した編集としては、まず画像の下縁から黒い帯をグラデーションで追加してあります。文字を載せるにあたり、様々な背景の写真に対して視認性を向上させるためですね。
そしてフォントですが、M+フォントの1p thinを使いました。

見やすさという意味で、細い日本語フォントを使いたかったことと、そのフォントサイズは下から上にかけて黄色から白くなるグラデーションをかけています。

黄色を採用したのは、一応華やかな舞台である成人式ということで高級感を出したかったことと、単純な白よりも視認性が高く感じられたからですね。

そんなわけで完成したのですが、思ったよりも見やすい感じに仕上がりました。これは嬉しい誤算というか、細字日本語フォント、かなり良いかもしれないです。機会があればぜひお試しください。

おわりに

そんなわけで無事、成人式は終わりました。
来年は・・・どうでしょうね、月1なんでやってるかもしれないですが、別の人に参加してほしいんですよね。すごく良い経験ができるので。うちの市民で20代位の人、やりたい人いたらぜひぜひやりましょう。

ということで、お疲れ様でした。

APNEAとプロゲーマー

どうもこんにちは寝起きで対応した電話で寝起きなのがバレたりっくんですこんにちは。朝まで論文書いてたのでそれは仕方ないんですよ・・・。

またしてもDubstepっぽい音楽のお話

ってことでこちらの動画をご覧ください。

APNEAってアーティストの曲なんですがすごくかっこいいです。ハマりました。あまり曲が無いみたいですが、とりあえずiTunesにはありますね。

iTunes – ミュージック – apnea「Ana-042」

他にも曲がいろいろあるので聞いてみてください。
で、本題なんですが

OnGameNet LoL

League of Legendsというゲームの韓国リーグの、プロモーション曲としてこの曲は使われているんですよ。ってことで以下の御覧ください。

これですよこれ。みてくださいこれ、プロゲーマーなんです!なんていうか日本では考えられないですよねw
このすごく厨ニ心をくすぐってくるセンス、素晴らしいの一言につきます。

ちなみに、韓国はLoL最強国です。

いやー、こいつらにはかなわない気がしてしまいますね・・・w

あけましておめでとうござます!

新年早々、お参りしつつお酒を飲みつつ、昼間ぐっすり寝て家には20人超えるくらいの親戚がきて飲んでビンゴしてとりあえずBlog書き始めましたりっくんですこんばんわ。

谷保天満宮でビール

ってことで今年もよろしくお願いします。

2013年振り返り

大掃除がようやくおわりましたりっくんですこんにちは。昨日今日と二日間まるまる掃除してた・・・、いろんな場所をやるから大変である。

まとめ

細かく振り返るほど暇でもないので(まだやることが・・・。)とりあえず適当に。

このBlogでよく書くようなIT分野の事に関しては、今年は契約したVPSを色々使えたなぁという年だった。いつから契約したか忘れたけど、Node.jsでTwitterbot作ってみたり、IRCに常時接続しておいてログを拾ってくるようなProxyも挟めて、ある程度便利な感じになった。特にNode.jsのほうは、プログラミングで自分の生活を楽に!みたいなものを実現できたのがすごいよかったなぁと。

最近のネタ IE6|IRCProxy | SteadyWorX
TwitterBotをNode.jsとntwitter使って運用中、参考記事紹介 | SteadyWorX
IRCbot | SteadyWorX

あとはGit。これもすごく大きかった。こひめ先生のお仕事をお手伝いすることがちょいちょいあって、毎回ファイルの共有とかがめんどくさかったんだけど、Gitのお陰で本当に楽になった。勉強してよかったと思えたなぁ!

Gitの共有レポジトリをCentOS 6なさくらVPSに作ってみた話 | SteadyWorX

そんでhtml5 conferenceかなぁ、本当に楽しませてもらってる。少しでも貢献できるよう(??ってわけでもないけど)知り得た知識で作ったのがついこの間のWeb Mancala beta。WebRTCおもしろいですね。ブラウザtoブラウザができるのが面白い。いろいろアイデアが出そうな感じだ。

[html5conf2013]HTML5 Conference 2013 ボランティア参加者側まとめ | SteadyWorX
Web Mancala beta | SteadyWorX

Web Mancalaの方はそのうちGithubにソースを公開していきます。あまり理解度が低い人はいろいろつまずくこともあるし、サンプルがあるとすごく助かるので(私のことです)

リアルはこれから本気出す。

※Blogエラーはいてるの見つけてしまった・・・うへ

バイト先で友達と書いた

バイト先で友達と書いた。

終わりに

ということで、今年も一年お疲れ様でした。
私に付き合ってくれた方々に感謝の言葉を述べつつ、良いお年をお迎えくださいとしめさせていただきます。

来年もどうぞ、よろしくお願いします。

Web Mancala beta

どうも、学校の図書館がすでに冬休みに入っていて資料を漁れないという状態になり困っておりますりっくんですにちは。こればっかりはしかたない、なんとかしないと。

WebMancala

jsでマンカラ

Facebookでは少し書いた気がするんですが、マンカラってゲームが僕のバイト先近辺ではやっておりまして、んで、それをJavaScriptで作ってたんですよ。せっかくなので対戦機能を付けたいなぁ、サーバーサイドどうしようかなぁとか考えてたんですが、そうだWebRTCがあるじゃん、と。

そしたら12月の頭くらいに発表されたSkyWayを思い出しまして。

SkyWay – WebRTCを簡単&柔軟に使えるプラットフォーム

WebRTCって言うと、ビデオチャットってイメージがとても強いんですが、普通にテキストチャットも作れるし、さらに言えばファイル交換もできる結構なすぐれものだったりします。しかもPeer2Peerで接続してくれる。

実際に、これをしっかりしたゲームにするには改変とかされないようにするためにサーバーで管理しないと行けないとは思いますが、知り合いどうしと対戦するみたいなものなら、WebRTCでつないじゃったほうがフロントでjs書いてれば何とかなるし良いかなぁと。

あ、マンカラについてはググってください。

マンカラ – Wikipedia

動画

ってことで、作ってみた動画をYoutubeにアップしたのでどうぞ。

とりあえず接続して、そこからあとはjsonをやりとりする感じにしてます。まだしっかり設計してないですけど・・・。バグもいっぱいあるんですけど見えないようにしてますけど。見えてる部分のデザインも全然つめてないですけど・・・。

WebRTC面白い

しかしWebRTCがすごく面白い。こういう対戦ゲーム、リアルタイムなものは難しいけどターン制なら結構いけるんじゃないかな!
再接続処理とかその辺をどうしたらいいかは・・・、しょうじきわからんのですが、まぁいろいろ考えていこうかなぁと。

多分そのうち公開します。

参考サイト

いろいろあるんですが、Web先端技術味見部の資料が参考になりました。

Y-NAKA/skyway_ajimibu

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

MacbookAir11インチ購入!!!

どうもこんにちは、新しいMacbookAirの電池の持ちが良すぎて、一度空にする作業に手こずっておりますりっくんですこんにちは。そんなMacbookAirのお話をします。

macbookair11 iyh

MacbookAir11inch mid2013購入!!

うことで、MacbookAir11インチを購入しました!
今回もAppleStore(公式)から、カスタマイズしたものを購入しました。カスタマイズしたのは

  • メモリ 8GB
  • USキーボード

の二点です。
今まで使っていた13inchAirはメモリ4GBで、まぁそこまで大きな不満もなかったのですが、たまに1GBを切った時など、精神衛生上よろしくなかったので今回は余裕を持った構成にしようと思いました。
また、USキーボードも普段から使っているので、無料ですしカスタマイズしますよね。

カスタマイズしなかった点として、CPUとSSD(これは240GBにしなかったって意味で)ですが、モバイルPCでガッツリ動画をいじることもないですし、CPU起因できついと思ったことはほとんどないことから今回もカスタマイズはしませんでした。
同様に、SSDも自分でやりくりできる範囲に収まっていたので、わざわざ240GBのタイプを買う必要はないなぁッて感じです。

11inch雑感

MacbookAir良いなぁ!!

サイズ

小さい!!!
画面サイズが個人的な一番の不安だったのです。というのも、13インチを買ったきっかけが、11インチでは解像度が小さいなぁってもので、それを覆してまで11インチを購入しても良いものかというのはずっと悩んでいたのです。(いろいろな人に解像度の件をお聞きしました。答えてくれた方々、ありがとうございます)
バッテリーに関しては、Mid2011の13inch並に11inchも持ってくれそうだったので、本当に解像度だけだったのです。

で、まだガッツリ使ってないのですが、使ってみて気がついたのはそもそも13インチの解像度ですら中途半端に小さいと感じていたということです。どういうことかというと、結局モニター上にエディタとブラウザを両方表示することはできないので、基本はCommand+Tabで切り替えながら確認をするので、11インチだろうが13インチだろうが、結局その動作を必要としました。
あとは一目で入ってくる情報量ですが、コードを書いてる間はまぁなんとか・・・なるかなぁって感じ?ブラウジングは大丈夫でした。
トレードオフなので妥協できる範囲という感じでしょうか。一応外部モニターを前提にしていので、いざという時、この点は大丈夫でしょう。むしろ、Air自体が小さくなったことで、外部モニターが見やすくな入りました(私の環境で)

タイプ感

タイピングの感じはほとんど違いがないですね。ファンクションキーのサイズが小さくなったことでちょっと押しにくくなった感じはありますけど、そこまで使うキーでもないので問題ないでしょう。

電池

・・・これがすごく持つんですよ。びっくりしてます。

公表値がすごく長くなっていたので期待していたのですが、手に入って一度空にしようと思ってるのになかなか空にならないんですよこれが(笑)むしろ困るという。

届いてから

環境の復元にTime Machineを使いました。これもすごく簡単でびっくりですね、届いてから30分くらいで環境がほとんど復元しました。
唯一、Googleドライブのみうまく行かなかったので、一度Googleドライブをアンインストール、フォルダを削除、再インストールの手順で復元しましたが。

timemachine便利

まとめ

11インチ、サイズが小さくて本当にすばらしい、これはiPadの代わりになるんじゃないかなぁと期待してます。(iPadはまだまだ使いますけど)

さーって、これでBlogも書いていこうっと!
さっそくウドラシール貼りました

[html5conf2013]HTML5 Conference 2013 ボランティア参加者側まとめ

どうも締め切りに追われていて大変ですりっくですこんにちは。

HTML5 Conference 2013についてのまとめ記事を書きます。とりあえず日付が変わるまでに書き終えたい・・・・!!

NTT研修センター的な

「Blogを書くまでが勉強会」

昨日2013/11/30に行われた「HTML5 Conference 2013」に、今年もボランティアスタッフとして参加してきました。

HTML5 Conferenceにボランティアで参加してきました! | SteadyWorX

HTML5のいろいろなものに興味が有ることと同じくらい、前回のスタッフの経験が楽しかったことが今回参加する要因になっていて、また楽しい時間をすごすことが出来ました。

メモアップロード

memo style

ひとまず「Blogを書くまで勉強会」ということで、時間的に余裕があってメモできた部分を共有します。

[html5conf2013]ようこそHTML5裏APIの世界へ memo | SteadyWorX
[html5conf2013]LightningTalk memo | SteadyWorX

裏APIの話は輝かしいHTML5の闇に潜む、怪しい、というか使いにくいであろうAPIについて実演も含めてのセッションでした。
実はこのセッションの講演者であります、羽田野太巳さん、前回のConferenceでも見させていただきました。
HTML5マークアップ珍プレー集 – HTML5 Conference 2012 – YouTube

発表自体も旨いのですごく面白かった記憶があります。今回も実際にすごいと感じる部分や、笑わせるところや、そのようなメリハリがしっかりしていて、あまり「裏API」がわからない僕も楽しませていただきました。

それ以外では聞いていたけどメモは取れなかった、ICSの池田 泰延 (clockmaker)さんの「Canvas/WebGLを活用したインタラクティブ表現 〜CreateJS、Three.js、Away3D.js」とかを見ることが出来ました。

LTは、特に会場の無線LAN構築の話がすごく面白かった。前回の反省からかなりしっかりしたものができていたように感じます。

スタッフをしていて一度部屋のネットワークが落ちたことがあったのですが、知らせるためにシーバーを持ったhtml5jのスタッフさんに話しかけると

「伝えておきます、もう治ってると思いますけど」

と、不思議な説明がw
で、iPadでネットワークの確認をしてみるともう治っているという素敵な状況。LTの最中にどのような監視を行っていたかもちょろっと説明してくださいましたが、あそこまでしっかりしていると不満もあまりありませんでしたね!!(最後にほとんど不満の声(手?)を上げる人がいなかった)

ボランティア

前回も参加していた方がちらほらいらっしゃって、なんか久々にお話できて楽しい感じになりました。また、今年から参加という人にもたくさん出会え、刺激的な一日になりました。

きっとチャーリー@きのこの山さんはSurfacePro2を有効活用して世に素晴らしいアプリを出してくれることでしょう。

ルーム

今回も前回同様のルームと言う担当で、5セッションのうち3個のコマでルーム内の整理などを行っていました。

希望通りのセッションは比較的聞けて、ついでに仕事ができるみたいな感じ。

スタッフTシャツ

今回はこんなスタイルでした。ボールペンは必須。あと裏に配布してあったステッカーが詰まってます(笑)あとあのレッドブルは配布されてたレッドブルの中に入っていたやつです、飲んだ本数つけていきました。(後述)

staffTシャツ

前回から参加しているボランティアスタッフの間で話題だったのは、去年よりTシャツの質が良いという点。あと黒だってわかってたら黒のインナー着なかったのに!!みたいなところですw なんか「黒に黒でロンTみたいですね」というお言葉を頂きました。・・・赤いインナー着てた人のかっこよかったなぁ。

レッドブル

red bull
こんな感じでした。1200本だと思ったら1200セットで、2400本来たとかそういう話だったみたいです笑
とりあえず2本飲んで、担当の場所に行って帰ったらなくなってるみたいな不思議な状況だったんですけど、なんかいろいろなところで配った成果ではけたんですかね?すごかったなぁあれ。

MacbookAir

11インチ持ってる人がいて、その人は13インチがほしいといい(RetinaPro)、僕は11インチがほしい。MBAに関しては11インチと13インチのないものねだり感がすごいというのを再認識。あと最後のLTでも言ってましたが、会場のMac率すごいです。Web系ってホントMacのほうが楽ですし、そもそもかっこいいし・・・。

Apple教みたいな言われ方がありますが、僕は普通にコスパ高いと思います。みんな情況だし・・・。余談ですけど!!!

Conferenceの終わりと懇親会

end of conference
end of conference
end of conference
end of conference

ってことで終わりました。最後のクイズはきのこの山さんに完全に持ってかれましたけどなんなんですかねあれ、いいんですか彼でw

懇親会、会場が食堂って聞いてなんかあまりちゃんとしてないのかなぁと思ってましたが(ごめんなさい)

懇親会会場
なんかすごく綺麗・・・。さすがNTT。

いろいろな人とお話できました。

終わりに

今回Conferenceも大変楽しく参加させていただきました。

前回のConferenceの説明でたしか白石さんがおっしゃってたのですが、「ボランティアも参加者の一部としてConferenceに参加してください」という旨の説明をされました。今回同様の説明があったかはじつは確認してないのですが、おそらく同じようなものだと(勝手に)解釈し、最大限楽しませてもらいました。

様々な知識が集まって、たくさんの情報が飛び交い交換され、人と人がつながって拡大していく素敵な会だったと実感しております。

これからも続けば、続くのならばぜひまたボランティアとしてConferenceに参加したいと考えています。

最後に、スポンサー、スピーカー、スタッフ、ボランティア、ゲスト、すべての会に関わった皆様、お疲れ様でした!!

[html5conf2013]LightningTalk memo

どうもこんにちは、HTML5 Conference 2013明けなりっくんです。そのときメモしたものをとりあえずアップします。メモレベルなので大したことないですが。

image

LT


ここまでの分抜けてます。


@tomo_watanabe

information Electronics(iE)
いろいろなものがつながるんじゃないか

組み込みとWebはだんだん近づいてきている。2009年にはAndroidにより近づき、HTML5によりさらに近づく。
モバイルが高性能化した
ハードとHTML5で注目される
node.js + websocket

JavaScriptで動かせるハード。PWM.ADCなどの制御
konashi HDKforHTML5

M2M(Machine to Machine)
Push型車載ナビを作った

ポケットマネーで買おう。

@nunnun

HTML5 Conference 2013のネットワークの話

去年の反省点

  • Nocを作らなかった。
  • APが全然たりない

今回はネットワークの監視を行っていた。1秒毎

CGNっていうすごい機械を借りていた。
大きなNAT、Max2万

Apple 69%!(1:10)
ケーブルの総延長2.5km
AP 946台
瞬間最大61% IPv6

@iizukak

Knockout
MVフレームワーク

データバインド = モデルとビューの結びつけ

それをラクにするのがMVフレームワーク。
MVフレームワークはデータバインドを楽にするものだと考えている。

Knockoutについて

  1. データバインドが読みやすい
  2. データバインドが書きやすい
  3. 組み込みのデータバインド系が良く出来ている。
  4. 拡張が用意
  5. 公式チュートリアルがイケてる。

@なかゆうすけ

WebRTCにハマっている。

デモ

WebRTCは世界的には流行ってる。
意外と簡単、やってみるといいよ!!

高橋智宏

レーザーレンジスキャナーとWebGL

雪を計測したい。除雪費用200億円

Cyber Physical System
現実世界と情報世界を相互に接続

赤外レーザーにより距離を計測する機械。
回転しながら

[html5conf2013]ようこそHTML5裏APIの世界へ memo

どうもこんにちは、HTML5 Conference 2013明けなりっくんです。そのときメモしたものをとりあえずアップします。メモレベルなので大したことないですが。

image


ようこそHTML5裏APIの世界へ – 羽田野 太巳 –

かなりマニアックな話をする。

マニアなAPI

モテ系APIとは

  • 鮮やか
  • 仕事になる
  • 情報がネットに溢れるなど
  • 視覚的にすごい

非モテ系API

  • 語れる仲間がいない。
  • 使っても凄さがわからない
  • 仕事になるかわからない
  • 仕様がなくなるかもしれない。(W3C)

レベル1


WebRTC DTMF

WebRTCとは

SkypeをWebで
映像音声データをP2Pで接続する
しかし、IP電話の知識が必要
通信業界でのみ熱い!!

Peer to Peer DTMF

Dual-Tone Multi-Frequency
ピッポッパッというダイアルトーン音を発生させるもの。
P2Pで繋げたあとに送るもの。
将来的に電話網につなげるようになった時に便利となるAPI。

Web Audio API

特徴

音声の生成や合成が可能
iOSでは複数音源の同時再生に重宝
getUserMediaを使ってオーディオストリームを音源にする

これはまだモテ系

非モテ

  • 遅延
  • 波形整形
  • ダイナミックレンジ圧縮
  • 音響効果
  • 各種フィルター
  • 立体音響 ←ヤバい

立体音響

PannerNode

あたかも動いてるかのようなものを作ることができる。
ドップラー効果のデモ

仕事になるかわからないw
が、モテ系に近い

Media Source Extension

特徴

HTTPアダプティブストリーミング配信
セグメントに分割されたビデオデータをVideo要素に流しこむだけのAPI

MPEG-DASH

Dynamick Adaptive Streaming over HTTP
MediaPresentaitionD—

MPD

なにもAPIがやってくれないので、プレイヤーを作るのに腕がかかわる。

GPAC MP4box
コマンドラインベースでセグメントファイルをつくる。

Streamingなので巻き戻らない。

Media Capture and Streams screen capture

全画面がキャプチャーできる。
WindowsでやるとOSごと引きずられて落ちる。

ちょいちょい監視するとかに使えるのではないか


レベル2


Encoding

デコードやエンコード

Web Cryptography API

IE11のみ?(Chrome)

暗号論的擬似乱数列の生成
ダイジェストの生成 などなど

DRMとかそういうところから来ている仕様。

ストレージにいろいろなデータを取得するが、それを暗号化しておきたという場合はもしかしたら使えるかもしれない。

DOM Matrix

行列計算

グラフィックス向けな座標変換
3×3 4×4が可能
回転、拡大、縮小などができる
もともとはCSS Matrixと言われていた。

Transferable objects

データ転送
通信ではなくWorkerに送りたい。 とき


レベル3


Clipboard API

コピーとかを取得できる。
今のところPasteだけしかできない。

でも、OSの機能をつかえばいいじゃん?w

Base64 utility methods

ASCII文字だけ
バイナリどころから日本語もだめ
利用シーンが思いつかない


レベル4


The Screen Orientation API

オリエンテーションを固定できる。
状態を把握、ロックできる。

Media Stream Recording

録画録音
Blobオブジェクトとして取り出せる
FirefoxAuroraがオーディオのみサポート

Web Animations 1.0

一つもブラウザが実装していない
タイムライン制御
アニメはCSSはSVGAnimationsで実現
連続処理と並列処理
ビデオ再生のように扱える
実装ブラウザーはない(けどGithubにて公開されてるポリフィル)