Canvas - Capture iFrame instead a video

[Rafael Ribeiro]

Hello Max,

Checking Canvas DOCs, we notice that is loading a video example file.

We would like to capture an iframe div or specific div on page. How to?

 

[Rafael Ribeiro]

Steps we have tried:

1-) Write a canvas HELLO WORLD by Javascript:

<canvas width="320" height="176" id="canvas"></canvas>
                
<script>
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.strokeText("Hello World", 10, 50);
</script>

2-) startStreaming function:

function startStreaming() {
    var session = Flashphoner.getSessions()[0];
    var streamName = field("urlServer").split('/')[3];
    //var constraints = getConstraints();
    var test = canvas.captureStream(25);

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints:{
            audio: false,
            video: false,
            customStream: test
    }

RESULT: No errors, but CANVAS hello world was not passed to stream.



Attempt 2:

We have changed:
var test = canvas.captureStream(25);
to:
var test = iframe.captureStream(25);

Attempting to get the iframe stream to WCS server, but we got:

canvas_streaming.js:99 Uncaught TypeError: iframe.captureStream is not a function

 

[Max]

Streaming only works for canvas and video elements and in Chrome and Firefox browsers. Capturing from iframe does not work.

When captured from a canvas element, the browser considers it filled black by default, so if the text is also painted in black, you cannot see back text on black screen.

In addition, on canvas, you need to draw cyclically so that there is a frame change.

The attached archive contains the example based on your code to capture text from canvas to a stream. Then this stream can be played using the WCS player.

 

[Rafael Ribeiro]

Thanks Max.

We are trying to find out a way to sent PowerPoint live without Screen Sharing.

 

[Max]

No, without screensharing, you won't be able to capture a stream from PowerPoint.
To capture a stream from the canvas, you need to draw the stream on the canvas.

 

[Rafael Ribeiro]

Got it Max.

Thanks, we maybe will start a EXE software to sent out RTMP from PPTX.
Screenshare use a lot of CPU, and once we got screen + webcam, freezes happens.

 

[Max]

Thanks, we maybe will start a EXE software to sent out RTMP from PPTX.
Screenshare use a lot of CPU, and once we got screen + webcam, freezes happens.

Yes, browser uses CPU while capturing screen, but another applications (OBS Studio for example) also require a lot of CPU while streaming unless hardware acceleration is enabled.
So this seems as common drawback: presenter should have a powerful desktop with GPU supported by browser/OBS/etc.
About freezes, there can be the following reasons for them:
1) Hardware is not powerful enough to stream (as we discussed above)
2) Publisher channel is not enough to stream screen share (FullHD) and webcam (HD for example) simultaneously. In this case, reducing webcam resolution|bitrate should help. If channel is lossy, switching to TCP transport for WebRTC should also help (RTMP publishing can also be useful, but it gives more latency comparing to WebRTC).