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

support de différentes tailles de camera

Browse Source
This commit is contained in:
Quentin Roussel
2023-01-13 21:16:42 +01:00
parent 16a90aebfb
commit 8771fb2bb8
5 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
code/interface_borne/assets/css/main.css Normal file
View File

@@ -0,0 +1,11 @@
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}

40
code/interface_borne/assets/js/camera_editor.js
View File

@@ -3,8 +3,10 @@ class CameraEditor {
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.video = document.createElement("video");
this.width = canvas.width;
this.height;
this.width;
this.height; //calculé automatiquement en fonction de la largeur du flux vidéo
this.videoWidth;
this.videoHeight;
this.streaming = false;
this.activeEffects = [];
this.images = {};
@@ -27,15 +29,19 @@ class CameraEditor {
"canplay",
(ev) => {
if (!this.streaming) {
this.height = this.video.videoHeight / (this.video.videoWidth / this.width);
// 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(this.height)) {
this.height = this.width / (4 / 3);
//calcul de la taille de la vidéo en fonction de la taille de la fenêtre pour qu'elle soit toujours visible
let aspectRatio = this.video.videoWidth / this.video.videoHeight;
if(window.innerHeight * aspectRatio > window.innerWidth){
this.width = window.innerWidth;
this.height = window.innerWidth / aspectRatio;
}else{
this.width = window.innerHeight * aspectRatio;
this.height = window.innerHeight;
}
this.videoHeight = this.video.videoHeight;
this.videoWidth = this.video.videoWidth;
this.video.setAttribute("width", this.width);
this.video.setAttribute("height", this.height);
this.canvas.setAttribute("width", this.width);
@@ -65,9 +71,21 @@ class CameraEditor {
requestAnimationFrame(() => this._frame());
}
_scaleEffect(x,y,width,height){
let xScale = this.width / this.videoWidth;
let yScale = this.height / this.videoHeight;
return {
x: x * xScale,
y: y * yScale,
width: width * xScale,
height: height * yScale
}
}
_drawEffects() {
for (let {type,x,y,width,height} of this.activeEffects) {
if(type == "thumbs_up"){
for (let effect of this.activeEffects) {
let {x,y,width,height} = this._scaleEffect(effect.x,effect.y,effect.width,effect.height);
if(effect.type == "thumbs_up"){
this._drawThumbsUp(x,y,width,height);
}
}

6
code/interface_borne/assets/js/main.js
View File

@@ -1,7 +1,11 @@
let cameraEditor;
let client
let canvas;
window.addEventListener("load", () => {
cameraEditor = new CameraEditor(document.getElementById("canvas"));
canvas = document.createElement("canvas");
document.body.appendChild(canvas);
cameraEditor = new CameraEditor(canvas);
client = new WebsocketClient((effects) => { cameraEditor.setEffects(effects); });
cameraEditor._frame();
}, false);

2
code/interface_borne/index.html
View File

@@ -4,10 +4,10 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css">
<title>Téléreview</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="assets/js/main.js"></script>
<script src="assets/js/camera_editor.js"></script>
<script src="assets/js/network.js"></script>