public/Telereview
1
0
Fork 0
mirror of https://git.roussel.pro/telecom-paris/pact.git synced 2026-02-09 10:30:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Feed webcam sur un canvas js

Browse Source
This commit is contained in:
Quentin Roussel
2023-01-04 22:24:07 +01:00
parent b31ee7c0b9
commit 4bbbe36d28
2 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
code/client/borne/assets/js/main.js
View File

@@ -1,52 +1,72 @@
let canvas = document.getElementById('camera');
let video = document.getElementById('video');
// Pour l'explication complète du code : https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos#javascript
(() => {
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.
const width = 320; // We will scale the photo width to this
let height = 0; // This will be computed based on the input stream
let streaming = false;
const width = 500; // We will scale the photo width to this
let height = 0; // This will be computed based on the input stream
function startup() {
video = document.getElementById("video");
canvas = document.getElementById("canvas");
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
});
let streaming = false;
video.addEventListener(
"canplay",
(ev) => {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
let video = null;
let canvas = null;
if (isNaN(height)) {
height = width / (4 / 3);
}
function startup() {
video = document.createElement("video");
canvas = document.getElementById("canvas");
video.setAttribute("width", width);
video.setAttribute("height", height);
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
streaming = true;
drawVideoOnCanvas();
}
},
false
);
}
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
});
window.addEventListener("load", startup, false);
video.addEventListener(
"canplay",
(ev) => {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
const drawVideoOnCanvas = () => {
canvas.getContext("2d").drawImage(video, 0, 0, width, height);
requestAnimationFrame(drawVideoOnCanvas);
}
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
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
);
}
function updateCanvas() {
const context = canvas.getContext("2d");
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
/* Ajouter Ici le code pour supperposer les animations */
}
requestAnimationFrame(updateCanvas);
}
window.addEventListener("load", startup, false);
window.addEventListener("load", updateCanvas, false);
})();

4
code/client/borne/index.html
View File

@@ -7,7 +7,7 @@
<title>Téléreview</title>
</head>
<body>
<canvas id="camera"></canvas>
<video id="video"></video>
<canvas id="canvas"></canvas>
<script src="assets/js/main.js"></script>
</body>
</html>