How can I build a VoIP system in anvil?

Anvil Q&A
12

Here’s a video conferencing app built in Anvil. It uses Jitsi.

https://anvil.works/build#clone:4J2M4VZAYTHI4UUR=VAM7DYIGKPTUBBONICGS7NUX

jitsi
jitsi.gif937×759 240 KB

Everybody using the app is on the same call - Jitsi uses a ‘room name’ to identify what call to join, and this app has it hard coded. You could easily add a TextBox to input the room name so people can join a call of their choice.

How it works

It imports Jitsi in Native Libraries:

<script src="https://meet.jit.si/external_api.js"></script>

And it has a Custom HTML Form that embeds the Jitsi video call widget:

<div anvil-slot="default"></div>
<div id="jitsi"></div>

<script>
  function initJitsi(domain, options) {
    options.parentNode = this.find("#jitsi")[0]
    window.japi = new JitsiMeetExternalAPI(domain, options);
  }
</script>

<style>
  #jitsi iframe {
    width: 100%;
    border: none;
  }
</style>

And there’s a ‘join video chat’ button on that Form that runs the JavaScript function:

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.call_js("initJitsi", "meet.jit.si", {"roomName": "JitsiMeetAPIExample123", "height": 500})
    self.button_1.visible = False

And that’s literally all the code!

6 Likes