Video SDK: cannot render a self video in Chrome

Video SDK Web
1

I cannot render a self video in Chrome (96.0.4664.110) but I can do this in Firefox (95.0.2) but in the same time I can render other participant’s video in Chrome and video started in Chrome can be seen by other participants.

I use the code provided while registering for the Video SDK developer account.

Code for rendering a self video:

console.log('crossOriginIsolated:', crossOriginIsolated); //false

await mediaStream.startVideo();
await mediaStream.renderVideo(VIDEO_CANVAS, localUserId, 320, 320, 0, 0, 2);

Code for rendering other participant’s video:

await mediaStream.renderVideo(VIDEO_CANVAS, userId, 320, 320, 320, 0, 2);

It seems to me that it could not be related to cross-origin isolation:

image
image974×417 12.4 KB

I do not see any errors or warnings in the browser console.

2

Hey @pavloshchur

Thanks for your feedback.

It seems that the value of Cross-Origin-Opener-Policy(COOP) is not correct. Cross-Origin-Opener-Policy - HTTP | MDN

Thanks
Vic

3

Hi @vic.yang,

Thanks for the quick reply.

We have changed COOP from https://ocedev3--pshchur--c.visualforce.com to same-origin but it did not help. We still cannot render self video. The only difference is that now we see the error.

image
image993×638 27.4 KB

image
image1332×75 8.92 KB

It seems to me that it is not related to the video element because when I run purejs-demo app by npm run corp I do not see the error and can process a self video.

We host Zoom Video SDK 1.1.7.zip on Heroku and invoke it by the following URL: path/index.esm.js. Headers you can see on the screenshot above.
image

Are we doing something wrong with headers?

4

Hey @pavloshchur

It seems something mistake in your configuration, the COEP and COOP headers are applied to the document response(HTML), not the javascript or css response. Instead, Cross-Origin-Resource-Policy(CORP) should be added to the static resources response header.

Thanks
Vic

5

Hi @vic.yang,

It is impossible in our case to add the COEP and COOP headers to the document response (HTML).
Could you add a Boolean flag that will allow us to choose to work with SharedArrayBuffer or not? The same way as it works in Firefox now.

6

Hi @pavloshchur

Yes. We have an API to detect whether to enable the multiple video mode(gallery view), it’s stream.isSupportMultipleVideos. Also if you are familiar with React, our sample-app-project is a good reference.

Thanks
Vic

7

Hi @vic.yang,

Thanks for the quick reply.

Yes, you are right. The following code snippet works for me:

let videoElement;

if (!stream.isSupportMultipleVideos()) {
    videoElement = document.getElementById('video-sharing');
    videoElement.classList.add("video-canvas");
    videoElement.id = "video-test-" + localUserId;
}

try {

  if (!stream.isSupportMultipleVideos()) {
      await stream.startVideo({ videoElement });
  } else {
      await stream.startVideo();
  }
  
  } catch (e) {
      console.error('Error turning on video:', e);
  }

To sum up, if it is not possible to add COOP and COEP headers than use video and pass it to startVideo({ videoElement }) function. Pay attention to videoElement attribute name.

1 Like
8

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