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'); // 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
let video = document.getElementById('video'); (() => {
// 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 let height = 0; // This will be computed based on the input stream
let streaming = false;
function startup() { // |streaming| indicates whether or not we're currently streaming
video = document.getElementById("video"); // video from the camera. Obviously, we start at false.
canvas = document.getElementById("canvas");
navigator.mediaDevices let streaming = false;
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
});
video.addEventListener( // The various HTML elements we need to configure or control. These
"canplay", // will be set by the startup() function.
(ev) => {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
// Firefox currently has a bug where the height can't be read from let video = null;
// the video, so we will make assumptions if this happens. let canvas = null;
if (isNaN(height)) { function startup() {
height = width / (4 / 3); video = document.createElement("video");
} canvas = document.getElementById("canvas");
video.setAttribute("width", width); navigator.mediaDevices
video.setAttribute("height", height); .getUserMedia({ video: true, audio: false })
canvas.setAttribute("width", width); .then((stream) => {
canvas.setAttribute("height", height); video.srcObject = stream;
streaming = true; video.play();
drawVideoOnCanvas(); })
} .catch((err) => {
}, console.error(`An error occurred: ${err}`);
false });
);
}
window.addEventListener("load", startup, false); video.addEventListener(
"canplay",
(ev) => {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
const drawVideoOnCanvas = () => { // Firefox currently has a bug where the height can't be read from
canvas.getContext("2d").drawImage(video, 0, 0, width, height); // the video, so we will make assumptions if this happens.
requestAnimationFrame(drawVideoOnCanvas);
} 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> <title>Téléreview</title>
</head> </head>
<body> <body>
<canvas id="camera"></canvas> <canvas id="canvas"></canvas>
<video id="video"></video> <script src="assets/js/main.js"></script>
</body> </body>
</html> </html>