Telereview/code/interface_borne/assets/js/camera_editor.js

class CameraEditor {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
        this.video = document.createElement("video");
        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 = {};
        this._startup();
        this._loadImages();
        this.startupTime;
        this.frameCount = 0;
    }

    _startup() {
        navigator.mediaDevices
            .getUserMedia({ video: true, audio: false })
            .then((stream) => {
                this.video.srcObject = stream;
                this.video.play();
            })
            .catch((err) => {
                console.error(`Erreur pendant la lecture de la camera: ${err}`);
            });

        this.video.addEventListener(
            "canplay",
            (ev) => {
                if (!this.streaming) {
                    //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);
                    this.canvas.setAttribute("height", this.height);
                    this.streaming = true;
                }
            },
            false
        );
    }

    _loadImages() {
        this.images.thumbsUp = new Image();
        this.images.thumbsUp.src = "assets/img/thumbs_up.png";
    }

    _frame() {
        if(this.startupTime == undefined){
            this.startupTime = Date.now();
        }
        this.frameCount++;
        const context = canvas.getContext("2d");
        if(this.streaming) {
            if (this.width && this.height) {
                canvas.width = this.width;
                canvas.height = this.height;
                context.drawImage(this.video, 0, 0, this.width, this.height);
                this._drawEffects();
            }
        }
        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 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);
            }
        }
    }

    _drawThumbsUp(x,y,width,height){
        this.ctx.beginPath();
        this.ctx.drawImage(this.images.thumbsUp,x,y,width,height);
        this.ctx.stroke();
    }

    setEffects(effects) {
        this.activeEffects = effects;
    }
}