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