admin管理员组文章数量:1430562
I am trying to capture an image of someone with the puter's camera, save it as a PNG image, and then send it to a view function in the Django framework.
I have found some source code for this at the following link:
The following source code is what I have so far:
<!doctype html>
<head>
<style>
#video {
border: 1px solid black;
width: 320px;
height: 240px;
}
#photo {
border: 1px solid black;
width: 320px;
height: 240px;
}
#canvas {
display: none;
}
.camera {
width: 340px;
display: inline-block;
}
.output {
width: 340px;
display: inline-block;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
</style>
<!--The title of the HTML document.-->
<title>Facial Image Recognition</title>
</head>
<body>
<div class="contentarea">
<h1>Facial Image Recognition</h1>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<!--An id on a <button> tag assigns an identifier to the button.
The id allows JavaScript to easily access the <button> element
and manipulate it.
When a user clicks on the "Capture Image" button, the -->
<div><button id="startbutton">Capture Image</button></div>
<!-- <div>
<a href="{% url 'facial-login-result' %}" id="startButton"
class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span>Capture Image
</a>
</div> -->
<!--The HTML canvas tag is where the image frames are stored
before they are converted into an image of proper format
to be shown using the <img> tag.-->
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The image captured will appear in this box.">
</div>
</div>
<script>
(function() {
// We will scale the photo width to this.
var width = 320;
// The height will be puted based on the input stream.
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
/*The following line is executed when a user clicks on the
"Capture Image" button.
document.getElementById returns the element whose 'id'
is 'startbutton'.*/
startbutton = document.getElementById('startbutton');
// Access the video stream from the webcam.
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
// Upon success, stream video in a video tag.
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
/*Collect the frames of the photo from the canvas and then
convert it into a PNG format, so that it can be shown in
the HTML page.*/
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
/*Capture a frame from the video stream.*/
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
/*toDataURL('image/png') returns a data URL containing a
representation of the image in PNG format.*/
var data = canvas.toDataURL('image/png');
/*'src' is the name of the attribute whose value is to be set.
'data' is a string containing the value to assign to the attribute.*/
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
/*The following code will call the startup() function when
the HTML page is loaded.*/
window.addEventListener('load', startup, false);
})();
</script>
</body>
</html>
My first question is where is the image that was captured from the puter's camera?
Was it assigned to the variable 'data' or was it assigned to the variable 'photo'?
I am trying to capture an image of someone with the puter's camera, save it as a PNG image, and then send it to a view function in the Django framework.
I have found some source code for this at the following link: https://www.studytonight./post/capture-photo-using-webcam-in-javascript
The following source code is what I have so far:
<!doctype html>
<head>
<style>
#video {
border: 1px solid black;
width: 320px;
height: 240px;
}
#photo {
border: 1px solid black;
width: 320px;
height: 240px;
}
#canvas {
display: none;
}
.camera {
width: 340px;
display: inline-block;
}
.output {
width: 340px;
display: inline-block;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
</style>
<!--The title of the HTML document.-->
<title>Facial Image Recognition</title>
</head>
<body>
<div class="contentarea">
<h1>Facial Image Recognition</h1>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<!--An id on a <button> tag assigns an identifier to the button.
The id allows JavaScript to easily access the <button> element
and manipulate it.
When a user clicks on the "Capture Image" button, the -->
<div><button id="startbutton">Capture Image</button></div>
<!-- <div>
<a href="{% url 'facial-login-result' %}" id="startButton"
class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span>Capture Image
</a>
</div> -->
<!--The HTML canvas tag is where the image frames are stored
before they are converted into an image of proper format
to be shown using the <img> tag.-->
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The image captured will appear in this box.">
</div>
</div>
<script>
(function() {
// We will scale the photo width to this.
var width = 320;
// The height will be puted based on the input stream.
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
/*The following line is executed when a user clicks on the
"Capture Image" button.
document.getElementById returns the element whose 'id'
is 'startbutton'.*/
startbutton = document.getElementById('startbutton');
// Access the video stream from the webcam.
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
// Upon success, stream video in a video tag.
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
/*Collect the frames of the photo from the canvas and then
convert it into a PNG format, so that it can be shown in
the HTML page.*/
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
/*Capture a frame from the video stream.*/
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
/*toDataURL('image/png') returns a data URL containing a
representation of the image in PNG format.*/
var data = canvas.toDataURL('image/png');
/*'src' is the name of the attribute whose value is to be set.
'data' is a string containing the value to assign to the attribute.*/
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
/*The following code will call the startup() function when
the HTML page is loaded.*/
window.addEventListener('load', startup, false);
})();
</script>
</body>
</html>
My first question is where is the image that was captured from the puter's camera?
Was it assigned to the variable 'data' or was it assigned to the variable 'photo'?
Share Improve this question edited Jun 30, 2022 at 21:16 deniz asked Jun 30, 2022 at 21:16 denizdeniz 111 gold badge1 silver badge5 bronze badges2 Answers
Reset to default 2
let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
camera_button.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
});
click_button.addEventListener('click', function() {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let image_data_url = canvas.toDataURL('image/jpeg');
// data url of the image
console.log(image_data_url);
});<h2>Capture Photo From Camera using Javascript</h2>
<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>From the camera a stream is captured (if user agrees) and fed to the video input. Then, when you choose, the canvas takes snapshot of the video (drawImage(video)) and draws on itself. The same <canvas> has a method that converts itself to an image (or a DataURL of one). That data is fed as a src of the image element.
These are 3 of the magic lines.
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
If you want to store the image on the server, you can use the data string that is a base64 encoding of the image. Not efficient but it's a text. the <img> is not used for this purpose.
本文标签： javascriptCapturing An Image From The Computer39s Camera And Saving ItStack Overflow
版权声明：本文标题：javascript - Capturing An Image From The Computer's Camera And Saving It - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745543308a2662592.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论