Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Plotly capture video using Ccapture . Render function handler

After trying a lot of stuff to get images, i finallyhave got a library named ccapture.js. which can capture WebGL components.

They have the following function

function render(){
    requestAnimationFrame(render);
    // rendering stuff ...
    capturer.capture( canvas );
}

render() 

How do i catch hold of the render function of the plotly graph ?
How does image render everytime we move the plot.?

Sorry, i know its getting too elementary but i couldnt figure out how to tie it up.

Thanks in Advance for the help

I’m not familiar with ccapture.js. Can you share a reproducible code snippet of what you tried so far? This would help us debug.

Here is the code pen.

They dont have a cdn so have linked the bower link instead

bower install ccapture.js

So What i want is a webm format.

Thanks for the quick reply

Hey @etienne Did you give it a shot to use ccapture.js with Plotly 3D Surface graphs?

The problem with event plotly_relayout is that it gives the image DataURI correctly during the first instance. When i try and move thee graph again i get GARBLED Image.

Also i am not able to see the 3D scatter plots in Internet explorer 11.
After looking into the specs, i found that Internet Explorer supports WebGl under experimental features flags. Have you ll ever tried to work on Internet Explorer with 3D graphs generated via webGL?

Workaround ideas : Is there a way to get the data from the plots and sent them to backend and generate multiple plot images at multiple instances and them form a video out of it? I plan to use plotly python module to do that task.

Ps : My Ultimate Goal is to record a Video why the user plays around with the 3D Graph.

No, I haven’t. It’s a little outside the scope of what these forums attempt to answer. This does sounds like a cool use case though, so I might try this out at some point. Sorry for the inconvenience.

1 Like

@etienne
Hey i got a workaround for the video.

Here is the Codepen. Only thing is that i am getting a black background for some reason.

Thanks for our help till now