Trame client + Javascript (e.g. MediaRecorder API) possible?

[topcat]

Hello,

I am building a web application that uses Trame for visualization. I need also to use the MediaRecorder API to record the screen with audio.

I am attempting to understand if I can use Javascript code and external libraries within Trame itself. There's some mention of using js_code to do this but I can't find any substantial documentation.

Or would a better approach be to separate the frontend and use Trame as a backend server if one wants to have a lot of JS frontend code / libraries.

Appreciate you help and thank you for your time :)

• jeetu

[jourdain]

So it is definitely possible to add your own JS library and drive it from trame. Ideally you want to wrap your JS code into a Vue.js component/plugin as a standalone UMD bundle. From there you will be able to instantiate it from Python, make method call on it and/or use the properties/events infrastructure.

But like you said, we didn't provide much information on how to do that. But we have many example assuming the vue component/plugin part is known. In fact you can use the cookie-cutter and create a new project for just "Component". Most of that setup will be done for you.

Feel free to start a new trame-recorder repo using the cookiecutter for a component only and then we can collaborate on it.

[topcat]

Hello Sébastien, Thank you so much for the information and I totally appreciate and shall take you up on your offer to collaborate on this :) I shall look into creating a Vue component using the cookiecutter. In general which approach would you think is the best when you have a lot of JS libraries / code : a) the Vue component b) Separating frontend and using Trame only as a backend. Thanks again for your help. Regards, Jeetu

…

On Fri, 26 Apr, 2024, 20:15 Sebastien Jourdain (Kitware), < ***@***.***> wrote: So it is definitely possible to add your own JS library and drive it from trame. Ideally you want to wrap your JS code into a Vue.js component/plugin as a standalone UMD bundle. From there you will be able to instantiate it from Python, make method call on it and/or use the properties/events infrastructure. But like you said, we didn't provide much information on how to do that. But we have many example assuming the vue component/plugin part is known. In fact you can use the cookie-cutter and create a new project for just "Component". Most of that setup will be done for you. Feel free to start a new trame-recorder repo using the cookiecutter for a component only and then we can collaborate on it. — Reply to this email directly, view it on GitHub <#503 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATXNJVNYQE4FONE2X2YMDY7JSABAVCNFSM6AAAAABG242MSCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMZYGIYTI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jourdain]

While I would have preferred b) a long time ago. Now, I always go with a) as it allow so much more reusability and maintainability. I know it may seems strange to create a component (that does not need to appear in the DOM) but that give some nice declarative way to drive actual JS operation.

[topcat]

Ok Sebastien. Thanks so much for these pointers. I shall look into creating a recorder Vue component and ping you if I hit any walls :) Appreciate it :) Regards, Jeetu

…

On Fri, 26 Apr, 2024, 20:46 Sebastien Jourdain (Kitware), < ***@***.***> wrote: While I would have preferred b) a long time ago. Now, I always go with a) as it allow so much more reusability and maintainability. I know it may seems strange to create a component (that does not need to appear in the DOM) but that give some nice declarative way to drive actual JS operation. — Reply to this email directly, view it on GitHub <#503 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATXNIFRPWBXRJDWP5M6U3Y7JVTBAVCNFSM6AAAAABG242MSCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMZYGY2DS> . You are receiving this because you authored the thread.Message ID: ***@***.***>