How to use video sdk on chrome extension

Video SDK
,
1

How to Use Video SDK on a Chrome Extension?

Video SDK Type and Version

Web SDK 2.3.0

Description
Details on your question, workflow or the problem you’re trying to solve.

i want to make a Chrome extension with Zoom Video SDK, but when i followed the guide, it failed

import ZoomVideo from '@zoom/videosdk'

const client = ZoomVideo.createClient()

await client.init('en-US', 'Global', { patchJsMedia: true })

Error?
in the Chrome Dev Tools, it gives me the error

Loading the script 'https://source.zoom.us/videosdk/2.3.0/lib/js_media.min.js' violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. The action has been blocked.


{type: 'INVALID_PARAMETERS', reason: 'dependent assets are not accessible', errorCode: 5001}
1 Like
2

hi @Ruben5 ,

All web pages interacting with Zoom need to be CSP protected and you need to allow the access to the external script.
chrome has a policy, which by default I believe does not allow external scripts.
So this is the advice from Google
You use a Chrome extension’s Content Security Policy (CSP) by defining the content_security_policy key in your manifest.json file to control what resources the extension can load and execute. The default CSP blocks inline scripts, eval(), and remote scripts, so you must relax these restrictions in the manifest by explicitly allowing local or remote sources and other features if needed. For Manifest V3, the CSP is structured differently with specific keys for extension_pages and sandbox pages.

I hope that gets you further
All the best

John

1 Like
3

it seems Chrome Extension Manifest V3 does not allow external scripts.

can i bundle the Video SDK inside the Chrome Extension?

i checked the doc, and it seems the second parameter Global can be replaced with the local URL.

and In the official sample github.com/zoom/videosdk-web-sample

The code looks like this, it will load all the scripts from local

await zmClient.init('en-US', `${window.location.origin}/lib`);

So I changed my code like this

await client.init('en-US', chrome.runtime.getURL('vendor/@zoom/videosdk'), { patchJsMedia: true })

But it is still not working, and gives me the error:
Loading the script ‘``https://source.zoom.us/4.1.0/lib/av/js_media.min.js’`` violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’ ``http://localhost:3303``”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback. The action has been blocked.

i don’t know if it’s because in the Chrome extension
the local URL starts with chrome-extension:// not https://

1 Like
4

hi @Ruben5 ,

Sorry I am not an expert on Chrome extensions.
Yes, you can download the SDK and have it local.
I know of people who have written Zoom apps within an extension.
Their use was getting chat data, so not the video sdk
you could have auth issues because zoom likes to return to a URL.
All the best

John

5

now, i’m facing the issue

js_media.min.js:2 Failed to save to cache TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported
    at js_media.min.js:2:720157
    at async js_media.min.js:2:720061
    at async p (js_media.min.js:2:719883)

can i skip cache it?