0
我正在製作移動應用程序,它會顯示live image of back camera on canvas
。我已經嘗試了太多cordova plugin
,但在所有系統應用程序打開拍照或視頻。相機到畫布在移動應用程序
是否有任何插件或編碼方式,所以我可以從back or front camera
的畫布上看到實況。
謝謝。
我正在製作移動應用程序,它會顯示live image of back camera on canvas
。我已經嘗試了太多cordova plugin
,但在所有系統應用程序打開拍照或視頻。相機到畫布在移動應用程序
是否有任何插件或編碼方式,所以我可以從back or front camera
的畫布上看到實況。
謝謝。
HTML代碼
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
JS代碼
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
document.getElementById("snap")
.addEventListener("click", function() {
setInterval(function(){
context.drawImage(video, 0, 0, 640, 480);
},1);
});
通知,支持的API getUserMedia
瀏覽器並不意味着它可以調用手機上的所有的相機,它是唯一能夠調用前相機可能。
感謝您的代碼,但'getUserMedia'在android <4.4v中不起作用。 –