その他

その他

HTMLのMedia Captureが正式に推奨される手段に!便利な機能、使い方を覚えよう

    1,878 views

    読了時間 : 約1分55秒

    HTML Media Captureとは、ユーザーのデバイスにあるメディアキャプチャー手段を活用する、HTMLフォームの拡張機能です。デバイスに搭載されたカメラやマイクの利用、もしくはファイルのアップロードを制御できます。

    この機能は、<input type=”file”>要素にキャプチャーの属性を加えることで利用可能です。

     

    驚くことに、ブラウザはこれまでずっと、画像・動画の撮影や、マイクからの録音を苦手としてきました。デスクトップではFlashやSilverlightといったプラグインが補助してくれていましたが、モバイルでは非常にややこしい技を使う必要がありました。さらにFlashは終了が宣告され、Silverlightも死んでいると言って差し支えない状況です。そしてモバイルブラウザが、世界を支配するようになっています。

    11月28日より、Media CaptureはW3Cが推奨する手段となりました。この機会に、ぜひ使い方を学んでおきましょう。

     

     

    構文

    構文はとてもシンプルです。

     

     

    モバイルブラウザでは、どのアプリで画像キャプチャーを行うのか、もしくはアップロードするのかを選択する画面が表示されます。

     

    動画を取得する場合には、属性をvideoに変更します。

     

     

    オーディオでは、次のようにしてください。

     

     

     

    Media Captureを使う理由は?

    大きく4つの理由があります。

    1. 1.実装が簡単:長いコードやサードパーティー製アプリを必要とせず、定義されたタグを書くだけで利用できます。
    2. 2.柔軟:サイト上から、デバイスの機能を利用して画像、動画、オーディオを取得できます。
    3. 3.ユーザーフレンドリー:ユーザー側は、サイト上に設置されたボタンを押すだけでキャプチャーに入れます。そこからはデバイスの、馴染みのあるUIで操作できます。
    4. 4.ユニバーサル:多様なプラットフォームで動作します。各プラットフォームに合わせた仕様を自分たちで書く必要がありません。

     

     

    ブラウザのサポート状況

    近年のものであれば、全てのブラウザがサポートしています。仕様はこちらで確認できます。合わせて、Media Capture and Streamsの仕様も見ておくといいでしょう。HTML Media CaptureはHTMLのフォーム拡張で定義されていますが、Media Capture and StreamsはJavaScript APIで定義されています。

     

     

     

    ▼こちらの記事もおすすめです!

     

     

     

     

    ※本記事はHTML Media Capture is Now a Proposed Recommendationを翻訳・再構成したものです。

    おすすめ新着記事

    おすすめタグ