I am developing Live Streaming application in ReactJS
let context = canvas.getContext('2d');
// set canvas size to 720p
canvas.width = 1280;
canvas.height = 720;
context.fillStyle = "gray";
context.fillRect(0, 0, canvas.width, canvas.height);
let renderSize = (video1ScaleMode === 'fill') ? fillSize(video1Size, canvasSize, 1) :
fitSize(video1Size, canvasSize, 1);
let xOffset = (canvasSize.width - renderSize.width) / 2;
let yOffset = (canvasSize.height - renderSize.height) / 2;
context.drawImage(video1, xOffset, yOffset, renderSize.width, renderSize.height);
I am able to bring webcamera inside the canvas, it is working fine. Now I want to bring a webpage as background layer of the camera feed.
I tried IFrame but it did not work because IFrame is not a Image Element or VideoElement. Is there any way to display webpage as background of camera. The web page will be dynamic one the values will be changing frequently.