Playing HTML Video Element In Layers API In Camera Mode Webview

Zoom Apps
1

Hi, I’ve been exploring the layers API’s capabilities, mostly utilizing the sample apps.

I’m curious, has anybody been able to get an HTML video element to play in the camera mode webview?

I tried both autoplay (with muted), which works on the sidebar but not in camera view, and I also tried triggering dynamically via Javascript with .play().

To be clear, I don’t need audio to also send through, but it would be really nice if the video actually worked. Does the camera view do something special here that disables video or am I missing something?

I started from zoomapps-cameramode-vuejs and just loaded a standard 10 second video.

Here’s a demo of it working on the sidebar but the exact same code not working in the camera mode webview layer: Loom | Free Screen & Video Recording Software | Loom

3

@Robert.Wallis Do you have insight into this behavior and if camera mode would interfere?

4

@micah thanks for the video, I just confirmed I have the same issue trying to play an mp4 video in Camera Mode.

Maybe it’s something like the Content-Security-Policy, since the sidebar uses WKWebView (Safari / Edge) but Camera Mode uses Chrome (CEF), so they process things like this differently. It definitely looks like a bug. :lady_beetle:

    <video
      autoplay
      muted
      mute
      style="
        border: solid 1px red;
        background-color: #ff000080;
        width: 300px;
        height: 200px;
      "
    >
      <source id="mp4" src="trailer.mp4" type="video/mp4" />
    </video>

image
image1526×693 56.3 KB

5

Also on my server I see it make two hits to the trailer.mp4 file when I call runRenderingContext, so I know the browser is getting it, but not why it’s not loading it.

6

Thanks @Robert.Wallis for reproducing!

Yeah, I played with the CSP a little bit, but in the camera mode sample Vue JS mode the dev server can actually set the CSP headers. As a result, I was able to get it both working and not working in the sidebar, so I think my CSP headers should be set fine because I verified them going from not working to working. While it’s definitely a possibility I did something wrong and chromium may handle things differently (and it could be double checked), I think the bug or issue might be something else. Please someone else correct me if I’m wrong though.

Curious, do you think a Zoom engineer internally could somehow boot the CEF with the devtools enabled using remote debugging/port forwarding and just get an error message from CEF from your sample code? https://groups.google.com/g/cefglue/c/dJw54PcVe5I?pli=1 has an example of that; might be out of date but looks like that kind of thing might be possible?

I think knowing the exact error here would be incredibly helpful for deciding what potentially next to pursue in terms of trying to get this kind of thing working.

Currently camera mode is difficult to debug because there aren’t logs/devtools that we can see.

7

Our team found out that Chromium doesn’t support some codecs for copyright reasons: Google Code Archive - Long-term storage for Google Code Project Hosting.

8

Totally agree that enabling remote debugging would help solve issues like this.
CC: @evgeny.balashov

9

Changing from .mp4 to .webm fixed the issue. It turns out that CEF doesn’t support mp4 as noted above. I re-encoded the video from .mp4 to .webm and it works now.

ffmpeg -i trailer.mp4 trailer.webm

Then changed the video src to the webm file and removed the type attribute.

image
image1098×505 74.1 KB

Thanks to Drake for the answer

[edit: typos]

10

Wow, fantastic!

Thanks for looking into this everyone and for the quick responses. Really cool to see it was literally just the file format/codec, and nice find on the CEF limitation there.