# Web SDK via Vue (Black Screen) **URL:** \ **Category:** Web\ **Created:** [June 21, 2020, 6:19pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952 "2020-06-21T18:19:08Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 21, 2020, 6:19pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/1 "2020-06-21T18:19:08Z")
Hello. I’m having a hard time getting beyond a black screen trying to `ZoomMtg.join()` in a Vue app. I am passing in a meeting config object that looks like this: `{ apiKey: "my-key", leaveUrl: "a url", meetingNumber: 12345, signature: "generated signature", userEmail: "email address", userName: "a name" }` via: ` ZoomMtg.init({ leaveUrl: meetConfig.leaveUrl, isSupportAV: true, success: function() { console.log("Successfully initialized meeting. Config:"); console.log(meetConfig); ZoomMtg.join(meetConfig); }` Initially I was seeing this error in my console: `webim.min.js:1 Uncaught SyntaxError: Unexpected token '<'` `js_media.min.js:1 Uncaught SyntaxError: Unexpected token '<'` I then tried adding this line: ` ZoomMtg.setZoomJSLib( "https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib", "/av" );` above where I do this: ` ZoomMtg.preLoadWasm(); ZoomMtg.prepareJssdk();` and now the JS error goes away but is replaced by: `DevTools failed to load SourceMap: Could not load content for https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE` (Which might just be a chrome thing) In any case I continue to only see a black screen but I noticed that my #zmmtg-root div is now: `
0
` but nothing else. Also, within my Vue component, I added my own `
` and in the code did this: `$("#zoom-holder").append($("#zmmtg-root"));` to move the `zmmtg-root` into the component and not directly on the body. Any ideas? I’ve searched around in this forum for other people doing Vue integrations but haven’t found anything that looks like a solution. Thanks in advance. **Which version?** I’m using zoomus/websdk version “1.7.8” and trying to get it working on Chrome at the moment. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [June 22, 2020, 9:50pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/2 "2020-06-22T21:50:01Z")
Hey @mattbrand, Not super familiar with view, can you use npm to install the Web SDK? > **[@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk)** > > Zoom Web SDK Also, checkout the sample app so you can see the code snippets and the dependencies: > **[zoom/sample-app-web](https://github.com/zoom/sample-app-web)** > > Zoom Web SDK Sample App. Contribute to zoom/sample-app-web development by creating an account on GitHub. Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 22, 2020, 10:04pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/3 "2020-06-22T22:04:52Z")
Yup, I used npm to install the package. Vue is node-based. ---
**Author:** ![bdeanindy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bdeanindy/32/154_2.png) [@bdeanindy](https://devforum.zoom.us/u/bdeanindy)\ **Post date:** [June 22, 2020, 11:11pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/4 "2020-06-22T23:11:09Z")
Hey @mattbrand I would agree with Tommy that using the Sample App as a way to isolate the issue to determine if it is a Vue.js related item, or not would be a good first step. Could you test this and let us know please sir? ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 23, 2020, 1:08am UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/5 "2020-06-23T01:08:32Z")
I just ran the sample app and it “mostly worked.” I get most of the embedded Zoom UI and can join the meeting (it told me that it couldn’t find a camera so I couldn’t start video) but seemed to generally be ok. I’m going to try and compare dependencies and the libraries that are being used to see if that’s what’s going on. ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 23, 2020, 2:00am UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/6 "2020-06-23T02:00:21Z")
I’m wondering how much of this might be the dependencies. I see there are dependencies on react and redux for example. Vue wouldn’t have react I don’t think and in Vue, its more common to use Vuex instead of redux (I think). The `ZoomMtg.join(meetConfig)` method doesn’t return anything so I can’t tell if there’s an error. All I see in the source is: ```auto
0
``` ---
**Author:** ![susankya](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/susankya/32/10935_2.png) [@susankya](https://devforum.zoom.us/u/susankya)\ **Post date:** [June 24, 2020, 6:54pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/7 "2020-06-24T18:54:05Z")
Hey @mattbrand , Were you able to solve this issue? I’m facing exactly the same problem. No matter what I do, I see a black screen and no error messages in my Console whatsoever. I also see the DevTools warning message that you have. ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 24, 2020, 7:19pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/8 "2020-06-24T19:19:18Z")
Unfortunately not yet. I’m still waiting for help from Zoom and/or figure it out… ---
**Author:** ![bdeanindy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bdeanindy/32/154_2.png) [@bdeanindy](https://devforum.zoom.us/u/bdeanindy)\ **Post date:** [June 25, 2020, 4:23pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/9 "2020-06-25T16:23:31Z")
Hey @mattbrand and @susankya could you each provide additional information about your development/testing environment please? - OS / version - Browser / version - Any console.log errors - Any network errors (in devtools) - Recreation steps we can use to reproduce the black screen issue ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 26, 2020, 12:36pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/10 "2020-06-26T12:36:30Z")
- MacOS Catalina (10.15.2) - Chrome (latest) - No console.log() errors. No output beyond the HTML output I posted previously. - No network errors that I can see - The steps are what I posted previously. The code I put it gets executed when the page is loaded. `ZoomMtg.init()` seems to work and then `ZoomMtg.join(meetConfig)` seems to do nothing but show the black screen. When I pass the values of `meetConfig` directly (without using the `meetConfig` variable, I get that syntax error from my original post. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [June 29, 2020, 6:23pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/11 "2020-06-29T18:23:28Z")
Hey @mattbrand, @susankya, Make sure you have the preload functions: > **[@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk#usage)** > > Zoom Web SDK Can you share your code snippet of using the Web SDK so I can debug? Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [June 29, 2020, 7:03pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/12 "2020-06-29T19:03:29Z")
``` let meetConfig = response.data.meetConfig; ZoomMtg.setZoomJSLib( "https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib", "/av" ); ZoomMtg.preLoadWasm(); ZoomMtg.prepareJssdk(); $("#zoom_holder").append($("#zmmtg-root")); $("#zmmtg-root").show(); ZoomMtg.init({ leaveUrl: meetConfig.leaveUrl, isSupportAV: true, success: function() { console.log("Successfully initialized meeting"); let methods = { success: function(res) { console.log(res); }, error: function(res) { console.log(res); } }; if (localUser.therapist) { ZoomMtg.join(Object.assign(meetConfig, methods)); } else { Object.assign(methods, { participantId: meetConfig.participantId }); ZoomMtg.join(Object.assign(meetConfig, methods)); } } }); ``` The preload functions are happening. `meetConfig` comes from the server before and looks like this: ```auto { signature: "asdasdasdasd", meetingNumber: "1231431", apiKey: "1234123", userEmail: "foo@foo.com", userName: "Matt", leaveUrl: "http://...", participantId: "asdakjlkj231312" } ``` ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [July 1, 2020, 6:13pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/13 "2020-07-01T18:13:38Z")
Hey @mattbrand, Are you removing the `zmmtg-root` element by default? ```auto $("#zoom_holder").append($("#zmmtg-root")); $("#zmmtg-root").show(); ``` Please try not modifying the display properties of how the Zoom Web SDK gets placed in the page and let me know if that fixes the issue. Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [July 1, 2020, 10:08pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/14 "2020-07-01T22:08:56Z")
No difference. Same black screen. I see my message that the `ZoomMtg.init()` worked and I can see that `ZoomMtg.join()` is about to happen but there is no output from that at all. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [July 2, 2020, 9:59pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/15 "2020-07-02T21:59:23Z")
Hey @mattbrand, It is most likely an issue with your `ZoomMtg.join()` code. Can you make sure it matches the same format as the [sample app](https://github.com/zoom/sample-app-web) and [docs](https://zoom.github.io/sample-app-web/ZoomMtg.html#join)? ```auto ZoomMtg.join({ signature: signature, meetingNumber: this.meetingNumber, userName: this.userName, apiKey: this.apiKey, userEmail: this.userEmail, passWord: this.passWord, success: (success) => { console.log(success) }, error: (error) => { console.log(error) } }) ``` Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [July 2, 2020, 10:37pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/16 "2020-07-02T22:37:09Z")
A bit of progress… I think part of the issue was that for my meeting, there is no password - so it was, at first, saying it couldn’t `toString` null…so I tried passing in `passWord: ""` and then it got beyond that…now, I am getting 2 different errors (one for the host and one for the participant): host: “Your connection has timed out and you cannot join the meeting. Verify your network connectivity and try again.” The participant (a different browser) is getting this error in the console: `{ method: "join", status: false, result: null, errorMessage: "participantId length > 16", errorCode: 4003 }` To generate that ID, I’m using the `"meetings/#{zoom_meeting_id}/registrants"` endpoint - and getting a string back that is 22 characters long. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [July 6, 2020, 9:45pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/17 "2020-07-06T21:45:32Z")
Hey @mattbrand, Happy to hear you are making progress! 🙂 > [@mattbrand](#): > > host: “Your connection has timed out and you cannot join the meeting. Verify your network connectivity and try again.” Can you share your [Web SDK signature](https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature) so I can debug? > [@mattbrand](#): > > The participant (a different browser) is getting this error in the console: > > `{ method: "join", status: false, result: null, errorMessage: "participantId length > 16", errorCode: 4003 }` > > To generate that ID, I’m using the `"meetings/#{zoom_meeting_id}/registrants"` endpoint - and getting a string back that is 22 characters long. The participantId field is no longer supported, so not using it will fix the issue. 🙂 Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [July 8, 2020, 1:17am UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/18 "2020-07-08T01:17:52Z")
Hi. Thanks for the tip on removing participantId. Now I’m only getting the timeout error. Here is an example of the signature: `` I am testing with Chrome and Firefox. In Chrome, I am logged in as the “participant” and in Firefox I’m logged in as the “host”. Occasionally, but not always, the host seems to almost work. In the participant case, how does the SDK know its the participant wiithout the participantId parameter? The only difference in the signature is the role: ```auto role = user.host? ? 1 : 0 data = Base64.urlsafe_encode64(ENV['ZOOM_API_KEY'] + @meeting["id"].to_s + time + role.to_s) hash = Base64.urlsafe_encode64(OpenSSL::HMAC.digest(OpenSSL::Digest.new('sha256'), ENV['ZOOM_API_SECRET'], data)) tempStr = ENV['ZOOM_API_KEY'] + '.' + @meeting["id"].to_s + '.' + time + '.' + role.to_s + '.' + hash @signature = Base64.urlsafe_encode64(tempStr).gsub('+', '-').gsub('/', '_').gsub(/#{Regexp.escape('=')}+$/, '') ``` Am I do something wrong or missing something that I didn’t see in the documentation? Thanks again. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [July 8, 2020, 9:11pm UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/19 "2020-07-08T21:11:24Z")
Hey @mattbrand, Do you mind sharing your code in a github repo so I can debug? > [@mattbrand](#): > > how does the SDK know its the participant wiithout the participantId parameter? The Web SDK assigns it’s own participant ID to each participant. Can you try turning off the waiting room setting for the meeting and try again? Thanks, Tommy ---
**Author:** ![mattbrand](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mattbrand](https://devforum.zoom.us/u/mattbrand)\ **Post date:** [July 10, 2020, 1:46am UTC](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952/20 "2020-07-10T01:46:28Z")
Hi. I tried setting the `waiting_room` to false where I create the meeting but that had the same result. It seems that if I click “retry” enough times, it might eventually connect…but not in a pattern I can figure out. If you have an email address I can use, I’ll send some code to look at but I’m not comfortable sharing in a public forum. Thanks [Next page](https://devforum.zoom.us/t/web-sdk-via-vue-black-screen/21952.md?page=2)