Description
No video is rendered on canvas.
Error
No error message on (browser) console.
Which Web Video SDK version?
1.0.3
To Reproduce(If applicable)
Screenshots
Browser console log is attached.
Device (please complete the following information):
Additional context
Add any other context about the problem here.
Hey @dharjanto ,
It looks like you are on an outdated version. Can you please use the latest 1.1.3 and try again?
Thanks,
Tommy
Hi Tommy,
Thank you for your response. I upgraded the SDK to 1.1.3 and now I am running into an issue where on Firefox browser the screen sharing (receiving) is not showing. On the console I saw the following error: self.sharingRenderContext is undefined (see attached screenshot)
Screen sharing is working when I reverted back to 1.0.3, but this older version has a video issue which is solved by version 1.1.3.
Hey @dharjanto ,
Glad to hear upgrading to 1.1.3 fixed the video rendered issue.
As for the new issue, can you share your code snippet of how you are sharing your screen and steps to reproduce it?
Thanks,
Tommy
Hi Tommy,
Thank you for your response. Below is code snippet:
To start screen share:
this.zoomService.getZoomMediaStream().startShareScreen(this.zoomShareCanvas.nativeElement)
To start receiving screen share (resp.payload.userId from the callback):
this.zoomService.getZoomMediaStream()
.startShareView(this.zoomShareReceivingCanvas.nativeElement, resp.payload.userId))
Zoom Service:
this.zoomClient = ZoomInstant.createClient();
const observable = from(this.zoomClient.init(‘en-US’, window.location.origin + ‘/assets/js/@zoomus/instantsdk/dist/lib’));
this.zoomMediaStream = this.zoomClient.getMediaStream();
// Register callback for active-share-change event
this.zoomClient.on(‘active-share-change’, this.onActiveShareChange$);
getZoomMediaStream(): typeof Stream {
return this.zoomMediaStream;
}
Regards,
Dono
Thanks @dharjanto ,
I do notice that you are using the old path for the dependent assets.
With 1.1.3, try this instead, @zoom/videosdk/dist/lib
Thanks,
Tommy
Thank you for you response and thank you for spotting the dependent assets path. I will update that and give it a try.
Hi Tommy,
After replacing the dependent assets path per-your suggestion, the issue with receiving screen share on Firefox is not resolved. Further investigation found that the (receiving) canvas element width and height property are set to 0 after calling startShareView, which make the screen share on Firefox not visible.
I have a workaround for this, by setting the canvas width and height when getting share-content-dimension-change callback and now receiving screen share is displayed on Firefox.
However, I wanted to let you know that when getting share-content-dimension-change callback, the width and height of the payload both are undefined (see screenshot).
The receiving screen share on Chrome is always working, canvas width and height are set accordingly after calling startShareView.
Hello,
I’m having this issue too. How can I solve it?
I use the latest version 1.1.3 and Chrom version 92.
I got no errors and everything works fine.
Ps. I’m using Vue but this I don’t think is matter because all function in sdk is works
Hi nslog0,
Video SDK version 1.1.3 on Chrome (which support web codec), rendering a starting screen share requires the use of <video> element instead of <canvas> element to render the content. This is mentioned in the React sample.
On Firefox, rendering a receiving screen share you need set the <canvas> element width and height when you receive share-content-dimention-change event. I posted a screenshot for this workaround earlier.
Here is the code snippet I have:
html:
<video *ngIf="zoomService.isSupportWebCodecs();else canvas_share" class="video-canvas_share" #zoomShareCanvas width="{{zoomWidth}}" height="{{zoomHeight}}"> </video> <ng-template #canvas_share> <canvas *ngIf="!zoomService.isSupportWebCodecs()" class="video-canvas_share" #zoomShareCanvas width="{{zoomWidth}}" height="{{zoomHeight}}"></canvas> </ng-template>
zoom.service.ts:
isSupportWebCodecs(): boolean {
return typeof (window as any).MediaStreamTrackProcessor === ‘function’
}
Hi dharjanto,
Thank you for your answer. if I change canvas to video tag. what about the starting statement
Does it still look like this?
await mediaStream.startVideo();
await mediaStream.renderVideo(
this.elm.videoCanvas,
this.zoomClientId,
this.videoOptions.width,
this.videoOptions.height,
0,
0,
this.videoOptions.quality360,
)
I changed to video tag the preview is still blank
Hi nslog0,
My issue was with rendering a screen share on Chrome and Firefox after I upgraded to version 1.1.3.
If you are trying to render a video (not screen share), then you need to use canvas element. If after you changed it to use canvas and you still don’t see the video, check what is the zoomClientId value you pass in the 2nd parameter when calling renderVideo API. That zoomClientId must be the Zoom’s user Id. You can obtain list of users by calling this.zoomClient.getAllUser() and render the video of each user with bVideoOn equals true.
I hope this answer helps you.
Hey @dharjanto , @nslog0
Thanks for your feedback. We have found this issue. And it will be fixed in version 1.1.4.
Thanks
Vic
I had a problem with SharedArrayBuffer that cause of cannot render video in the canvas. in the new version it gonna fix?
I fix by using origin trial
so what the proper solution to make sure if I deploy my app to server it gonna work for my client?
Hey @nslog0
Starting from Chrome 92, SharedArrayBuffer OT is required when using Web Video SDK. You can refer to this article Web Cross-Origin Isolation for the detail.
Thanks
Vic
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.