HTML5 Conference 2013の動画に Web Audio API のローパスフィルタを適用して聞きやすくする (Kanasansoft Web Lab.)
追記ルームによって音響特性が全然違いました。 なので、あまり役に立たないようです。 追記ここまで。 HTML5 Conference 2013の動画がYouTube上で公開されています。 html5j - YouTube ただ、長時間聞いていると高音のノイズが気になってきたので、Web Audio API のローパスフィルタを使って、ノイズを消すコードを書きました。 YouTubeの動画のページを開いてから、Webコンソール上で実行して下さい。 ローパスフィルタには2400Hzを指定していますが、「こういう動画に向いた定番の値があるよ!」等のツッコミをお待ちしています。 (function(){ var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || w
getUserMediaで取得したMediaStreamをWeb Audio APIで処理してWebRTCに戻す方法を探る (Kanasansoft Web Lab.)
Web Audio APIで処理した信号をWebRTCで扱える形式に出力する機能が、最新のChromeに実装されていたので試してみました。 使用したブラウザはGoogle Chrome Canaryです。 stableのChromeでもchrome:flagsで「getUserMedia() と Web Audio API の使用によるライブ音声入力を有効にします。」を有効にすれば試せますが、Canaryよりも不安定なようなのでCanaryで試す事をお勧めします。 まだ、Working DraftにもなっていないEditor's Draftが前提です。 CanaryはEditor's Draftの仕様を既に取り込んでいるようです。
HTML5のWeb Audio APIを使って、電話機で電話をかけられるもの作った (Kanasansoft Web Lab.)
iOS6のSafariにWeb Audio APIが実装されたので、電話機のトーン信号を生成し、一般電話に聞かせて発信できるようなものを作ってみました。 表題のHTML5は広義のHTML5。 電話機から電話機を使って電話できるようになって楽しいです。 iPod touchやWi-Fi版iPadからも電話をかけられるようになって便利です。 Tone Dialer開き、電話番号を入力して下さい。 一般電話の受話器のマイクに、iPhone等のスピーカーを近づけます。 その状態で、「Dial」か電話番号の表示欄をタップして下さい。 Safariが生成したトーン信号を一般電話が認識し電話が発信されます。 ソースはGitHubにもUpしました。
HTML5のVibration APIを使って画面を見なくてもダイヤルできるやつ作った (Kanasansoft Web Lab.)
画面にタッチしたり、タッチしている位置を移動すると、ボタンの種類別にもっている振動パターンでふるえる。 入力の決定は、画面から指をはなしたタイミングになっている。 入力を無効にしたい場合は、「Cancel」の位置で指をはなすと良い。 一番上の入力した番号が表示されているところで指をはなすと、入力済みの番号の確認が可能。 あとは、説明しなくても使えるかと。 画面の回転は無考慮。 ソースはGitHubにも上げた。
JettyでWebSocketを使うときのコールバックイベントの実行順 (Kanasansoft Web Lab.)
以下、Jetty 8.1.4.v20120524の話。 JettyでWebSocketサーバを実装する場合、WebSocketServletはWebSocketインターフェースを具象化したクラスを返す必要がある。 また、JettyをWebSocketクライアントとして使った場合もWebSocketインターフェースを使う。 さらに、WebSocketインターフェースは、OnFrame・OnControl・OnTextMessage・OnBinaryMessageの4つのインターフェースに派生する。 WebSocketインターフェースは以下の2つの抽象メソッドを持つ。 // WebSocket void onOpen(Connection connection); void onClose(int closeCode, String message);
おとうさんはプログラマ その１ 〜アイちゃん、プログラムのせかいを知る〜 (Kanasansoft Web Lab.)
アイちゃんは好奇心旺盛(こうきしんおうせい)な女の子。 ある日、アイちゃんはおとうさんのおしごとにきょうみをもちました。 「おとうさん、おとうさん」 「ン？ アイちゃん、なに？」 「おとうさんのおしごとって、プログラマなんでしょ？」 「うん、そうだよ」 「プログラマってどういうことするの？」 「そうだね。たとえば、パソコンやスマートフォンでうごくアプリケーションを作ってるんだ」 「へぇ。どうやって作るの？」 「むずかしいこと聞くね。プログラムというのを書くんだけど・・・。う〜ん、どうやってお話したらわかりやすいかなぁ」 その時、おとうさんはゆかにころがるオモチャのロボットに気づきました。 「よし、おてつだいロボットを作ることを考えてみようか」 「おてつだいロボット？」 「うん。おてつだいロボットにやってほしいことをつたえるプログラムを考えてみよう」 「何をしてもらおうかなぁ」 「じゃあ、カ
WebRTCとccv.jsの顔検出とBox2DJSの物理エンジンを組み合わせて遊んでみた (Kanasansoft Web Lab.)
WebRTCでWebカメラ画像を取り込んで、ccv.jsで顔を検出する。 Box2DJSで検出した顔にも衝突判定を持たせて、顔の周囲を物体が浮遊する物を作ってみた。
getUserMedia の第一引数に toString を加えたら汎用的になったという話 (Kanasansoft Web Lab.)
@agektmr エージさんが考えたgUM用の{video: true, audio: true, toString: function(){return 'video audio';}、すばらしい！元々のブログポストやgistへのリンクがありますか。
続・JavaScriptの顔認識ライブラリをチューニングしたら実用レベルになったという話(データ編) (Kanasansoft Web Lab.)
216,187,205,201,185,176,177,180,174,254,257,261,257,262,269,256,258,250,260,257,257,267,259,252,258,258,260,261,254,250,251,260,262,261,262,263,261,251,255,259,259,267,255,255,249,226,196,200,200,196,195,200,202,196,446,455,451,457,440,455,444,440,437,439,439,442,443,440,445,441,432,433,466,446,450,449,443,442,444,446,452,446,445,444,452,448,434,456,446,456,436,441,446,438,437,456,462,226,211,199,
JavaScriptの顔認識ライブラリをチューニングしたら実用レベルになったという話 (Kanasansoft Web Lab.)
ただ、WebRTCで顔認識させようとすると遅くてしかたがなかった。 最初は速いこともあるが、10回ぐらい認識をさせるとすぐに遅くなる。 とりあえず、デモ。 そこで、チューニングをしてみることにした。 まず、JavaScriptの定番の高速化を試してみた。 例えば、正の数で使える「Math.floor(x)」を「(x | 0)」に、整数で使える「x * Math.pow(2, y)」を「x << y」にする等。 これで、10~30%高速化できた。 次に、遅くなっている部分を調べたら、Web Workersで分散するための仕組みが遅くなる原因だとわかった。 これは、Web Workersを使わない場合にも影響が出ていた。 じゃあ、Web Workersを使えば速くなるのかといえばその逆で、20倍遅くなっていた。 詳しくは調べてないけど、多分Workerスレッドに処理データを渡す時にJSON化が
WebRTCでリアルタイム画像処理してみた (Kanasansoft Web Lab.)
WebRTCのVideo Captureで取得した画像を、リアルタイムで処理しても速度が落ちないのか試してみたら想像以上にうまくいった。 これなら、充分使用に耐えられる。 作ったのは、輪郭検出っぽいのやフレーム間データの差分を用いたものと、それを応用して輪郭が燃えるものや、動いた場所が光るもの。 輪郭検出は周囲のピクセルもみないといけないので、処理が重くなるんだけど、それでもリアルタイムで処理できた。 現行のGoogle Chromeなら、Dev版でなくても動作するが、MediaStreamを有効にする必要がある。 MediaStreamを有効にするには、アドレスバーに「about:flags」と入力しエンター、一覧の「MediaStream を有効にする」の「有効にする」をクリックして、Chromeを再起動する必要がある。 まだ試供的なもので、Flashにあるような確認ダイアログも表示さ
WebSocketの基礎知識(2012年年始版) (Kanasansoft Web Lab.)
WebSocketに関する、よくある質問や知っておいたほうがよさそうなことをまとめてみました。 技術的なことについては深くはふれていません。 あやまりがあれば指摘してください。 Q. 仕様が2つあるみたいだけど... A. WebSocketは、主にブラウザ上で使うことを考慮された通信の規格で、通信の「プロトコル」とJavaScriptから使うための「API」に仕様がわかれています。前者は「WebSocket Protocol」として「IETF」が、後者は「WebSocket API」として「W3C」がかかわっています。 Q. WebSocketってまだ仕様が固まってないんじゃないの? A. WebSocket ProtocolはIETFのRFCの「標準化提案」に、WebSocket APIはW3Cの「勧告候補」になりました。IETFにもW3Cにも承認プロセスがあり、それぞれ最後には「標準
「プログラマに半角全角の入り乱れた数字を見せ続けると死ぬ。」で死にたくないのでブックマークレット書いた (Kanasansoft Web Lab.)
( function(){ var e = document.getElementById("sine"); var d = { "０":"0", "１":"1", "２":"2", "３":"3", "４":"4", "５":"5", "６":"6", "７":"7", "８":"8", "９":"9" }; setInterval( function(){ e.innerHTML=e.innerHTML.replace( /[０-９]/g, function(a){ return (Math.random()<0.05)?d[a]:a; } ); }, 100 ); } )(); ( function(){ var e = document.getElementById("sine"); var d = { "０":"0", "１":"1", "２":"2", "３":"3", "４"
とある研修医の証言 (Kanasansoft Web Lab.)
こんなことがあったそうな...。 患者 : 「それではまた来週お願いします。」 医者 : 「はい。」 (バタン) 研修医 : 「先輩、良いんですか? あんなこと言って...。」 医者 : 「ん? 何がだ?」 研修医 : 「だって、ほら、さっきの民間療法の話...。」 医者 : 「あぁ、あれか。良いんだよ。あちらが言い出したことだ。」 研修医 : 「でも、医学会では有効性は否定されてるんですよね? それどころか危険だとも言われてるんですよね?」 医者 : 「若いな...。」 研修医 : 「えっ?」 医者 : 「あのな、よく考えてみろ。向こうは民間療法の有効性を信じて疑ってない。医学をわかってないのに、説明して理解できると思うか?」 研修医 : 「いや、でも...。」 医者 : 「でもじゃない。こっちは慈善事業じゃないんだ。」 研修医 : 「だからって、明らかに危険な状態になるのに黙って見てい
モテるベーシック女子力を磨くための4つの心得 (Kanasansoft Web Lab.)
こんにちは、ベーシックマネジメントを専攻しているDr.kanasanです。私はマウスもトラックパッドも持ってませんし8ビットパソコンだけですが、BASICに関してはプロフェッショナル。今回は、モテる女子力を磨くための4つの心得を皆さんにお教えしたいと思います。 あえて2～3行前の行番号をGOTO文に指定するようにしましょう。そして飲み会の場で好みの男がいたら話しかけ、わざとらしくプリントアウトしたコードを出していじってみましょう。そして「あ～ん！ このコード本当にマジでチョームカつくんですけどぉぉお～！」と言って、男に「どうしたの？」と言わせましょう。言わせたらもう大成功。「FOR文とか詳しくなくてぇ～！ ずっとGOTO文とIF文使ってるんですけどぉ～！ 使いにくいんですぅ～！ ぷんぷくり～ん（怒）」と言いましょう。だいたいの男はサブルーチンを用いたがる習性があるので、古かったとしてもGO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IT系イベント主催者各位 そろそろドラ娘ってやめませんか? (Kanasansoft Web Lab.)
FirefoxOS端末がなかなか販売再開しないので、販売再開した気分に浸れるグリモン書いた (Kanasansoft Web Lab.)
WebRTCとWeb Audio APIでテルミンみたいなものを作ってみた - Facemin - (Kanasansoft Web Lab.)
WebSocket APIの仕様が変更されたようです (Kanasansoft Web Lab.)
OS X Lion(10.7)に羊を数えさせる方法 (Kanasansoft Web Lab.)