ライトが光るしくみ

石際です。こんにちは。読んでいただいてありがとうございます。

ライブサイリウムを使っていただいた参加者の皆様、ありがとうございました。
参加者の方は分かると思いますが、懐中電灯（ライト）がつきましたよね？

ここでは、ブラウザからライトを光らせる仕組みについて、解説します。

ライトはカメラ制御の領分

実際に動いているコードは下記になります。

//ライトをつける
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });

const tracks = stream.getVideoTracks();

await Promise.all(tracks.map(track => track.applyConstraints({
    advanced: [{ torch }]
})))

ぼくも作ってみて初めて知ったのですが、ライトのオンオフはカメラや音声などを扱う、メディアデバイスの領分でした。
しかもビデオトラックの属性の一つみたいです。

同じような仕組みでcanvasオブジェクトに対してビデオトラックを流し込むことができ、
スマートフォンのカメラ映像を取得することができます。
これはQRコードやバーコードの読み取りを行うよくある仕組みです。

しかし、さすがにJavaScript(ブラウザ)からライトを利用することはできないだろうとおもっていましたが、やってみるものですね。

できなかったこと

Android機の場合、一定時間後にライトが消えてしまうという仕様があり、どうしてもそこだけ解決できませんでした。
余談になりますが、iOSでのスクリーン最大化もできなかったです。
モバイルデバイスはPCとはやはり機構が違いますし、OSごとにも違いがあるので、差異を吸収するのは難しいものですね。

何かいい方法があったら、教えていただきたいです！

まとめ

• JavScriptからスマホのライトを点けることができる。
• スマホのライトはビデオトラックの属性
• Android機のライトは途中で消えてしまう