2022年11月15日(火)
HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性
ブラウザからiPhone（iOS）やAndroidなどスマートフォンやタブレットのカメラを起動するにはJavaScriptであれこれ実装していましたが、HTMLだけで簡単にカメラを起動させることができるcapture属性という便利なものがあったのでメモ用として紹介してみます。
capture属性はinputタグの「type=”file”」に対して指定し、デバイスの背面カメラ、インカメラ（前面カメラ）の選択から、写真と動画（ビデオ）の選択まで細かく指定することができます。
まずはそれぞれの動作サンプルから。
下記の「写真」と「動画」それぞれにある「背面カメラ」「インカメラ」のボタンからカメラを起動してみてください。
※カメラの起動はiPhone（iOS）やAndroidなどモバイルまたはタブレットデバイスのみで動作します。（PCのカメラは起動しません。）See the Pen
HTML capture by BLACKFLAG (@BlackFlag)
on CodePen. ...
0
5
4
14author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
カスタマーサクセスのKPIはどうすべき？顧客満足を高めるKPIの考え方と設定方法を解説
NEXT ›
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性』についてまとめています。
この記事は特にjavascript・Android・写真・ダウンロード・スマートフォン・HTML5・動画・iOSについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
