Openvidu-browser NPM package doesn't work without Babel

OpenVidu v2 Issues developing apps
1

I am using Vite https://vitejs.dev/ as front-end developing and production building tool. It is modern very fast dev frontend server, but it doesn’t use Babel and support only modern browsers.

The problem is that Openvidu-Browser NPM package doesn’t work as expected in this environment, something is going wrong with import, please check this thread for more info Cannot read property 'call' of undefined in openvidu-browser client - #9 by Bullwinkle

It seems that Openvidu-Browser in this environment doesn’t have some parts that are already included while using Webpack-based developing and production solution with Babel.

I also discovered fun thing. As i use Vite with Vue, i don’t have to use vue-cli. But if i add @vue/cli-service to dev-dependencies, in dev mode imported openvidu script works fine. But still doesn’t work in production build.

How could i help to discover this issue more deep and find possible solution? Thanks!

2

Hello @Bullwinkle,

It seems there is a sort of incompatibility between openvidu-browser and Vite.

As we are not Vite users we don’t have any clue to what is going on. So, if you want openvidu-browser NPM package working with Vite, you should download openvidu-browser code (openvidu/openvidu-browser at master · OpenVidu/openvidu · GitHub), learn how to generate the NPM package (openvidu/package.json at master · OpenVidu/openvidu · GitHub), fix the build so it is compatible with Vite and contribute the patch.

If you want to see the CI script performing the NPM publishing, you can take a look:

Regards

3

Thank you, @micael.gallego!

Seems it is outside of my scope for now.

For everyone having same issue, this is how i import openvidu-browser in my Vue app:

created(){
    const script = document.createElement("script");

    script.src =
      "/assets/js/openvidu-browser-2.18.0.min.js";

    document.body.appendChild(script);

    script.addEventListener("load", () => {
      // OpenVidu browser loaded
      // Getting token from backend...

      let body = { secret: this.secret, room: this.roomId };

      postFetch("api2/video", body).then((respond) => {
        // When token recieved from backend start your connection

        this.token = respond;
        this.joinSession(); // Start you openvdidu logic here   
      });
    });
}
4

Using that strategy openvidu-browser is working as expected?

5

Didn’t test in production so far, but in development environment everything works as expected

чт, 19 авг. 2021 г., 16:15 Micael Gallego via OpenVidu <openvidu@discoursemail.com>:

6

Hello,

I also had some issues with the browser plugin in a build pipeline that validates for ES5 JavaScript.

You can see the results when running a ES5 validator:

$ npx es5-validator ./openvidu-browser-2.19.0.js 

[es5-validator] Your code is not ES5 Compatible. It's not ready to ship to production, otherwise it will break you App on iOS 9 or iOS 10.

Error: ECMAScript 5 validate failed when parsing ./openvidu-browser-2.19.0.js (formatted) (3500, 8)


  3490 |      * Based on
  3491 |      * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
  3492 |      * Digest Algorithm, as defined in RFC 1321.
  3493 |      * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
  3494 |      * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
  3495 |      * Distributed under the BSD License
  3496 |      * See http://pajhome.org.uk/crypt/md5 for more info.
  3497 |      */
  3498 |     function md5(bytes) {
  3499 |       if (typeof bytes === 'string') {
> 3500 |         const msg = unescape(encodeURIComponent(bytes)); // UTF8 escape
       |        ^ Invalid ECMAScript 5 syntax
  3501 |
  3502 |         bytes = new Uint8Array(msg.length);

Seems that the uuid package newer versions used in the browser plugin are to blame.

Cheers,
Mihail

1 Like
7

@mihailj thanks for sharing!

How do you think it could be fixed? Adding some package to app dependencies maybe?

8

I actually gave up and run Babel over the file. :blush: That’s why your thread subject seemed quite familiar. But I’m using a custom OpenVidu browser API build anyway so I’m not adding it to my project from package.json.

From what I’ve seen the uuid package does have ES5 files in openvidu-browser/node_modules/uuid/dist/esm-browser/ so the OpenVidu browser API should use these in the build process.

1 Like
9

@mihailj so you compiled your custom-made Openvidu-Browser with Babel, i got it right?
Never did things like this before, could you please provide small hint how to do it? Would be very heplful for my case.

UPD: But is it worth it? Seems i will just get openvidu-browser-2.19.0.min.js file i could already get in releases page in this case, right?

10

@micael.gallego i am actually trying to find a better way of importing Openvidu-Browser in my app, but need some help. Think it would be much better to add compiled OpenVidu js file to assets folder like this:

<script>
import * as OpenVidu from "../assets/openvidu-browser-2.18.0.min.js";
...
created(){
    this.OV = new OpenVidu();
}

But get this error.

image
image921×172 8.7 KB

In case of adding js file this way, how should i call OpenVidu consturctor?
Thanks in advance!

11

Hello @Bullwinkle, I’m sorry but I don’t know.

OpenVidu js file is designed to be used as it is used in our tutorials.

<script src="openvidu-browser-2.19.0.js"></script>
<script src="app.js"></script>

And then, in app.js

OV = new OpenVidu();
session = OV.initSession();

I don’t know how to use it with an import.

Maybe you can dig into TypeScript compiler and found the way to build a openvidu-browser.js build compatible with ESM.

1 Like
12

Remember this is the command used to generate openvidu-browser.js file from TypeScript code:

$ ../node_modules/browserify/bin/cmd.js --debug Main.ts -p [ tsify ] --exclude kurento-browser-extensions | ../node_modules/terser/bin/terser --source-map content=inline --output ../static/js/openvidu-browser-$VERSION.min.js

From here: openvidu/package.json at 288e6492e1b359187a8a560f0b31a83a26fefeab · OpenVidu/openvidu · GitHub

1 Like
13

Thanks, will investigate it!

14

so you compiled your custom-made Openvidu-Browser with Babel, i got it right?
Never did things like this before, could you please provide small hint how to do it? Would be very heplful for my case.

Yeah it is quite easy to compile the OpenVidu browser API.

Then I followed this tutorial to install and run Babel setup for ES5.

So I just run this command over my JS file:

npx babel ./static/js/openvidu-browser-2.19.0-custom.js -o ./static/js/es5/openvidu-browser-2.19.0-custom.js

UPD: But is it worth it? Seems i will just get openvidu-browser-2.19.0.min.js file i could already get in releases page in this case, right?

If it fixes your issue then sure, it’s the better way. But in my case the min.js file also doesn’t pass the ES5 validation… same problem with the uuid package compiled with the newer keywords.

1 Like
15

@mihailj thank you a lot! Will try do the same!

16

Hi @micael.gallego i found out right way of importing compiled JS!

As long as compiled OpenVidu-browser is self-invoked js function, this works for me:

import "../assets/openvidu-browser-2.18.0.min.js";

...
mounted(){
 // Get Token from backend
 let body = { secret: this.secret, room: this.roomId };

      postFetch("api2/video", body).then((respond) => {
        // When token recieved from backend start your connection

        this.token = respond;
        this.joinSession(); // Start you openvidu logic here   
      });
}

This seems to me more correct way of importing openvidu-browser.js, as in this case *.js will be included in final build of application. Final size of Video.js chunk in my build is 231 kb.

As long as i don’t know how to make OpenVidu-npm package work with Vite, will mark this as solution.

@mihailj probably it would be somehow helpful for you

@micael.gallego @mihailj Thank you guys for you help with investigating this case

1 Like
17

Thank you for sharing your findings

1 Like