Depedent assets are not accessible when running Client.init in angular 12

Video SDK Web
1

I need help getting setup with the video sdk version v1.1.0 in Angular 12.1.0. The documentation for step 3 states we have to deploy the sdk assets using webpack before we begin using the client.

In angular i went ahead and installed the angualr builders library to create a custom webpackconfig, ive tried a few things but my most basic version has the webpack config looking exactly like the documentation.

module.exports = {
plugins: [
new CopyPlugin({
patterns: [{
from: ‘node_modules/zoom/videosdk/dist/lib’,
to: ‘dest/zoom-libs’ // The destination folder, which you can rename as you wish
}
],
})
]
}

The data is getting copied over to the directory dist\ScreenShare\dest\zoom-libs
so inside app.component.ts on ngOnInit, i run _CLIENT.init(‘en-US’, ‘dist\ScreenShare\dest\zoom-libs’);
I’ve tried a few ways hoping my path was the issue but no matter what path i specify i keep getting the same error.

tries paths such as
_CLIENT.init(‘en-US’, ‘http://localhost:4200/node_modules/zoom/videosdk/dist/lib/’);

_CLIENT.init('en-US', 'http://localhost:4200/assets/lib/');

When i run it i can access the file at //http://localhost:4200/assets/lib/webim.min.js
from the browser but the error remains.

I’m hoping there is a simpler way to get this working in angular then being force to change the webpack config. If not I could use some help in getting setup with an angular demo of some sort.

The error im getting states “type”:“INVALID_PARAMETERS”,“reason”:“depedent assets are not accessible”"

zoomerror
zoomerror746×168 7.84 KB

video sdk version v1.1.0 in Angular 12.1.0.

To reproduce
1.) Create new angular 12.1 app
2.) Add the video sdk
3.) Create new custom-webpack.config.js file and dependencies & add
const { override, addWebpackPlugin, overrideDevServer } = require(‘customize-cra’);
const path = require(‘path’);
const CopyPlugin = require(‘copy-webpack-plugin’);
const WriteFilePlugin = require(‘write-file-webpack-plugin’);

console.log(“HERERERERERE”);
const addWriteFilePlugin = (config) => {
config.plugins.push(new WriteFilePlugin());
config.output.futureEmitAssets = false;
// Support Webpack 4.29.0 breaking change · Issue #74 · gajus/write-file-webpack-plugin · GitHub
return config;
};

const addDevServerCOOPReponseHeader = (config) => {
config.headers = {
…config.headers,
“Cross-Origin-Embedder-Policy”: “require-corp”,
“Cross-Origin-Opener-Policy”: “same-origin”
}
return config
}

module.exports = {
plugins: [
new CopyPlugin({
patterns: [{
from: ‘node_modules/zoom/videosdk/dist/lib’,
to: ‘dest/zoom-libs’ // The destination folder, which you can rename as you wish
}
],
})
]
}

4.) Add angular builders and change angular.json
“architect”: {
“build”: {
//“builder”: “@angular-devkit/build-angular:browser”,
“builder”: “@angular-builders/custom-webpack:browser”, //Add this and run ng build
“options”: {
“customWebpackConfig”: {
“path”: “./custom-webpack.config.js”
},

…
…

“serve”: {
//“builder”: “@angular-devkit/build-angular:dev-server”,
“builder”: “@angular-builders/custom-webpack:dev-server”, add this and after build run ng serve

  • Device: Desktop
  • OS: Windows 10
  • Browser: Chrome
  • Browser Version: Version 91.0.4472.124 (Official Build) (64-bit)

Please note this is a personal account and not the account tied to my work application.

2

I got the init working by simply creating a new demo angualr app and setting the _CLIENT.init to
_CLIENT.init(‘en-US’, ‘http://localhost:4200/assets/lib’);

im guessing messing around with webpack and config settings must have messed something up.

3

Hey @dataonedigital ,

Here is how you can do it with the angular.json file:

Within the build object, add this object to the assets object:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@zoom/videosdk/dist/lib/",
    "output": "./node_modules/@zoom/videosdk/dist/lib/"
  }
],

With version 1.1.3, you can also use the new Dependent Asset CDN by setting the string to Global:

client.init('en-US', 'Global');

https://marketplace.zoom.us/docs/changelog#publications/video-sdk-web-v1-1-3

Thanks,
Tommy

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.