Video SDK: cannot render a self video in Chrome

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:

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

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

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.


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?

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

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.

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

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