[英]capture image using web cam and save with canvas
I created a simple HTML form and inside of it user should be able to take picture of himself using his device web cam. 我创建了一个简单的HTML表单,并且用户可以在其中使用自己的设备网络摄像头为自己拍照。 I used this piece of HTML in my form:
我在表单中使用了这段HTML:
<div class="form-group">
<div id="camera">
<div class="center clear">
<video id="video" class="picCapture" autoplay=""></video>
<button id="snap" type="button" class="btn btn-default" onclick="return false;">Take Picture</button>
<canvas id="canvas" class="picCapture"></canvas>
</div>
</div>
</div>
and this JS (catch-pic.js) : 和这个JS(catch-pic.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
---28--- navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
In my local machine every thing worked. 在我的本地机器上,所有事情都起作用。 i could see the output of the webcam in my form, and was able to save pictures.
我可以在表单中看到网络摄像头的输出,并且能够保存图片。 but now i uploaded the app to the server and i cant get the stream from the webcam to show up.
但现在我将应用程序上传到服务器,但无法从网络摄像头中获取流。 I checked in the console and i get this two printed out:
我在控制台中签到,并打印出了两个:
getUserMedia() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
catch-pic.js:28 Video capture error: undefined
i marked line 28 in catch-pic.js
. 我在
catch-pic.js
标记了第28行。 I couldn't really understand how come this one is working only in my machine and not in others...any idea? 我真的不明白为什么这个机器只能在我的机器上工作而不能在其他机器上工作...任何想法吗? thx
谢谢
i find same this your code: 我发现您的代码与此相同:
<script>
// 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) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.