DrawWebView and ClearWebView Issues "Error: clearWebView took longer than 10000ms to respond"

Zoom Apps Configuration
PHP + Vanilla JS
loaded zoomSDK via CDN

I’m running into problems with DrawWebView and ClearWebView. They are separate issues but I figured I’d write about them in one post.

DrawWebView Doesn’t Update When innerHTML Changes
I’m able to DrawWebView the first time successfully, but when I change the text on a <h1> tag, and click a button to DrawWebView again, the resultant render on my camera is NOT updated. It does not show the new text that is displayed on the sidebar. I do get the “success” callback, however.

I figure that I would try to clear the Webview first, but then I run into a second problem:

Error: clearWebView took longer than 10000ms to respond
This is when triggering a function that calls zoomSdk.clearWebView() via an HTML button.

Any help would be appreciated. Below is a code snippet:

<input type="text" id="userInput"><br>
<button type="button" id="displayBtn" onclick="setDisplayedText()" >Display Text</button>
<br>
<button type="button" id="clearImageBtn" onclick="clearImage()">Clear Image</button>
<br>
<br>
<h1>displayed text: <span id="display"></span></h1>

<script>
var inMeeting = <?php echo json_encode($zoomAppContext->typ === 'meeting'); ?>;

function setDisplayedText() {
    const gName = document.getElementById("userInput").value;
    document.getElementById("display").innerHTML = gName;
    if(inMeeting) {
        draw();
    }
}

async function draw() {
    await zoomSdk.drawWebView({
        webviewId: "123", x: 0, y: 0, width: 1280, height: 720, zIndex: 1
    })
    .then((ctx) => {
        console.log("drawWebView returned", ctx);
    })
    .catch((e) => {
        console.log(e);
    });
}

async function clearImage() {
    await zoomSdk.clearWebView({webviewId: "123"})
    .catch((e) => {
    console.log(e);
    });
}

async function setup() {
    var localParticipantUUID = -1; //the UUID of the local user.

    //configure zoom app with api features, popout size, etc
    const configResponse = await zoomSdk.config({
        version: '0.16',
        popoutSize: { width: 480, height: 360 },
        capabilities: [
        // The following are needed for Layers API.
        `getRunningContext`,
        'getUserContext',
        'getMeetingContext',
        'getMeetingParticipants',
        'openUrl',
        `runRenderingContext`,
        `closeRenderingContext`,
        `drawParticipant`,
        `clearParticipant`,
        `drawImage`,
        `clearImage`,
        `drawWebView`,
        `clearWebview`,
        `postMessage`,
        `sendAppInvitationToAllParticipants`,
        `onMessage`,
        `onMyMediaChange`,
        `onRenderedAppOpened`
        ],
    });

    //Only render to camera if in meeting
    if(inMeeting){
        //set up Layers API - Camera Rendering Mode
        await zoomSdk.runRenderingContext({view: 'camera'})
        .then((ctx) => {
            console.log("runRenderingContext returned", ctx);
        })
        .catch((e) => {
            console.log(e);
        });
    }
}
setup();

</script>

@evan.cheng Sorry for the silly question but have you confirmed that the webViewID you are attempting to delete exists? As in, it hasn’t been deleted in a previous loop or in another piece of code.

@MaxM Hm, how would I confirm this? I see the webview rendered onto the camera - albeit without the runtime changes brought on by the javascript.

Some things I’ve tried since then:

  1. calling the Draw and Clear functions without a WebviewID - no change
  2. calling runRenderingContext after page load with a similar button - no change
  3. calling await new Promise(r => setTimeout(r, 2000)); in between setting the inner html , runRenderingContext, and drawWebView() - no change.

@evan.cheng What client version and SDK version are you using when you see this behavior?

@MaxM
Zoom: Version: 5.12.8 (12565)
SDK: should be the latest one since I’m loading it from CDN via
<script src="https://appssdk.zoom.us/sdk.js"></script>