ハードウェア - Webカムの記事一覧
ASCII Roulette - アスキーアートを使ったビデオチャット
数年前にチャットルーレットというサービスが流行りました。そのサイトにアクセスすると、世界中にいる誰かとチャットができるというサービスです。誰に出会えるか分からないドキドキ感で、みんながアクセスしました。そんなチャットルーレットをターミナル上で再現したのがASCII Rouletteです。## ASCII Roulett...
jeelizGlanceTracker - 顔を認識して動画の再生/停止
YouTubeなどの動画を見ていて、人に呼ばれて離席している間に良い場面が過ぎてしまったなんて経験ないでしょうか。シークを戻せば良いですが、面倒ですよね。自分がいない時には自動的に再生が止まってくれると便利そうです。そこで使ってみたいのがjeelizGlanceTrackerです。顔を認識し、動画の再生や停止に利用する...
jeelizWeboji - Webカメラでアニ文字風
アニ文字はビデオチャットが普及しない日本ではあまり使われていませんが、VTuber的な遊びもできるので面白い技術です。しかし専用アプリを介してしか使えないので、利用のためには敷居が高い状態です。そこで使ってみたいのがjeelizWebojiです。Webカメラの映像を認識し、アニメに反映してくれるソフトウェアです。## ...
OpenCV.js WASM Web Worker Webpack Demo - WebAssebmlyによるOpenCV.js実装デモ
Web標準の進化は速く、どんどん新しい技術が出てきます。さらに、それらを使った開発を容易にするフレームワークやビルドライブラリも次々とトレンドが変わります。正直、ついていくのが大変な状況です。しかしそんな中だからこそ開発者は果敢にトライしていかなければなりません。今こそ試し、知見をためられるチャンスと言えるでしょう。今...
MediaStreamRecorder - Webで音声/動画を録画
HTML5ではWebカメラやマイクにアクセスできます。例えばWebチャットなどで使われたりしますが、ARに使ったりとアイディア次第で面白い使い方が考えられます。録音、録画だって可能です。今回紹介するMediaStreamRecorderはMediaRecorder APIを使った録音/録画が実装できます。## Medi...
videojs-record - Webカメラの映像を録画、保存
video.js
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterで...
FacePause - 顔を認識してYouTubeの再生/停止を制御
Webの進化が止まらないのと同様に、Webブラウザ自身もどんどん進化しています。新しく出てくるAPIを実装し、それらが徐々にWeb標準として使えるようになっていきます。こうしたAPIは広まらない可能性もありますが、試してみる価値は十分あります。今回はGoogle Chromeに実装されたFaceDetector API...
pico.js - わずか200行の顔認識プログラム
画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現して...
Matrix Vision - Webカメラの映像をマトリックス風に
マトリックスと言えば黒バックに緑の文字が流れるシーンが有名です。あの文字は実は寿司のメニューだった、なんて話があります。コンソールっぽい雰囲気がデジタルの世界を感じさせるものになっています。そんなマトリックスの世界観をWebカメラを使ってリアルタイムに再現するのがMatrix Visionです。## Matrix Vi...
moziplayer - 動画/Webカメラの映像をアスキーアート化
videoタグを使えばWeb上で動画をそのまま再生するなんて簡単にできます。そんな簡単にできることをただやるだけでは面白くありません。その映像をリアルタイムに加工するのが面白いのです。そこで使ってみたいのがmoziplayerです。動画やWebカメラの映像をテキストアート化します。## moziplayerの使い方変換...
Temporalis - Webカメラの映像をスライスして描画
Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。しかし見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。Webカメラの映像に面白い効果を施してくれ...
Diffy.js - JavaScriptでモーション検知
例えば監視カメラなどで、定常的に流れている情報を常に記録し続けると容量がどんどん大きくなってしまいます。そこで使われるのがモーション検知です。動きがあった時だけ記録するようにすれば容量が削減されます。Webカメラでモーション検知を可能にするのがDiffy.jsです。JavaScriptだけで実現できます。## Diff...
JpegCamera - Webカメラの映像を画像化
最近のノートPCではWebカメラが搭載されるのも当たり前になっています。そしてHTML5ではWebカメラから映像の取り込みが可能です（Safariはできませんが）。しかしなかなか活用事例は多くありません。そこにはWebカメラから取り込んだ映像を画像ファイル化したりするのが面倒という問題があります。そこで使ってみたいのが...
Diff Cam Feed - Webカメラを使ったモーションディレクト&Twitter投稿
Webカメラを使うと手軽にセキュリティカメラを実現できます。大事なのは物体の動きがあった時にちゃんとそれを捉える機能と、その後どこかに通知する機能ではないでしょうか。そんな機能を実現してくれるのがDiff Cam Feedです。Webカメラを使ってモーションディテクションを実現しつつ、スナップショットをTwitterに...
WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム
ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み...
face to gif - Webカメラを使って簡単にアニメーションGIF作成
アニメーションGIFを作る方法は幾つかありますが、多くの場合は動画を用意して、それを変換して作成します。すでに動画があればいいですが、イチから作成する際にスマートフォンを使ったりするのは面倒です。何よりスマートフォンは高画質なので動画のサイズが大きくなってしまいます。そこで使ってみたいのがface to gifです。W...
kawaii – HTML5/Webカムを使った顔認識
ソフトウェア名については気にしないのが良さそうです。kawaii
Gifshot – Webカム/動画/画像からアニメーションGIF生成
アニメーションGIFは今なお人気です、というかここ数年さらに人気が高まっているのではないでしょうか。動画とは違いプラグインもCPUパワーも殆ど使わずに再生できますし、音がないのが逆に創造性を働かせてくれます。そんなアニメーションGIFを各種リソースから生成してくれるソフトウェアがGifshotです。Yahoo! Inc...
eyeLike - Webカムでアイトラッキング
コンピュータの入力と言えばキーボードとマウスが一般的ですが、この二つが使われるようになってとても久しいです。もっと進化してもおかしくはないはずです。最近では腕輪やLeapMotionなど新しい入力デバイスも増えています。昔からありつつも一般化はあまりしない入力デバイスとしてアイトラッキングがあります。理由としては精度と...