drawImage not working immediately after runRenderingContext

Zoom Apps
1

Zoom Apps Configuration
I’m working on a Vue/Vuex app that runs config and runRenderingContext on mount and runs drawImage on input.

Description
If I trigger a drawImage too shortly after runRenderingContext, I get an error. If I do this after waiting a few seconds from app load or after an app reload, I get no issues.

Error?
The Zoom client encountered an error while processing the request!{"imageId":"s8kd85UiQMW1gvXDVhmDAw_864_16_408_296_3"}

I’m calling the following code, as dispatched in an action from mounted():

zoomSdk.config({
  version: '0.16',
  popoutSize: { width: state.layer.width, height: 720 },
  capabilities: [
    'shareApp',
    'getRunningContext',
    'runRenderingContext',
    'closeRenderingContext',
    'drawParticipant',
    'clearParticipant',
    'drawImage',
    'clearImage',
    'drawWebView',
    'clearWebview',
    'postMessage',
    'sendAppInvitationToAllParticipants',
    'setVideoMirrorEffect',
    'onMessage',
    'onMyMediaChange',
    'onRenderedAppOpened',
  ],
}).then(() => {
  zoomSdk.runRenderingContext({
    view: 'camera',
  })
});

then, on an action dispatched from the click of a button on the sidebar, I’m calling the following code

zoomSdk.drawImage({
  imageData: img,
  x: 1280 - layerPadding.h - state.layer.width,
  y: layerPadding.v,
  zIndex: 3,
})

where img is a successful getImageData call from a canvas element.

The issue, as I understand it from reading various documentation and this issue, is that runRenderingContext isn’t ready yet. But when I disable the button until .then() statement after my call runRenderingContext call, the issue persists. The button is disabled, then turns on, and still throws the error.

2

Yes this is a common issue we are seeing.
I think the most reliable solution is to check in your then(config) (note you are missing the argument config in the then function) that config.runningContext === "inCamera", if that is true, then call drawParticipant, drawWebView, drawImage.

This means that your code is running in the camera mode webview, and not in the sidebar webview at the wrong time.

It is possible to still call these APIs from the sidebar by waiting for onRunningContextChange after runRenderingContext is successful.

Basically, CEF needs time to initialize.