在機(jī)緣巧合之下，了解到用HTML5和javascript調(diào)用攝像頭來(lái)實(shí)現(xiàn)拍照功能，今天就把大致原理寫下來(lái)后裸。
頁(yè)面布局很簡(jiǎn)單儡陨，就是一個(gè)input標(biāo)簽褪子，兩個(gè)HTML5元素video、canvas和一個(gè)button按鈕骗村。
video元素帶有開啟視頻功能的函數(shù)嫌褪，canvas元素帶有捕捉圖像功能的函數(shù)。
先來(lái)看一下開啟視屏功能的函數(shù)（getMedia()）,代碼如下：
constraints 參數(shù)是一個(gè)包含了video和audio兩個(gè)成員的MediaStreamConstraints對(duì)象胚股，用于說明請(qǐng)
求的媒體類型笼痛。必須至少一個(gè)類型或者兩個(gè)同時(shí)可以被指定。如果瀏覽器無(wú)法找到指定的媒體類型
或者無(wú)法滿足相對(duì)應(yīng)的參數(shù)要求琅拌，那么返回的Promise對(duì)象就會(huì)處于rejected［失斢б痢］狀
態(tài)，NotFoundError作為rejected［失斀Α］回調(diào)的參數(shù)刻坊。
有關(guān)于constraints對(duì)象的具體細(xì)節(jié)請(qǐng)點(diǎn)擊下方鏈接：
有關(guān)于constraints對(duì)象的具體細(xì)節(jié)介紹
以下是拍照功能的函數(shù)具體實(shí)現(xiàn)：
? ? var video =document.getElementById("window");
? ? var ty =document.getElementById("canvas");
Javascript使用id來(lái)獲取video和canvas元素。
??? var? ctx =ty.getContext('2d');
創(chuàng)建context對(duì)象党晋，getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象谭胚，擁有多種繪制路徑、矩形未玻、圓形灾而、
字符以及添加圖像的方法。
下面對(duì)HTML5中的canvas drawImage（）方法做一介紹：
??? context.drawImage(img,x,y,width,height);
img：規(guī)定要使用的圖像扳剿、畫布或視頻旁趟。
?x: 在畫布上放置圖像的 x 坐標(biāo)位置。
?y:? 在畫布上放置圖像的 y 坐標(biāo)位置庇绽。
width: 要使用的圖像的寬度锡搜。
height: 要使用的圖像的高度。
以上就是基本的drawImage()方法的介紹瞧掺，要想了解更多耕餐，請(qǐng)點(diǎn)擊下方鏈接。
以上就是用HTML5和JavaScript調(diào)用攝像頭實(shí)現(xiàn)拍照功能的大致介紹了夸盟，喜歡就給個(gè)贊吧蛾方。
