public/Telereview
1
0
Fork 0
mirror of https://git.roussel.pro/telecom-paris/pact.git synced 2026-02-09 02:20: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

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

@@ -1,12 +1,25 @@
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
const width = 500; // We will scale the photo width to this
let height = 0; // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
let streaming = false;
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
let video = null;
let canvas = null;
function startup() {
video = document.getElementById("video");
video = document.createElement("video");
canvas = document.getElementById("canvas");
navigator.mediaDevices
@@ -37,16 +50,23 @@ function startup() {
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
streaming = true;
drawVideoOnCanvas();
}
},
false
);
}
window.addEventListener("load", startup, false);
const drawVideoOnCanvas = () => {
canvas.getContext("2d").drawImage(video, 0, 0, width, height);
requestAnimationFrame(drawVideoOnCanvas);
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>