Video handle is not ready!

Video SDK
1

Format Your New Topic as Follows:

Video SDK Type and Version
VideoSDK 1.9.8 for Web

Description
Sometimes sporadically when attempting to join a meeting on mobile we get a message in the console (note that the console doesn’t show this message as an error, Chrome is filtering it as “info”):

video handle is not ready! blob:https://example.com/11e1bd00-f55d-41b0-b82e-673d81388dd9:1

The video connection never starts for the user however audio does

Troubleshooting Routes
Disconnecting and reconnecting the user sometimes fixes the problem. As does refreshing. Video preview still works while in this state if we open our applications interface to test/select your video input device.

Full Versions
SDK Version: 1.9.8
SDK Type: Video SDK for Web
Mobile Device: Android
Android Version: 10
Browser: Google Chrome
Chrome Version: 120.0.6099.43

How To Reproduce

  1. join meeting with VideoSDK.createClient().join()
  2. check if isRenderSelfViewWithVideoElement() and call stream.startVideo() on either video element or canvas depending on the function check
  3. start audio with stream.startAudio()
  4. get the message in console (sometimes, sometimes it works correctly)
1 Like
2

Hey @devs2

Thanks for your feedback.

Can you describe what happens when this log appears?

This is a status log we print to the console and it doesn’t affect video rendering.

When the video stream arrives before the video handler is ready, we output this log. But don’t worry, we handle this situation with proper error handling.

Thanks
Vic

3

Hi @vic.yang thanks for the reply.

When we see this message in the log nothing happens after. The message repeats over and over. No video output starts at all, either self-camera or remote participant.

4

Hey, @vic.yang
I have same error.
On my localhost connection works fine. But on dev server I have same error
video handle is not ready!
On local and dev server there is same code.

1 Like
5

Hey @Prze

Could you share the session ID with us for troubleshooting purposes?

Thanks
Vic

6

@vic.yang
sure sessionId:"TS/7uYlsQtOhLmkdYEmQ4g=="

7

Hey @Prze

After analyzing the logs, we found these errors:

Refused to compile or instantiate WebAssembly module because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive

It seems that the CSP policy on your site prevents the video from working. Could you refer to our documentation for details?

Video SDK - web - Browser support

In short, you need to add the wasm-unsafe-eval or unsafe-eval rule to your CSP settings.

Thanks
Vic

8

Hey @vic.yang it worked thanks for help.
Also i have trouble to enable share audio in screeen share.

i set up in htaccess

<IfModule mod_headers.c>
    Header set Referrer-Policy "origin-when-cross-origin"
    Header set X-Frame-Options "SAMEORIGIN"
    Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://*.zoom.us https://zoom.us https://code.jquery.com https://cdnjs.cloudflare.com https://maxcdn.bootstrapcdn.com https://maps.googleapis.com https://www.google-analytics.com https://www.google.com https://www.gstatic.com https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://stackpath.bootstrapcdn.com https://fonts.googleapis.com https://use.fontawesome.com"
    Header set  Cross-Origin-Embedder-Policy "credentialless"
</IfModule>

I also init my share on btn click like so

      zoomSession.startShareScreen(screenShareContentVideo).
        then().
        catch((error) => {
          stopScreenShareBtnsStates()
          console.warn(error)
        })

I write in same post since i read it might refer to same headers problem.

9

Hey @Prze

I see you’ve set the Cross-Origin-Embedder-Policy . I assume you want to enable SharedArrayBuffer , but you’re missing the Cross-Origin-Opener-Policy setting, which needs to be set to ‘same-origin’ to enable SharedArrayBuffer .

Currently, the default shared audio solution requires SharedArrayBuffer.

There are two workarounds：

From my perspective, I recommend the former one, which will benefit more in both audio and video performance.

Thanks
Vic

10

@vic.yang

After add
Header set Cross-Origin-Embedder-Policy “require-corp”
Header set Cross-Origin-Opener-Policy “same-origin”

we have error warning not sharing decode type and video is not showing.

11

Hey @Prze

Could you share the session ID with us for troubleshooting purposes again after enabling SharedArrayBuffer ?

Thanks
Vic

12

@vic.yang
sure 4ZQdRmAGTPSYfxBZ7vH1Tg==

13

Hey @Prze

not sharing decode type

This log is just a debugging message; you can ignore it. It doesn’t have any impact on functionality.

4ZQdRmAGTPSYfxBZ7vH1Tg==

I checked the log, did the users in the session start their video?

Thanks
Vic

14

@vic.yang
The problem is that when I add

    Header set  Cross-Origin-Embedder-Policy "require-corp"
    Header set Cross-Origin-Opener-Policy "same-origin"

typeof SharedArrayBuffer === 'function'; is true so i can share audio.
But i have error and dont see video

session 4ZQdRmAGTPSYfxBZ7vH1Tg== with headers no video can share audio

session 0xCBNTC0R1GCluZvZBlysA== i remove headers i can see video.

so remains

Header set Referrer-Policy "origin-when-cross-origin"
    Header set X-Frame-Options "SAMEORIGIN"
    Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://*.zoom.us https://zoom.us https://code.jquery.com https://cdnjs.cloudflare.com https://maxcdn.bootstrapcdn.com https://maps.googleapis.com https://www.google-analytics.com https://www.google.com https://www.gstatic.com https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://stackpath.bootstrapcdn.com https://fonts.googleapis.com https://use.fontawesome.com"

This is so confusing

15

@vic.yang

I thin problem is in audio.
I found work around.

When i start create self camera
i use code

let userVideo = await zoomSession.attachVideo(zoomVideo.getCurrentUserInfo().userId, RESOLUTION)

document.querySelector('video-player-container').appendChild(userVideo)

However that was problem when I want to share buffer.
So for self camera i create separate buffer using:

  const constraints = {
    audio: false,
    video: { width: 1280, height: 720 },
  }
  navigator.mediaDevices.getUserMedia(constraints).then((mediaStream) => {
    const video = document.getElementById('selfPrev')
    video.srcObject = mediaStream
    video.onloadedmetadata = () => {
      video.play()
    }
  }).catch((err) => {
    // always check for errors at the end.
    console.error(`${err.name}: ${err.message}`)
  })

code from mozilla doc. So i crate two streams one for self prev and the other for send to other person.

This solution work for me. If that should be improve please let me know or i think its solved.

16

Hey @Prze

Thank you for sharing the code snippet related to this issue.

This might be a known limitation where the video-player element returned by stream.attachVideo does not have an initial width and height. I suggest you add a class to this element and define the styles within this class.

.video-cell {
    aspect-ratio: 16/9;
    width: 300px;
}

let userVideo = await zoomSession.attachVideo(zoomVideo.getCurrentUserInfo().userId, RESOLUTION)
userVideo.classList.add('video-cell');

Thanks
Vic

17

@vic.yang
Yes it worked. Consider add more readable place in doc(or maybe I miss it). I have that snipped in my css. However as for tag and might not (do not why) apply to fresh new added element.
After dynamic change works fine.
Thanks for help