ブラウザがカメラやマイクの利用を尋ねてくる、あの小さなダイアログ。長らくJavaScript側の都合で表示されるものでした。ページを開いた瞬間に出てしまったり、一度「許可しない」を押すと二度と出てこなくなったりと、扱いにくさは制作の現場なら心当たりがあると思います。Chromeはこの役目をHTMLの要素そのものに移す作業を進めていて、8月下旬に公開された次期版のベータ告知に、映像専用の camera と音声専用の microphone というタグが並びました。

この一連の取り組みはCapability Elementsと呼ばれていて、先に位置情報を扱う要素が入り、続いてカメラとマイクをまとめて扱う usermedia が少し前の版で使えるようになっています。書き方はタグを置いて中にボタンを入れるだけ。解像度やエコーキャンセルといった希望は、利用者が触る前に専用のメソッドで伝えておきます。ストリームが取れたらイベントが飛んでくるので、成功と失敗のコールバックを自分で組み立てる手間がほとんどありません。ブラウザが単なる許可の門番ではなく、同意の取得からストリームの受け渡しまでを仲介する役に回った、という整理です。今回追加される2つは、映像だけ、音声だけを求める場面に絞った軽い版という位置づけになります。

断られたあとに戻れる道をつくる

この作りが効いてくるのは、実は最初の許可よりも、断られたあとの立て直しの場面です。試験導入の段階で集まった数字が公開されていて、一度拒否した利用者が改めて許可にたどり着ける割合は、従来のダイアログでは10%程度だったものが、新しい要素では65%を超えたという報告があります。別の事業者では取得エラーが約47%減り、また別のサービスでは「マイクが動かない」という声が17%減ったとされています。ブラウザ側の部品を押したという確かな合図があるぶん、自動的な抑制に引っかからず、設定画面の奥まで潜らなくても復帰できる導線が用意されるためです。

その代わり、見た目の自由度はかなり絞られています。文字と背景のコントラストは一定以上が求められ、透明度を下げて見えにくくすることもできません。幅や高さ、文字サイズには上限と下限があり、負のマージンで覆い隠すのも不可、変形は平行移動と縦横比を保った拡大縮小までです。利用者をだます置き方を封じるための線引きで、ブラウザが責任を持つ部品である以上は妥当な制約だと感じます。状態に応じた装飾は用意されていて、許可が下りてストリームが流れている状態を擬似クラスで拾えます。

未対応のブラウザでは、このタグは未知の要素として扱われ、中身がそのまま表示されます。つまり中に従来どおりのボタンを置いておけば、対応していない環境では既存の呼び出しに落とす、という書き分けができます。オンラインの相談窓口や、申し込みフォームで書類を撮って送ってもらう画面など、中小企業のサイトでもカメラを使う場面は少しずつ増えました。今のところChromeが先行して進めている段階ですが、権限まわりの面倒がスクリプトからブラウザ側へ寄っていく流れは、頭の片隅に置いておくと後々効いてきそうです。