Stream a static image from canvas

[aledg]

Hi guys,
I'm using your mixer API, I want to stream a simple static image from canvas.

Starting from your exemple canvas_streaming I try to change the code like this:

function createCanvasStream() {

var canvasContext = canvas.getContext("2d");
var canvasStream = canvas.captureStream(30);
var img = document.getElementById("myimage");
canvasContext.drawImage(img, 10, 10);
return canvasStream;

}


I draw correctly inside canvas but I can't stream the content to WCS...

Any suggestion?

 

[aledg]

Following your suggestion to another post in the forum I've change my f(x) like this:

function createCanvasStream() {
    
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillStyle = "red";
    ctx.fillRect(0,0,320,180);
    ctx.strokeStyle = 'black';
    ctx.fillStyle = "green";

    (function loop() {
        ctx.fillText("Hello World", 10, 50);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();

    return canvas.captureStream(30);
  
}

this example work fine and I can stream a red background and the text Hello world
But .... I want to stream an image ... and I've change the code like this...

function createCanvasStream() {
    
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("myimage");

    (function loop() {
        ctx.drawImage(img, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();

    return canvas.captureStream(30);
  
}

Inside the canvas I can see the image drawed fine but the streaming is empty...
What's the problem?

 

[Max]

My function for drawing an image on a canvas looks like this:

function createCanvas() {
    var canvasContext = canvas.getContext ("2d");
    var img = document.getElementById ("myimage");
    (function loop(){
        canvasContext.drawImage(img, 10, 10);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();   
}

Stream post function like so:

function publishStream(session) {
    publishStream = session.createStream({
        name: "test-canvas",
        display: localDisplay,
        constraints: {
            audio: false,
            video: false,
            customStream: canvas.captureStream(25)
        }
    });
    publishStream.publish();
}

The complete code can be found in the archive.

The image to be drawn on the canvas needs to be placed locally on the web server or on a web server in the same domain.
If the canvas image is loaded from the Internet, the chrome browser throws an exception "Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLCanvasElement': Canvas is not origin-clean."
Therefore, no stream is created.
more details:

Changes to Cross-Origin Requests in Chrome Extension Content Scripts

 

[aledg]

Thanks, it was a CORS problem