phoboslab / jsmpeg

MPEG1 Video Decoder in JavaScript
MIT License
6.38k stars 1.43k forks source link

Display to area of existing canvas #233

Open samhmills opened 6 years ago

samhmills commented 6 years ago

Hey there,

Looking for a way (Or if it is already on the roadmap) that I could go about providing a position (x, y) and size (w, h) for the video to display on a provided canvas.

Additionally, are there methods that would allow me to control the draw rate, and thus the ability to draw over the image of a selected area of the canvas where the video is being written?

Thanks in advance,

samhmills commented 6 years ago

For anyone interested, the solution I've found is to draw one canvas on top of another:

const canvas = document.getElementById("dashboard");
const camera = document.getElementById("camera");
camera.style.display="none";

... inside loop

    const context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(camera, 300, 0, 800, 500);

Hope this helps anyone who may come across this!