Pannellum: Record a video

[truszko1]

I know this isn't strictly pannellum's responsibility, but what I want to achieve is based on pannellum. Do you have any suggestions on how I could go about recording a video file of the pannellum viewer? If I click around the panorama, moving it around, how would I project this maybe onto a canvas and record it? I tried to google some approaches, but I can't wrap my mind around how this would be done. Thanks!

[mpetroff]

I'm going to assume you want to do with programmatically (otherwise, a screen recorder would be the easiest thing to do). To record the view, you would need to call var renderer = viewer.getRenderer() and then var img = renderer.render(viewer.getPitch(), viewer.getYaw(), viewer.getHfov(), {'returnImage': true}). However, this is too slow to get a reasonable video frame rate in real-time but could work if you just wanted to animate a particular set of movements. I also have no idea how you'd convert a set of frames into a video in a browser, short of compiling FFmpeg to WebAssembly.

[mpetroff]

It looks like there might be a better way to do this, by using the <canvas> element's captureStream() method in conjunction with the MediaStream Recording API. You can access Pannellum's <canvas> with viewer.getRenderer().getCanvas().

[truszko1]

Thank you so much! I will try it all out.

[truszko1]

I was able to figure it out!

1. I took the canvas from Pannellum's viewer using your API, and then took its MediaStreamTrack.
2. I then took the browser's audio MediaStreamTrack using regular WebRTC specs and APIs.
3. I then combined both tracks into a single WebRTC MediaStream.
4. The last element was taking the RecordRTC library that lets me record the combined stream and output it as a blob, which then I can take and do whatever.

Thank you, @mpetroff!

[mpetroff]

Great! Glad to hear it worked.