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

Zoom Apps
1

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>
2

@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.

3

@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.
4

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

5

@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>

6

@MaxM I’m going forward with a work-around by using zoomSdk.drawImage() instead of drawWebView()

7

It looks like the clearWebView function doesn’t take an ID so the only other possibility I can of is that the app is not in camera mode when that function is called?

I was working to reproduce this myself but ran into a separate issue. I’m going to gather sample code that we have internally and see if I can put together an example demonstrating this issue if not working around it.

With that being said, does using drawImage work well for your use case instead?

9

It looks like the clearWebView function doesn’t take an ID so the only other possibility I can of is that the app is not in camera mode when that function is called?

Hm, I tried to rule that out already. Confirmed the rendering context is in camera mode with console logs. I also tried clearWebView() without an ID - no success.

With that being said, does using drawImage work well for your use case instead?

yep! thanks for the quick responses

10

If you want to refresh the webview you’ll need to either do something like

document.location.href = document.location.href

to reload the page, or

closeRenderingContext();
runRenderingContext({view: 'camera'})

Draw and Clear webview functions don’t reload the webview, they just show or hide it somewhere on the camera.

clearWebView should be faster than 10 seconds so that sounds like an issue, and I’ll bring it up with the Layers team.

Hope that helps!

1 Like