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]任意の値、要素数で配列を初期化する方法

Labels: golang

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

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

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

それくらいしかないですね〜〜〜
効率的にやりたいという話になるとこの辺が参考になるかと👀https://t.co/3QiQKVbzk1
— しょっさん@ʕ ◔ϖ◔ʔ (@syossan27) 2018年12月26日

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

make関数を使って配列（正確にはslice）を生成する。

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

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

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

2019/01/09

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

Labels: HTML/CSS

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

ボタンのbackground-colorに色を指定しているのになぜか#fffのときだけ他の色（グレー）になる謎現象に悩まされてる。reset.css使ったときは問題なかったんだけどなんでだろ？ pic.twitter.com/17WuDz18lb
— ダーシノ (@bc_rikko) 2018年11月25日