# Pure js for front end **URL:** \ **Category:** Integration\ **Created:** [August 7, 2021, 1:24pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147 "2021-08-07T13:24:36Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![jeezs](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/jeezs/32/953_2.png) [@jeezs](https://mediasoup.discourse.group/u/jeezs)\ **Post date:** [August 7, 2021, 1:24pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/1 "2021-08-07T13:24:36Z")
We want to use media soup on a server that doesn’t have node. How can we proceed to compile typescript to vanilla JS. Thanks. ---
**Author:** ![nazar-pc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/nazar-pc/32/369_2.png) [@nazar-pc](https://mediasoup.discourse.group/u/nazar-pc)\ **Post date:** [August 7, 2021, 2:14pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/2 "2021-08-07T14:14:41Z")
It is already compiled to plain JavaScript, but how are you going to run it without Node? UPD: Frontend has nothing to do with Node and is also already compiled, so I really don’t understand what it the problem that you have. ---
**Author:** ![jeezs](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/jeezs/32/953_2.png) [@jeezs](https://mediasoup.discourse.group/u/jeezs)\ **Post date:** [August 7, 2021, 3:35pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/3 "2021-08-07T15:35:05Z")
Thanks for the reply. The server parts of mediasoup is hold on a node server And the main app is hold on a puma (ruby) server and we’d like to integrate the client view of into of our ruby application. We been unable to extract the JavaScript for the client view to integrate it in our solution. If you had a clue? ---
**Author:** ![ibc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/ibc/32/1540_2.png) [@ibc](https://mediasoup.discourse.group/u/ibc)\ **Post date:** [August 7, 2021, 3:44pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/4 "2021-08-07T15:44:35Z")
I’m afraid I don’t understand anything that you said. mediasoup (server side) runs within a Node backend app or within a Rust backend app. That’s all ---
**Author:** ![nazar-pc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/nazar-pc/32/369_2.png) [@nazar-pc](https://mediasoup.discourse.group/u/nazar-pc)\ **Post date:** [August 7, 2021, 5:58pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/5 "2021-08-07T17:58:52Z")
You will have to build either Node.js or Rust application, it is just what mediasoup is. The client side is provided by [GitHub - versatica/mediasoup-client: mediasoup client side JavaScript library](https://github.com/versatica/mediasoup-client) for browsers and some other libraries for other platforms, those have nothing to do with Node.js. I guess it would make sense for you to get through overview on the website and make yourself more familiar with the project: [https://mediasoup.org/](https://mediasoup.org/) ---
**Author:** ![rramillien](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/rramillien/32/1147_2.png) [@rramillien](https://mediasoup.discourse.group/u/rramillien)\ **Post date:** [August 8, 2021, 10:57pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/6 "2021-08-08T22:57:23Z")
Hello, We are not front-end js developers, so probably our issue comes from a lack of skill in this domain. We have a media-soup server up and running. This part is OK. We want to create our own front-end application, and to do this, we started with the mediasoup demo. We simplified it at maximum to just get a simple streaming without chat, etc. So we ended up with a simple js “wrapper” class that call the client API to discuss with server end. Now, this wrapper is js, not ts, but still run in node, like the mediasoup demo. What we are looking for is a transpiled mediasoup-client library. Something like a “mediasoup-client.min.js”. We tried to transpile it by ourself, starting from node module in demo, but for now, we can’t make it work as expected. We don’t really know why because our simple js class is working well in node. We tried few solution to transpil mediasoup client from demo app, the latest one is : browserify -t [babelify --global --presets [ @babel/preset-env @babel/preset-react] ] lib/index.jsx -o build/mediasoup\_client.js The index.jsx only contains: import \* as mediasoupClient from ‘mediasoup-client’; This evening, I choose a simplest solution. Just keep our little wrapper and checkout mediasoup-client project to transpile it instead of trying to transpile node module from demo. This seems to me a good idea 😉 But again, this doesn’t work. A simple tsc command line send the errors below: src/Consumer.ts:199:8 - error TS2339: Property ‘emit’ does not exist on type ‘Consumer’. 199 this.emit(’@close’); ~~~~ src/DataConsumer.ts:141:3 - error TS2322: Type ‘string’ is not assignable to type ‘BinaryType’. 141 this.\_dataChannel.binaryType = binaryType; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/DataConsumer.ts:184:8 - error TS2339: Property ‘emit’ does not exist on type ‘DataConsumer’. 184 this.emit(’@close’); ~~~~ src/DataConsumer.ts:255:9 - error TS2339: Property ‘emit’ does not exist on type ‘DataConsumer’. 255 this.emit(’@close’); ~~~~ src/DataProducer.ts:180:8 - error TS2339: Property ‘emit’ does not exist on type ‘DataProducer’. 180 this.emit(’@close’); etc. A “npm run typescript:build” gives of course the same result. Please help us, Obi-wan, you are our only hope ! ---
**Author:** ![rramillien](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/rramillien/32/1147_2.png) [@rramillien](https://mediasoup.discourse.group/u/rramillien)\ **Post date:** [August 8, 2021, 11:39pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/7 "2021-08-08T23:39:34Z")
So, to summarize, the question is: How can we have a “mediasoup-client.min.js” ? Or, if not minimised, at least a single file. We could probably set-up a CI with hard work but we will work on this in the future because our project is far from the standards of the web (cordova, ruby, js, typescript now, …). We are in phase of POC and our main concern is to use mediasoup client without having to import manually each js file and each files of mediasoup client dependencies… Do you know a solution ? 😃 Best regards, Régis ---
**Author:** ![BronzedBroth](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@BronzedBroth](https://mediasoup.discourse.group/u/BronzedBroth)\ **Post date:** [August 9, 2021, 1:34am UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/8 "2021-08-09T01:34:12Z")
I’m not sure it can be transpiled like that, I ended up building it and running the client and copying it into a hard-file manually it doesn’t change often so it’s fine like that anyways, just globally scope it so your other script can call it. ---
**Author:** ![rramillien](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/rramillien/32/1147_2.png) [@rramillien](https://mediasoup.discourse.group/u/rramillien)\ **Post date:** [August 9, 2021, 9:35am UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/9 "2021-08-09T09:35:37Z")
Hello CosmosisT, Thank you. Finally, tsc is working on windows but not “as-is” on my debian. But the tsc --outFile do not works due to commonJS. So, I used browserify to output a single js: browserify lib/index.js -o build/mediasoup-client.js But the simple line “this.\_mediasoupDevice = new Device();” does not work. Device is undefined. So, I think tsc + browserify can be a solution. I still need to search for the coming errors. Unless you have a simple working solution ? Best regards, Régis ---
**Author:** ![BronzedBroth](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@BronzedBroth](https://mediasoup.discourse.group/u/BronzedBroth)\ **Post date:** [August 9, 2021, 6:42pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/10 "2021-08-09T18:42:35Z")
Not sure why you’re doing all that… Kind of made it difficult to assist you, maybe stackoverflow for your questions in regards to browserify/webpack usage and globally scoping the client for use. ---
**Author:** ![rramillien](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/rramillien/32/1147_2.png) [@rramillien](https://mediasoup.discourse.group/u/rramillien)\ **Post date:** [August 9, 2021, 9:50pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/11 "2021-08-09T21:50:51Z")
Hello CosmosisT, I’m not sure myself why I’m doing that 😉 As I said, I’m not a js or frontend developer. So, I’m learning by trying to use mediasoup. So, if you have a simple “step by step” way to use mediasoup client outside a standard web project (a cordova one for example). I’ll be super happy 🙂 I tried what you said “I ended up building it and running the client and copying it into a hard-file manually” but there is many refactoring to do, not just copy/paste. Even if you can’t do anything more for us, I appreciate your help. Best regards, ---
**Author:** ![BronzedBroth](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@BronzedBroth](https://mediasoup.discourse.group/u/BronzedBroth)\ **Post date:** [August 10, 2021, 12:52am UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/12 "2021-08-10T00:52:59Z")
1. npm install mediasoup-client@3 --save 2. npm install -g browserify 3. Create a file called, raw.js and write to it the following… ```auto window.mediasoup = require("mediasoup-client"); ``` Then save. 4.Run the following in the directory (DIR) of raw.js: ```auto browserify raw.js -o mediasoup-client.min.js ``` 1. In your wrapper script, call: ```auto let Device = new window.mediasoup.Device(); ``` 1. Enjoy. Some work necessary from here but that’s globally linking it. Some modifications may be necessary. ---
**Author:** ![rramillien](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/rramillien/32/1147_2.png) [@rramillien](https://mediasoup.discourse.group/u/rramillien)\ **Post date:** [August 10, 2021, 8:50pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/13 "2021-08-10T20:50:44Z")
Yes! 🙂 It works great. Thank you cosmosisT ! So, browserify was the solution in my case. I was missing the “window” in “window.mediasoup”. I was not able to reach the device class correctly. Thanks a lot ! 🙂 ---
**Author:** ![BronzedBroth](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@BronzedBroth](https://mediasoup.discourse.group/u/BronzedBroth)\ **Post date:** [August 10, 2021, 11:07pm UTC](https://mediasoup.discourse.group/t/pure-js-for-front-end/3147/14 "2021-08-10T23:07:03Z")
Yes. Global scope is required. If you were confused there however you should brush up on scope so you’re not confusing it. Very important. Good luck.