今回の内容
Chrome Platform Status で Chrome 151 のところに出てきている「usermedia を使ったカメラ利用」を試してみた話の記事です。
Chrome 151 のリリースノートの、該当箇所のリンクは以下になります。
●Chrome 151 | Release notes | Chrome for Developers
https://developer.chrome.com/release-notes/151#capability_element_usermedia_mvp
usermedia に関する他の公式情報
今回用いる usermedia に関して、他の公式の関連ページは、以下があります。
概要やデモページなどの複数の情報がまとまったページ
●Capability Elements MVP - Chrome Platform Status
https://chromestatus.com/feature/4926233538330624
デモページ
●permission.site (media capture elements)
https://permission.site/media_capture_element
usermedia と従来の方法の違い
MediaDevices: getUserMedia() メソッドの場合の処理の流れ
従来、カメラを扱う場合に MediaDevices: getUserMedia() メソッドを使っていました。そのコード例は、以下のような形です。
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
video.srcObject = stream;
この処理の流れは、ざっくりと書くと以下になります。
- 「JavaScript が getUserMedia() を処理」
- Chrome がユーザーに許可を求める
- ユーザーが許可
- Promise で MediaStream
この場合、「Webサイト側が勝手なタイミングでユーザーに許可を求めるダイアログを出す」ということが起こることがあります。
usermedia の場合の処理の流れ
一方で、usermedia の場合はユーザーの操作を起点にした処理になります。
usermedia の場合は、HTML要素で以下を置きます。
<usermedia id="media"> カメラとマイクを開始 </usermedia>
そして、以下のような処理を使う形になります。
const media = document.querySelector("#media");
media.setConstraints({
video: {},
audio: {},
});
media.addEventListener("stream", () => {
video.srcObject = media.stream;
});
上記はユーザー操作なしに実行することはできないようなので、「Webサイト側が勝手なタイミングでユーザーに許可を求めるダイアログを出す」ということが起こらなくなるようです。
usermedia のお試し
usermedia のお試しをやってみます。
具体的には、usermedia の HTML要素と、カメラ映像を出すための video要素を用意し、それらを使う JavaScript の処理を以下のように用意します。
<!doctype html>
<html>
<body>
<usermedia id="media"> カメラとマイクを開始 </usermedia>
<br />
<video id="video" autoplay muted playsinline></video>
<script>
const media = document.querySelector("#media");
const video = document.querySelector("#video");
media.setConstraints({
video: {},
audio: {},
});
media.addEventListener("stream", () => {
video.srcObject = media.stream;
});
</script>
</body>
</html>
上記の実行結果
これをローカルサーバー上で実行してみます。
Chrome でページを開くと以下の表示が出るので、ボタンをクリックします。
そうすると許可を求めるダイアログが出るので、許可する操作をします。
この後は、以下のようにカメラ映像がページ上に表示された状態になります。
これでお試しは完了です。