templates/channel.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Open Clubhouse</title>
    <meta name="description"
        content="Clubhouse for android. Clubhouse for web. Clubhouse for everyone without invite code.">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        html body {
            font-family: sans-serif;
            background: #F2EFE4;
        }

        .users img {
            width: 50px;
        }
    </style>
</head>

<body>
    <container class="text-center">
        <div class="card mx-auto" style="max-width: 800px;" id="channel">
        </div>
    </container>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
    <script src="/static/AgoraRTC_N-4.3.0.js"></script>
    <script src="/static/openCH.js"></script>
    <script>
        $(document).ready(function () {
            initOptions('938de3e8055e42b281bb8c6f69c21f78', {{ owner_user_id }});
            const paths = $(location).attr('pathname').split('/');
            getChannel(paths[paths.length - 1]);
        })
    </script>
</body>

</html>