Openvidu Web Component Modal Modification

OpenVidu v2 Issues developing apps
1

Hi,

I can see that openvidu web component has 4 files. The index.html, app.js, openvidu-webcomponent.css and openvidu-webcomponent.js.

After clicking the ‘Join’ button, a modal appear as in the picture below. Which I checked the index file and I couldn’t find the modal to update.

Capture
Capture1211×633 128 KB

How can I bypass or modify the modal above?

Thanks

2

Editing room-config component
https://docs.openvidu.io/en/2.14.0/demos/openvidu-call/#understanding-code-structure

And rebuilding the webcomponent https://docs.openvidu.io/en/2.14.0/developing/#compiling-openvidu-webcomponent

3

You guys are amazing. Thank you for the quick response.

I followed the first link you provided up there and updated the room-config of the openvidu-tutorial. Then I try to rebuild the webcomponent using npm run build:openvidu-webcomponent, but I’ve been getting error. Below is the error.

> openvidu-call@2.14.0 build:openvidu-webcomponent C:\users\umar dayyabu\documents\projects\openvidu-call\openvidu-call-front
> node -e "require('./openvidu-webcomponent-build.js').prepareWebcomponent()" && ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none && node -e "require('./openvidu-webcomponent-build.js').buildWebcomponent()"

internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module 'fs-extra'
Require stack:
- C:\users\umar dayyabu\documents\projects\openvidu-call\openvidu-call-front\openvidu-webcomponent-build.js
- C:\users\umar dayyabu\documents\projects\openvidu-call\openvidu-call-front\[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\users\umar dayyabu\documents\projects\openvidu-call\openvidu-call-front\openvidu-webcomponent-build.js:1:12)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\users\\umar dayyabu\\documents\\projects\\openvidu-call\\openvidu-call-front\\openvidu-webcomponent-build.js',
    'C:\\users\\umar dayyabu\\documents\\projects\\openvidu-call\\openvidu-call-front\\[eval]'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! openvidu-call@2.14.0 build:openvidu-webcomponent: `node -e "require('./openvidu-webcomponent-build.js').prepareWebcomponent()" && ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none && node -e "require('./openvidu-webcomponent-build.js').buildWebcomponent()"`
npm ERR! Exit status 1

Thanks.

4

Run npm install to install dependencies

5

I installed the node dependencies before executing the build command. Yet, it didn’t work.

Could this be the Node version I’m running on?
npm --v : 6.14.4
node -v : v12.18.0

Thanks.

6

I think that you have troubles with the paths because of you’re working on Windows.

You should modify the commands slashes and paths to make it works in Windows

7

Thanks,

I noticed that now and I modified it. But, I found out that I don’t have a ‘dist’ npm folder. This could potentially be another reason.

I try to run ‘npm run-script build’ or ‘npm run build’ to see if it will install the dist folder. But it didn’t work.

Thanks.

8

No, dist directory will be created automatically