recording a div as a video

[austere sandal]

hello my friends

I am doing a video editing software focused on subtitles using Tauri and Svelte

I am making the video inside a div element. So inside the div there's a video element and others elements to show the subtitles (essentially p element)

My question is about exporting the project to a video file. Is it possible to record the div content for the duration of the video and save it as a video file?

I really don't want to use ffmpeg because it sucks handling Arabic subtitles.

Thank you

[violet gazelle]

Subtitling is irrelevant to the capture. The subtitles are usually added after the capture. If you are using some kind of dictation system to do real time transcription of your narration, that still has no impact on the choice of capturing technology.

There is a Javascript Screen Capture API, but this does not offer any advantage over using FFMPEG or OBS, aside from being self-contained.

[austere sandal]

I said subtitle to give you an idea but in reality it's more real text anchored in the video.

I'm gonna look into the screen capture api thank you

[violet gazelle]

I said that the Screen Capture API does not offer any advantage other than being self contained. I actually mentioned it not as a suggestion to use. It was more a recommendation to not waste your time trying to use it.

Regardless of the screen capture method you use, it captures every pixel on the screen, as long as you don't use excessive compression. That means it doesn't matter what language text you have. The capture software doesn't even know that it's text. They are just pixels to be captured.

[austere sandal]

I don't need it to recognize if it's text or not. It's a special edition software for a unique case, I can explain it to you if it needs more clarity haha

I guess I can still try ffmpeg again. The reason why I don't want to use it is because the ffmpeg results and the preview in my div will be different on the end (or I still can try really hard to make it looks the same as possible)

[violet gazelle]

I said it doesn't know if there is text present to emphasize the fact that the presence of Arabic text should be irrelevant to the capture method.

[austere sandal]

oh right
wait, are you saying ffmpeg can screen record the div?

[violet gazelle]

It can, but it would be easier to use something like OBS. Doing it with ffmpeg would require you to know the exact coordinates.

[austere sandal]

Okay, and OBS do have a CLI so that it is all contained in my software without the user needing to do anything?

[violet gazelle]

I thought you were doing it on your side for something like making a presentation or tutorial. If you need to capture on the client side, then you must use the Javascript Capture API. However, that might no be ideal. It requires the user to grant explicit permission and they have to manually specify the area to capture. Capturing a specific div without any user interaction is explicitly prohibited for security. There is absolutely no possible way to do this without exploiting an unpatched security vulnerability.

[austere sandal]

oh
this is more complicated than I though it'll be

I guess converting the user timeline to a ffmpeg command to export the video is my only option here.