ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5に基づくコード クールカメラ(HTML5 Webカメラ)カメラ機能実装 code_html5チュートリアルスキル

HTML5に基づくコード クールカメラ(HTML5 Webカメラ)カメラ機能実装 code_html5チュートリアルスキル

WBOY
リリース: 2016-05-16 15:50:42
オリジナル
1652 人が閲覧しました

photobooth demo - gbin1.com

WebRTC は、来年最も注目される HTML5 標準になる可能性があります。Mozilla は、カメラ、マイク、加速度計などのハードウェアの制御に役立つ一連の API を開発しました。他のプラグインに依存せずに、必要なネイティブ ハードウェア デバイスを呼び出すことができます。

今日の記事では、Wolfram Hempel が開発した Photobooth.js を紹介します。このクラスライブラリを使用すると、カメラ機能を素早く呼び出すことができ、Web サイトに簡単にカメラ機能を追加できます。この機能を使えば、ユーザーの写真をすぐに撮ることができます。

主な機能:
    コントラスト設定 カラー設定 明るさ設定 色相設定 写真ボタンは最新の Chrome、Firefox、Opera およびその他のブラウザをサポート jQuery プラグイン メソッドと JavaScript コード メソッドをサポート

浏览器支持 - gbin1.com

Chrome を使用してオンライン デモを開いた後、次のようにブラウザがカメラを呼び出すことを許可していることを確認してください:

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

Javascript コード:

コードをコピー
コードは次のとおりです:

$(' #webcam' ).photobooth().on("image",function(event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '< img src="' dataUrl '" >');
});

上記のコードは、生成された画像データを id=picture のタグに渡します。具体的な手順については、関連する API を参照してください。
ソースコードのダウンロード

私たちが提供するこのオンラインデモとデモを気に入っていただければ幸いです。ご質問がございましたら、メッセージを残してください。ありがとうございます。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート