Pure js for front end

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.

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.

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?

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

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 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/

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 :wink:

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 !

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 ? :smiley:

Best regards,

Régis

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.

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

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.

Hello CosmosisT,

I’m not sure myself why I’m doing that :wink:
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 :slight_smile:

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,

  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…
window.mediasoup = require("mediasoup-client");

Then save.
4.Run the following in the directory (DIR) of raw.js:

browserify raw.js -o mediasoup-client.min.js
  1. In your wrapper script, call:
let Device = new window.mediasoup.Device();
  1. Enjoy. Some work necessary from here but that’s globally linking it. Some modifications may be necessary.

Yes! :slight_smile:
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 ! :slight_smile:

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.