Export to Video

[sammdec]

It would be cool to export a replay session as a video file, but I dont know what api's I would need to do that and if its event possible

[Yuyz0112]

What kind of video file? mp4, mov, etc?
I think the possible way to do that is replay the session in a headless browser and use ffmpeg to capture the browser.

[warely]

I’d also love to see this feature. MP4 or webp would be a good choice. Honestly any format works, many options to convert to format of choice.

My fundamental concern here is I see that the player works by records by loading the source url in an iframe and then playing the user events within the sandboxed iframe. But what if we are viewing a session from some time ago, and the source url has changed. For example, in active sites like Wordpress or e-commerce, there could be new content that has updated. Or if the stylesheet updates.

Would the replay still work as intended?

[Yuyz0112]

@warely

I see that the player works by records by loading the source url in an iframe

The replayer replays in an iframe but does not load the source URL. Actually, it also records the DOM and tries to inline the stylesheets. So only media like images and cross-domain stylesheets could not be stored and may cause the replay not accurate when it was changed.

[warely]

Ok, I see. Is there any option you see to build in video format if possible for stylesheets to change?

[Yuyz0112]

@warely I think it’s impossible, just like some image has been removed.
But the change of cross domain stylesheets and images should not happen very often.

Back to this thread, a ffmpeg plugin may help people who want to export a video from replayer when they confirm the recording is correct.

[praneetnadkar]

What kind of video file? mp4, mov, etc?
I think the possible way to do that is replay the session in a headless browser and use ffmpeg to capture the browser.

could you suggest a way to do this. I think the puppeteer-recorder wont work here as it records clicks and events. Is there a way to create a video file directly from the json that rrweb recorded

[sabatale]

+1

[Yuyz0112]

You can try to run a browser programmatically(like use puppeteer) to replay the session in a web page. Then use FFmpeg to capture the browser and save as a video.

[myrider]

You can try to run a browser programmatically(like use puppeteer) to replay the session in a web page. Then use FFmpeg to capture the browser and save as a video.

Can you elaborate? thank you

[pipti]

+1

[Yuyz0112]

@myrider

For example, you can use timecut, which uses puppeteer and FFmpeg under the hood.

First, you need to prepare an HTML file including the recorded events and the replayer code, then you can do something like this with timecut:

# you can customize viewport size, fps, etc
# you need set duration time

timecut ./YOUR_HTML_FILE --viewport=800,600 --fps=30 --duration=4 --output=video.mp4

An example: http://lab.myriptide.com/syncit-demo/record-2020-08-17_23.00.55.mp4

[xukaisjz]

DevTools listening on ws://127.0.0.1:50353/devtools/browser/0d8ffdca-dcea-4478-8df1-50e59be024cf
Capture Mode: Screenshot
Going to file://C:\Users\Administrator\Desktop\makevideo\replay.html...
[0829/191220.075:INFO:CONSOLE(0)] "Blocked script execution in 'file:///C:/Users/Administrator/Desktop/makevideo/replay.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: file:///C:/Users/Administrator/Desktop/makevideo/replay.html (0)

应该如何解决

[Yuyz0112]

@xukaisjz 这个日志应该没有影响

[xukaisjz]

在截图完成之后，出现了一个错误：Error: spawn ffmpeg ENOENT，内容如下 Capturing Frame 113 to D:\makevideo\timecut-temp-1598833012487\image-000000113.png... Capturing Frame 114 to D:\makevideo\timecut-temp-1598833012487\image-000000114.png... Capturing Frame 115 to D:\makevideo\timecut-temp-1598833012487\image-000000115.png... Capturing Frame 116 to D:\makevideo\timecut-temp-1598833012487\image-000000116.png... Capturing Frame 117 to D:\makevideo\timecut-temp-1598833012487\image-000000117.png... Capturing Frame 118 to D:\makevideo\timecut-temp-1598833012487\image-000000118.png... Capturing Frame 119 to D:\makevideo\timecut-temp-1598833012487\image-000000119.png... Capturing Frame 120 to D:\makevideo\timecut-temp-1598833012487\image-000000120.png... Elapsed capture time: 31983 [0831/081738.875:WARNING:gpu_process_host.cc(1165)] The GPU process has crashed 1 time(s) Error: spawn ffmpeg ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19) at onErrorNT (internal/child_process.js:469:16) at processTicksAndRejections (internal/process/task_queues.js:84:21) { errno: 'ENOENT', code: 'ENOENT', syscall: 'spawn ffmpeg', path: 'ffmpeg', spawnargs: [ '-framerate', 30, '-i', 'D:\\makevideo\\timecut-temp-1598833012487\\image-%09d.png', '-pix_fmt', 'yuv420p', '-y', 'D:\\makevideo\\video.mp4' ] } 在 2020-08-29 19:57:14，"yz-yu" <notifications@github.com> 写道： @xukaisjz 这个日志应该没有影响 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[homeant]

because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

[Yuyz0112]

I've built rrvideo for this.

[pittQ]

环境：
"rrweb": "^2.0.0-alpha.4",
"rrweb-player": "^1.0.0-alpha.4",
先用rrweb进行脚本录制，录制的脚本可以正常播放：

然后通过rrvideo命令转成视频：
命令如下： rrvideo --input F:\xxxxxx\test\data.json
结果视频区域没有转换出来，请问是怎么回事？
视频的时长也不对，只有11s