HTML media capture

概要

capture 属性を input[type=file] に指定すると、モバイルデバイスでカメラやマイクを直接起動してメディアを取得できます。

対応ブラウザ

基本構文

<!-- カメラ起動 -->
<input type="file" accept="image/*" capture="environment">
<!-- 前面カメラ -->
<input type="file" accept="image/*" capture="user">
<!-- マイク起動 -->
<input type="file" accept="audio/*" capture>

実務での使いどころ

• HTML media capture の活用

  HTML Media Capture。モバイルでカメラ・マイクを直接起動する入力属性。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — HTML media capture
• Can I use — HTML media capture