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だと問題ない。
いろいろ実験したので、ボタンの背景色を白するための対処法をまとめる。