Add onMyMediaChange event api #66
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
kexinF
changed the title
|
@blickly can you take a look? |
| zoomSdk.onMyMediaChange((event) => { | ||
| console.log(event) | ||
| if ( | ||
| event.media && | ||
| 'video' in event.media && | ||
| event.media.video && | ||
| event.media.video.state && | ||
| typeof event.media.video.width === 'number' && | ||
| typeof event.media.video.height === 'number' | ||
| ) { | ||
| foregroundDrawer.drawCameraSizeChange(event.media.video.width, event.media.video.height); | ||
| } | ||
| }); |
There was a problem hiding this comment.
I think if we add an onMyMediaChange method to zoomapi.ts, we can move this part into draw_badge_api.ts
| zoomSdk.config({ | ||
| capabilities: [ | ||
| "setVirtualForeground", | ||
| "removeVirtualForeground", | ||
| "onMyMediaChange", | ||
| ] | ||
| }) |
There was a problem hiding this comment.
Pretty sure that this already happens inside zoomapi.ts
| // TODO: make sure the imageData scale and resize correctly based on window size. | ||
| // make need to make some more Zoom API calls to get user window size. | ||
| function drawEverythingToImage(nametag: NameTagBadge, handWave: HandWaveBadge): ImageData { | ||
| function drawEverythingToImage(nametag: NameTagBadge, handWave: HandWaveBadge, videoWidth: number, videoHeight: number): ImageData { |
There was a problem hiding this comment.
nit: I'd probably make an interface to represent the "video resolution" rather than making people remember the order of the two numbers here.
| const xFactor = videoWidth / 1600; | ||
| const yFactor = videoHeight / 900; |
There was a problem hiding this comment.
I think there are places here where these xFactor and yFactor could be avoided by using relative sizes rather than specific pixel sizes. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
3 participants
I made the changes in the following files:
NameTag.css to convenient for my testing
draw_badge_api.ts:
drawCameraSizeChangefunction inside theDrawBadgeApi, it takes the detected width and height as input.drawEverythingToImagetakes the width and height as input and using the scale factors to determine the new axis valuesonMyMediaChangeinside this file. Ideally, this should be inside the /lib/draw_badge_api, but I haven't figured out how to return the width and height as an event listener.I don't have the extra camera, so I was not able to test how it performs on different types of video inputs.