基于HTML5實現的超酷攝像頭(HTML5 webcam)拍照功能 - photobooth.js

jjfat 11年前發布 | 16K 次閱讀 webcam 攝像頭 拍照 webRTC HTML5

photobooth demo - gbin1.com

WebRTC可能是明年最受關注的HTML5標準了,Mozilla為此開發了一套幫助你控制硬件的API,例如,攝像頭,麥克風,或者是加速表。你可以不依賴其它的插件來調用你需要的本機硬件設備。

在今天的這篇文章中,我們將介紹來自Wolfram Hempel開發的Photobooth.js,使用這個類庫可以幫助你快速的調用攝像頭功能,你可以很容易的添加攝像頭功能到網站中。并且快速的幫助你拍照,你可以使用這個功能來實現用戶的大頭照拍攝,是不是非常不錯?

主要特性:

  1. 對比度設置
  2. 顏色設置
  3. 亮度設置
  4. 色調設置
  5. 拍照按鈕
  6. 支持最新的chrome, firefox, opera等瀏覽器
  7. 支持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。

希望大家喜歡我們提供的這個在線演示和demo,如果你有任何問題,請給我們留言,謝謝!

來源:基于HTML5實現的超酷攝像頭(HTML5 webcam)拍照功能 - photobooth.js

 本文由用戶 jjfat 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!