日日夜夜精彩视频免费,国产亚洲自拍偷拍一区,国产亚洲精品aa午夜观看

當(dāng)前位置：

發(fā)布時間：2019-07-31

文章編輯：網(wǎng)站建設(shè) 文章來源：APP開發(fā) 瀏覽量：次

HTML5APP開發(fā)怎樣調(diào)用手機(jī)設(shè)備?深圳APP開發(fā)公司認(rèn)為經(jīng)常調(diào)用手機(jī)攝像頭的無非兩種情況，一是微信的視頻聊天，二是美圖秀秀等讓照片更好看的APP。當(dāng)我們注冊一個實(shí)名APP時，經(jīng)常需要設(shè)置頭像。頭像一般來源于兩個地方，一個是相冊，一個就是調(diào)用手機(jī)攝像頭自拍一個。在生活中我們經(jīng)常會碰到這類APP，APP開發(fā)公司博納網(wǎng)絡(luò)本章就來學(xué)習(xí)如何利用HTML5調(diào)用手機(jī)攝像頭。
HTML5調(diào)用手機(jī)攝像頭
本例將使用HTML5的WebRTC技術(shù)，借助video標(biāo)簽實(shí)現(xiàn)網(wǎng)頁視頻，同時利用Canvas實(shí)現(xiàn)照片拍攝。本節(jié)示例不能直接用瀏覽器打開文件，需要將文件部署在Web服務(wù)器上，如Apache、Nginx、IIS等。提示W(wǎng)ebRTC是一項(xiàng)在瀏覽器內(nèi)部實(shí)時視頻和音頻通信的技術(shù)，標(biāo)準(zhǔn)協(xié)議為WHATWG。目的是通過瀏覽器提供簡單的JavaScript就可以達(dá)到實(shí)時通信能力，包括音視頻的采集、編解碼、網(wǎng)絡(luò)傳輸、顯示等功能，并且還支持跨平臺，如Windows、Linux、Mac、Android等。

部署完畢后，用Chrome打開對應(yīng)的地址，在瀏覽器界面會提示是否使用攝像頭，并帶有兩個按鈕，即“允許”和“拒絕”，效果如圖8.1所示。

點(diǎn)擊“允許”按鈕，瀏覽器啟動攝像頭，左側(cè)video標(biāo)簽內(nèi)出現(xiàn)攝像頭捕捉的畫面，如圖8.2所示。

點(diǎn)擊“快照”按鈕，截取左側(cè)視頻顯示在右側(cè)畫布中，效果如圖8.3所示。

點(diǎn)擊“保存”按鈕，畫布圖片將被保存為“照片.png”以供下載。APP開發(fā)者可以自己體驗(yàn)，本例不做圖片說明。利用編輯器打開“8-1.用HTML5拍照和攝像.html”文件，代碼如下：【代碼8-1】

01 <! DOCTYPE HTML> 02 < html> 03 < head> 04 < style> // ...... 省略樣式代碼，讀者可以參考下載資源源碼 </ style> 05 </ head> 06 < body> 07 < header>< h2> 用 HTML 5 拍照和攝像</ h2></ header>

08 < section> 09  10 < video width=" 360" height=" 240" muted controls></ video> 11  12 < canvas width=" 240" height=" 160"></ canvas> 13 </ section> 14 < section> 15 < a id=" save" href=" javascript:;" download=" 照片"> 保存</ a> 16 < button id=" photo"> 快照</ button> 17 </ section> 18 </ body> 19 < script> 20 (function () { 21 var video = document. querySelector(' video'), // 視頻元素 22 canvas = document. querySelector(' canvas'), // 畫布元素 23 photo = document. getElementById(' photo'), // 拍照按鈕 24 save = document. getElementById(' save'); // 保存按鈕 25 // 獲取瀏覽器攝像頭視頻流 26 navigator. getUserMedia = navigator. getUserMedia || navigator.

navigator. webkitGetUserMedia || 27 navigator. mozGetUserMedia; 28 if (navigator. getUserMedia) { 29 navigator. getUserMedia({ video: true }, function (stream) { // 攝像頭連接成功回調(diào) 30 if ('mozSrcObject' in video) { // 是否為火狐瀏覽器 31 video. mozSrcObject = stream; 32 } else if (window. webkitURL) { // 是否為 Webkit 核心瀏覽器 33 // 獲取流的對象 URL 值賦予 video 元素 src 34 video. src = window. webkitURL. createObjectURL( stream); 35 } else { // 其他標(biāo)準(zhǔn) 瀏覽器 36 video. src = stream; 37 } 38 video. play(); // 播放視頻 39 }, function (error) { // 攝像頭連接失敗回調(diào) 40 console. log( error); // 控制臺顯示錯誤回調(diào) 信息

41 }); 42 }; 43 photo. addEventListener(' click', function (e) {// 拍照按鈕點(diǎn)擊事件監(jiān)聽 44 e. preventDefault(); // 阻止按鈕默認(rèn) 事件 45 canvas. getContext(' 2d'). drawImage( video, 0, 0, 240, 160); // 在畫布中繪制視頻照片 46 save. setAttribute(' href', canvas. toDataURL(' image/ png')); // href 屬性值為圖片 base64 值 47 }, false); 48 })(); 49 </ script> 50 </ html>

代碼第10行添加用于視頻顯示的video標(biāo)簽，帶有一個比較陌生的屬性muted，表示關(guān)閉視頻的聲音。代碼第12行添加用于快照的canvas元素，當(dāng)點(diǎn)擊“快照”按鈕時，腳本調(diào)用canvas方法截取視頻元素當(dāng)前的圖片，并繪制于畫布上。代碼第26、27行獲取攝像頭的方法，兼容火狐瀏覽器和Webkit內(nèi)核瀏覽器，語法如下：

constraints：支持video、audio屬性，在成功回調(diào)函數(shù)內(nèi)返回對應(yīng)數(shù)據(jù)流。successCallback：成功接收后回調(diào)返回媒體數(shù)據(jù)。errorCallback：連接失敗后回調(diào)返回錯誤對象。代碼第30～38行，視頻連接成功后執(zhí)行回調(diào)。本例在Chrome瀏覽器Webkit核心下運(yùn)行，使用關(guān)鍵方法是window.webkitURL.createObjectURL，語法如下：
navigator. getMedia( constraints, successCallback, errorCallback);objectURL=window.URL.createObjectURL(blob);blob：媒體文件流對象。objectURL：返回對象URL，可以被賦值于video元素的src屬性。代碼第38行執(zhí)行video元素的play方法，播放用戶攝像頭拍攝的內(nèi)容。至此，一個簡單的WebRTC功能的Web應(yīng)用就完成了。代碼43～47行實(shí)現(xiàn)快照功能并設(shè)置保存按鈕的內(nèi)容。好了，APP開發(fā)公司本文關(guān)于“HTML5APP開發(fā)怎樣調(diào)用手機(jī)設(shè)備?”的相關(guān)APP開發(fā)經(jīng)驗(yàn)就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。

當(dāng)前文章鏈接：/construction/appkaifa/3348.html

上一篇：APP開發(fā)人員怎么把握用戶需求？下一篇：APP開發(fā)根據(jù)消費(fèi)者行為設(shè)計產(chǎn)品

返回列表

如果您覺得案例還不錯請幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點(diǎn)，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認(rèn)后，會立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當(dāng)前位置：

HTML5APP開發(fā)怎樣調(diào)用手機(jī)設(shè)備?

如果您覺得案例還不錯請幫忙分享：

相關(guān)案例推薦

洛菲海外攝影站

17找房

哪兒買跨境購

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索