如题所述
TML5 The Media Capture APIæä¾äºå¯¹æå头çå¯ç¼ç¨è®¿é®ï¼ç¨æ·å¯ä»¥ç´æ¥ç¨getUserMediaè·å¾æå头æä¾çè§é¢æµãä½å®é
ä¸ç¨html5è°ç¨ææºæå头åå¨å¾å¤é®é¢ï¼
1ï¼è°·æçåå¸çChromeå°äº21çæ¬åï¼ææ°å¢äºä¸ä¸ªç¨äºé«è´¨éè§é¢é³é¢é讯çgetUserMedia APIï¼è¯¥APIå 许Webåºç¨ç¨åºè®¿é®æå头å麦å é£,å ¶ä»ææºæµè§å¨åªæoperaæ¯æhtml5è°ç¨æ¬å°æç §åè½
2ï¼ä¸¤ä¸ªæµè§å¨åä¸æ¯æ访é®å¤ä¸ªæå头ï¼chromeä¸æ¯æ访é®åç½®æå头ï¼peraæ¯æ访é®åç½®æå头ç
androidææºï¼æµè§å¨chrome32çæ¬ä¸å®ç°äºæµè§å¨è°ç¨è®¾å¤æå头è¿è¡æç §ã主è¦å3个æ¥éª¤æ¥å®æ:
1ï¼è·åè§é¢æµ
æ·»å ä¸ä¸ªHTML5çVideoæ ç¾ï¼å¹¶å°ä»æå头è·å¾è§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æº
var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
2ï¼æç §
å ³äºæç §åè½ï¼éç¨HTML5çCanvaså®æ¶æè·Videoæ ç¾çå 容ï¼Videoå ç´ è½ä½ä¸ºCanvaså¾åçè¾å ¥
function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}
3ï¼å¾çè·å
è¦ä»Canvasè·åå¾çæ°æ®ï¼å ¶æ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾å
var imgData=canvas.toDataURL(âimage/pngâ);
imgDataæ ¼å¼å¦ä¸ï¼âdata:image/png;base64,xxxxxâ
çæ£å¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨å
1ï¼è°·æçåå¸çChromeå°äº21çæ¬åï¼ææ°å¢äºä¸ä¸ªç¨äºé«è´¨éè§é¢é³é¢é讯çgetUserMedia APIï¼è¯¥APIå 许Webåºç¨ç¨åºè®¿é®æå头å麦å é£,å ¶ä»ææºæµè§å¨åªæoperaæ¯æhtml5è°ç¨æ¬å°æç §åè½
2ï¼ä¸¤ä¸ªæµè§å¨åä¸æ¯æ访é®å¤ä¸ªæå头ï¼chromeä¸æ¯æ访é®åç½®æå头ï¼peraæ¯æ访é®åç½®æå头ç
androidææºï¼æµè§å¨chrome32çæ¬ä¸å®ç°äºæµè§å¨è°ç¨è®¾å¤æå头è¿è¡æç §ã主è¦å3个æ¥éª¤æ¥å®æ:
1ï¼è·åè§é¢æµ
æ·»å ä¸ä¸ªHTML5çVideoæ ç¾ï¼å¹¶å°ä»æå头è·å¾è§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æº
var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
2ï¼æç §
å ³äºæç §åè½ï¼éç¨HTML5çCanvaså®æ¶æè·Videoæ ç¾çå 容ï¼Videoå ç´ è½ä½ä¸ºCanvaså¾åçè¾å ¥
function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}
3ï¼å¾çè·å
è¦ä»Canvasè·åå¾çæ°æ®ï¼å ¶æ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾å
var imgData=canvas.toDataURL(âimage/pngâ);
imgDataæ ¼å¼å¦ä¸ï¼âdata:image/png;base64,xxxxxâ
çæ£å¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨å
温馨提示:答案为网友推荐,仅供参考
第1个回答 2019-01-04
我也是后来才发现,chrome好像不支持访问后置摄像头,不知道怎么回事,但firefox和opera是支持访问后置摄像头的,你可以试试
第2个回答 2016-12-07
除非浏览器支持。否则html5是没有权限访问摄像头的。
你是向扫码吧。
如果微信开通公众号,js接口就可以
当然还有appcan混合应用开发,也可以
你是向扫码吧。
如果微信开通公众号,js接口就可以
当然还有appcan混合应用开发,也可以
第3个回答 2017-03-07
直接<input type="file"/>就行了