Trying to include the JS SDK into an exisiting VueJS project

I have the same problem, but in React. I install zoom via npm.

I install via npm too. You tried using CDN? I will try now and see.

yes, but i couldn’t do it. If you can will make working, show me please.

yes, i couldn’t do it too… I forgot the nature of the Vue templates. Probably only works with NPM. You got the “Unexpected token” problem too?

yes. i think the only way is via npm. But for a reason not have the “JsMediaSDK_Instance” reference when try create the object in this part:

{
key: “creatAVSocket”,
value: function () {
function e() {
var e = this.props,
n = e.meeting,
r = e.baseStaticUrl,
o = new JsMediaSDK_Instance(),
i = (0, g.getVersionFromURL)®,
a = function () {
function e(e, t) {
this.initStatus = e, this.socketCallBack = t, this.canvasInfo = {}, this.joinVoipTimes = 0;
}
return e;
}

I dont know

@rodrigo currently, jssdk just support react 15.
1 install cdn version


2.download all dependencies.

3. check whether you have invok thoes function if haven’t download dependencies.

https://zoom.github.io/sample-app-web/ZoomMtg.html#prepareJssdk
https://zoom.github.io/sample-app-web/ZoomMtg.html#preLoadWasm

Thanks for the reply.
The CDN version works well, but I did not want to have to use the zoom SDK in an iframe, but locally importing via npm.
At the moment this is the only alternative?
Thank’s for your time

note: we change jssdk name to websdk

here is a demo use vue and zoom websdk npm version.
the root cause is the vue can’t provide a proxy to access the websdk static resource which located in node_moduls/zoomus-jssdk/
so need to use the CDN to solve the websdk dependencies.
ZoomMtg.setZoomJSLib(‘https://dmogdx0jrul3u.cloudfront.net/{WEBSDK_VERSION}/lib’, ‘/av’);

2 Likes

hello jack

I fellow your note and I change jssdk name to websdk as you said
but I am getting an error ($ is not defined) like the picture attached

could you please help me

Hey @smartpodium,

Please follow the official Web SDK guide here:

Thanks,
Tommy

Hi @tommy I’m new to Vue and also it’s my first time that i’m integrating zoom with my Laravel+vue project.
I’m facing same problem like this.
I read the documentation but I’m still unable to solve this error.

bellow script tag is already included in my main file which is welcome.blade.php

 <script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

before that i was getting 404 error for including below files from node_modules so i copied zoom folder so static folder.
and added these in head ( i copied zoomus folder from node_modules to my public/assets/zoomData folder)

    <link type="text/css" rel="stylesheet" href="{{ asset('assets/zoomData/websdk/dist/css/bootstrap.css')}}" />
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/zoomData/websdk/dist/css/react-select.css')}}" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

and this below code is in my vue component file in script tag

import { ZoomMtg } from '@zoomus/websdk';
ZoomMtg.setZoomJSLib("assets/zoomData/websdk/dist/lib", '/av'); 
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

please mention something i’m doing wrong.

i installed zoomsdk using

 npm install @zoomus/websdk --save

dependencies in my package.json

Hey @samdeveloper404,

Your steps look correct. Can you please share the error you are getting and screenshots?

Thanks,
Tommy

Hi @tommy thanks for reply. i jumped to another work because i was unable to solve it and i did not noticed your reply… I am sorry for that… i am still getting errors see below.

403 error do not know what is wrong… api key and secret are correct


@samdeveloper404, make sure you use websdk1.7.10. you can set
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.10/lib’, ‘/av’);
the correct download wasm link is https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm

Hi @JackYang !
i am using same as you mentioned

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');

but these error still exist

Hey @samdeveloper404,

Where in your code are you putting that line? Can you please share your Web SDK code so we can help debug?

Thanks,
Tommy

@tommy i got help from https://github.com/sartikadhaslam/laravel-vue-zoomwebsdk
and with that help i completed it .
Thank you for your help!

1 Like

Hey @samdeveloper404,

Happy to hear you got this sorted out! Thanks for sharing that Laravel-Vue community-built solution on Github.

Best,
Will

1 Like