2019/01/16

Canvasでカメラの映像に画像処理フィルターをかけて表示する方法

カメラの映像をリアルタイムに処理しドット絵っぽくしたくて、年末から画像処理学んでいき欲が再燃した。
今回はWebカメラやラップトップパソコンのカメラを使って映像を取得し、適当な画像処理フィルターをかけ、ブラウザに表示する方法をまとめる。(筆者環境はMBP)


基本: カメラの映像をブラウザに表示する


単純に表示するだけの場合は、video要素(HTMLMediaElement)MediaStreamを使う。
<video id="camera"></video>
async function main() {
  const video = document.querySelector("video#camera");
  // MediaStreamを取得する(Promiseが返る)
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });

  video.srcObject = stream;
  // MediaStreamが取得できたら再生する
  video.onloadedmetadata = () => video.play();
}

main();
今回は映像だけを使いたいので、mediaDevices.getUserMedia{video: true}を指定したが、音声も使いたい場合は{video: true, audio: true}のように指定する。

詳細はMediaDevices.getUserMediaを参照してください。
※ 執筆時点では日本語ドキュメントが古いため、英語ドキュメントを読んだほうが良い。

2019/01/10

[golang]任意の値、要素数で配列を初期化する方法

Go言語の練習がてら「プログラマ脳を鍛える 数学パズル」をやっていた。

そこでひとつの疑問が生まれた。
一発で任意の値、要素数で配列を初期化できないのか?

そんなことをツイートしたらリプライをいただいたので実際に試してみた。


任意の要素数の配列を生成する


make関数を使って配列(正確にはslice)を生成する。
// すべてfalseの配列ができる
list := make([]bool, 1000)

// すべて0の配列ができる
list := make([]int, 1000)

make(型, 要素数, 容量)で任意の型と要素数でsliceを生成する。しかし型がboolならすべてfalse、intならすべで0のスライスができる。

2019/01/09

Chromeでボタンの背景色を白(fff)にできないときの対処法

NES.cssを開発しているときに、Chromeだけなぜかボタンの背景色(background-color)に白(#fff)が指定できないことに気づいた。FirefoxやSafariだと問題ない。
いろいろ実験したので、ボタンの背景色を白するための対処法をまとめる。


2019/01/08

2018年活動報告と2019年行動指針

2018年はお世話になりました。
2019年もひきつづきダーシノ、当ブログともによろしくお願いします。

過去の記事


2018年のBlack Everyday Company


まずは当ブログについての総括を。

ブログ 96.6万PV

2018年の1年間で、966,291PVあった。

前半は副業、後半はOSS活動などで忙しかったため投稿数は過去最少の33記事。PVはほぼ横ばいだ。ありがたいことに書いた記事がバズることが数回あり、3月、10月、11月は 約8.9万PV/月まで伸びた。