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 = canvas.width;
        this.height;
        this.streaming = false;
        this.activeEffects = [];
        this.images = {};
        this._startup();
        this._loadImages();
    }

    _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) {
                    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);
                    }

                    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() {
        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());
    }

    _drawEffects() {
        for (let {type,x,y,width,height} of this.activeEffects) {
            if(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;
    }
}