Generate screenshots with WebRTC getDisplayMedia

Anvil Q&A
1

I’m trying to accomplish generate screenshots with WebRTC getDisplayMedia

I’ve added the custom javascript in the Native Library and added video tag in the custom html but the javascript is unable to retrieve the video tag since its embedded in the anvil script’s tag

Code Sample:

# code snippet
var video = document.querySelector('video');

Clone link:
https://anvil.works/build#clone:A32T42EOOGRIGCHH=RQ6GGFTOU44GSJT7CRFMYDOD

3

Hi @amhhruknapdi and welcome to the forum,

Any code that executes in native libraries does so before the page has loaded. So the line

var video = document.querySelector('video');

Will give a null value since there is no video element on the screen yet.

A good place to move that code is inside the custom html.
Rather than directly inside a <script> tag you can nest it inside a function

<script>
function initJs() {
    var video = document.querySelector('video');
    // ...
}
</script>

And then inside the python code add a form show event in the design view and call the js function from there


def form_show(self, **event_args):
    self.call_js('initJs')

That way the elements are on the screen when the javascript function is called.

Here is some related documenation:

Anvil Docs | HTML Forms

And the adjusted app

1 Like
4

Thank you for your reply, it works and I can continue messing around anvil