使用Webcam實現(xiàn)拍照功能

hedzr 發(fā)布于2019-08-20 14:08 / 948人閱讀

摘要：先看了下基于實現(xiàn)的超酷攝像頭拍照功能，結(jié)果發(fā)現(xiàn)我的瀏覽器不支持，連都沒運行起來，放棄。于是選擇插件，參照示例，實現(xiàn)了拍照功能，但是發(fā)現(xiàn)每次打開瀏覽器，都會出現(xiàn)是否允許使用攝像頭的選擇框，好煩，而且的代碼太繁瑣。

開發(fā)環(huán)境：Grails 3.2.3，jQuery 1.11.3

最近做項目，遇到一個正常但又少見的需求——拍照，于是在Google上搜索“js 拍照”，出現(xiàn)的都是Html5的實現(xiàn)，又搜索“jquery 拍照”，搜出了jQuery的拍照插件。

先看了下《基于html5實現(xiàn)的超酷攝像頭（html5-webcam）拍照功能-photobooth-js》，結(jié)果發(fā)現(xiàn)我的瀏覽器不支持，連Demo都沒運行起來，放棄。

于是選擇jQuery Webcam插件，參照 jQuery webcam 示例，實現(xiàn)了拍照功能，但是發(fā)現(xiàn)每次打開瀏覽器，都會出現(xiàn)“是否允許使用攝像頭”的選擇框，好煩，而且js的代碼太繁瑣。

又拜托Google大哥，直接搜索“webcam”?，找到了 webcamjs，Demo在我的瀏覽器中運行正常，js的代碼也非常簡單。

如下是根據(jù)文檔，實現(xiàn)的拍照、預(yù)覽、上傳的代碼：

 







拍照

是不是超級簡單？關(guān)鍵是網(wǎng)頁中設(shè)置Flash時，選擇“記住”，以后就不用次次設(shè)置了。
文中使用的webcam.js，可在https://github.com/jhuckaby/w... 上下載。

云服務(wù)器 GPU云服務(wù)器拍照功能 webcam 實現(xiàn)WEBRTC功能打賞功能實現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81442.html

相關(guān)文章

使用Webcam實現(xiàn)拍照功能

摘要：先看了下基于實現(xiàn)的超酷攝像頭拍照功能，結(jié)果發(fā)現(xiàn)我的瀏覽器不支持，連都沒運行起來，放棄。于是選擇插件，參照示例，實現(xiàn)了拍照功能，但是發(fā)現(xiàn)每次打開瀏覽器，都會出現(xiàn)是否允許使用攝像頭的選擇框，好煩，而且的代碼太繁瑣。開發(fā)環(huán)境：Grails 3.2.3，jQuery 1.11.3 最近做項目，遇到一個正常但又少見的需求——拍照，于是在Google上搜索js 拍照，出現(xiàn)的都是Html5的實現(xiàn)，...

DangoSky 2019-08-14 17:23 評論0 收藏0
Day19 - 攝像、拍照，濾鏡中文指南

摘要：攝像拍照，濾鏡中文指南本文出自春哥個人博客作者黎躍春追時間的人簡介是推出的一個天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。這個新的對象表示指定的對象或?qū)ο蟆? Day19 - 攝像、拍照，濾鏡中文指南本文出自：春哥個人博客作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文...

chaos_G 2019-08-21 11:49 評論0 收藏0
jQuery webcam plugin調(diào)用攝像頭

摘要：個人網(wǎng)站歡迎來訪簡介原來做項目遇到了調(diào)用攝像頭功能，小白遇到這情況立刻就去網(wǎng)上搜索，最后用的，太爛了，作者也沒說如何去使用，如果用的是框架開發(fā)更是很麻煩今天再次發(fā)現(xiàn)一款比較靈活的插件，資源鏈接使用方法部分參考這兩個參數(shù)考慮到顯示效果為標(biāo)準(zhǔn)的個人網(wǎng)站歡迎來訪簡介原來做項目遇到了調(diào)用攝像頭功能，php小白遇到這情況立刻就去網(wǎng)上搜索，最后用的https://www.helloweba....

darkerXi 2019-07-01 12:22 評論0 收藏0
jQuery webcam plugin調(diào)用攝像頭

摘要：個人網(wǎng)站歡迎來訪簡介原來做項目遇到了調(diào)用攝像頭功能，小白遇到這情況立刻就去網(wǎng)上搜索，最后用的，太爛了，作者也沒說如何去使用，如果用的是框架開發(fā)更是很麻煩今天再次發(fā)現(xiàn)一款比較靈活的插件，資源鏈接使用方法部分參考這兩個參數(shù)考慮到顯示效果為標(biāo)準(zhǔn)的個人網(wǎng)站歡迎來訪簡介原來做項目遇到了調(diào)用攝像頭功能，php小白遇到這情況立刻就去網(wǎng)上搜索，最后用的https://www.helloweba....

王偉廷 2019-08-20 17:17 評論0 收藏0
前端工程師做Face Detection

摘要：身為一名前業(yè)務(wù)程序員和現(xiàn)前端程序員，這樣的功能還是陌生的領(lǐng)域。需求使用加攝像頭，通過人臉檢測，完成自動拍照功能。在的屏幕上，顯示攝像頭的實時畫面，要是畫面中檢測出人臉，則觸發(fā)拍照。這樣做的效果能夠獲得更高的，同時還能完成更遠(yuǎn)距離臉部的捕獲。因為項目原因，需要使用人臉檢測（face detection）功能。身為一名前JAVA業(yè)務(wù)程序員和現(xiàn)前端程序員，這樣的功能還是陌生的領(lǐng)域。那能不能...

nodejh 2019-08-20 14:33 評論0 收藏0