前言
現在HTML5可以直接使用getUserMedia開啟裝置的相機。
使用
先加上video和canvas的tag。
偵測瀏覽器是否支援getUserMedia。
將video的畫面畫在canvas上且做成Image，如此一來img就是拍照後的結果。
範例
極陽春的仿修圖軟體
第一頁拍照、第二頁灰階效果、第三階加上物件。
[Front-End] 利用getUserMedia拍照
1
2
3
<video id = 'video' width="600" height ="400" style="position:absolute"></video>
<img id = 'img' src="" width="600" height ="400" style="position:absolute" ></img>
<canvas id = 'canvas' width="600" height ="400" style="position:absolute"></canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.getElementById('video') ;
var localMediaStream = null ;
var canvas = document.getElementById('canvas') ;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
localMediaStream = stream ;
}, function(error){
alert(error) ;
});
}
else {
alert('Unable');
}
1
2
3
4
5
6
7
if (localMediaStream) {
var ctx = canvas.getContext("2d") ;
ctx.drawImage(video,0,0) ;
img.src = tempCanvas.toDataURL('image/webp');
video.pause();
localMediaStream.stop();
}