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

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

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

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

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

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

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

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

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

 







拍照

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81442.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

nodejh 2019-08-20 14:33 評(píng)論0 收藏0