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

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

    <video
      autoplay
      muted
      style="
        border: solid 1px red;
        background-color: #ff000080;
        width: 300px;
        height: 200px;
      <source id="mp4" src="trailer.mp4" type="video/mp4" />
    </video>
image1526×693 56.3 KB
              
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.
              
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.

image1098×505 74.1 KB
Thanks to Drake for the answer
[edit: typos]
              
Hi @Robert.Wallis, I’ve tried to display the same for 2 hours already… still not seeing the .webm file (local file nor a hosted one) Just seeing the red square.
Can you provide a working sample with a remotely hosted video file (even a short one)

Thanks
              
Hi Micah, do you maybe have a working code which I can look into? I tried to add a video to CameraMode.js and even though I use webm, I can’t see it.
Thanks