基于HTML5超酷攝像頭（HTML5 webcam）拍照功能實現(xiàn)代碼
發(fā)布時間：2012-12-13 11:43:33 作者：佚名 
我要評論
我要評論基于HTML5實現(xiàn)的超酷攝像頭（HTML5 webcam）拍照功能,需要了解的朋友可以參考下
WebRTC可能是明年最受關(guān)注的HTML5標準了，Mozilla為此開發(fā)了一套幫助你控制硬件的API，例如，攝像頭，麥克風，或者是加速表。你可以不依賴其它的插件來調(diào)用你需要的本機硬件設(shè)備。
在今天的這篇文章中，我們將介紹來自Wolfram Hempel開發(fā)的Photobooth.js，使用這個類庫可以幫助你快速的調(diào)用攝像頭功能，你可以很容易的添加攝像頭功能到網(wǎng)站中。并且快速的幫助你拍照，你可以使用這個功能來實現(xiàn)用戶的大頭照拍攝，是不是非常不錯？
主要特性：- 對比度設(shè)置顏色設(shè)置亮度設(shè)置色調(diào)設(shè)置拍照按鈕支持最新的chrome, firefox, opera等瀏覽器支持jQuery插件方式和javascript代碼方式
使用Chrome打開在線演示后，請確認允許瀏覽器調(diào)用你的攝像頭，如下：
復(fù)制代碼
代碼如下:$('#webcam').photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '<img src="' + dataUrl + '" >');
});
以上代碼將生成的圖片數(shù)據(jù)傳遞到id=picture的這個標簽中。具體說明請參考相關(guān)API。
源碼下載
希望大家喜歡我們提供的這個在線演示和demo，如果你有任何問題，請給我們留言，謝謝！
相關(guān)文章
HTML5 和小程序?qū)崿F(xiàn)拍照圖片旋轉(zhuǎn)、壓縮和上傳功能
這篇文章主要介紹了HTML5 和小程序?qū)崿F(xiàn)拍照圖片旋轉(zhuǎn)、壓縮和上傳功能,需要的朋友可以參考下2018-10-08- 這篇文章主要介紹了H5調(diào)用相機拍照并壓縮圖片的實例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-20
HTML5 Plus 實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能
這篇文章主要為大家詳細介紹了HTML5 Plus的Camera、GalleryIO、Storage和Uploader，實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-13HTML5調(diào)用手機攝像頭拍照的實現(xiàn)思路及代碼
HTML5 The Media Capture API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流2014-06-15HTML5中5個簡單實用的API（第二篇，含全屏、可見性、拍照、預(yù)加載、電
小編前些日子給家?guī)磉^一篇HTML5中5個簡單實用的API，這是系列文章的第二篇，希望大家喜歡。2014-05-07- 在HTML5規(guī)范的支持下，WebApp在手機上拍照已經(jīng)成為可能。在下面，我將講解Web App如何用手機進行拍照，顯示在頁面上并上傳到服務(wù)器2013-12-11
- HTML5拍照首先，我們看看HTML代碼結(jié)構(gòu)，當然，這部分的DOM內(nèi)容應(yīng)該是在用戶允許使用其攝像頭事件出發(fā)后，動態(tài)加載生成的，感興趣的朋友可以了解下2013-08-06
這篇文章主要介紹了HTML5拍照和攝像機功能實戰(zhàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-24
