vid-jam.github.io/index.html at main · DelvinVD/vid-jam.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VidJam</title>
    <link rel="icon" type="image/x-icon" href="/assets/vidjam_logo.jpg">
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>
<body>
    <div id="cover"></div>
    <span id="back">←</span>
    <div id="start">
        <img id="logo" width="150px" style="margin-bottom: 50px;" src="assets/vidjam_logo_alpha.png" alt="logo" onclick="endCall()">
        <img id="loader" src="./assets/loader.svg" alt="loader">
        <button id="newMeetBtn" onclick="newMeet()">+ New Meeting</button>
        <span id="share" style="display: none; font-size: 20px; height: 25px;">Share this id: </span>
        <div id="id_div" style="display: none; align-items: center;">
            <p id="localPeerId"></p>
            <img id="copy" width="25px" height="25px" style="cursor: pointer;" src="assets/copytocb.svg" alt="copy">
        </div>
        <div id="inAndJoin" style="display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px;">
            <span style="font-size: 20px;">Or</span><br>
            <div>
                <input class="remotePeerId" type="text" id="remotePeerId" placeholder="Enter id..">
                <button id="join-btn">Join</button>
            </div>
        </div>
    </div>

    <input type="color" name="" id="clrInput" value="#00ff00">
    <span id="drawModeIndicator" onclick="toggleDrawMode()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brush" viewBox="0 0 16 16">
            <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"/>
        </svg>
    </span>
    <div id="localVid" class="videoDiv">
        <video id="renderedVdo" muted autoplay></video>
        <div class="local-container">
            <video id="localVdo" muted></video>
            <canvas class="output_canvas"></canvas>
            <canvas id="draw"></canvas>
            <canvas id="overlay"></canvas>
          </div>
    </div>
    <div id="remoteVid" class="videoDiv">
            <button id="muteRemoteAudio" onclick="muteremoteaudio()">
                <img id="mutera_icon" src="./assets/volume-down.svg" alt="volume-down.svg">
            </button>
        <video id="remoteVdo" autoplay></video>
    </div>

    <div id="controls">
        <button id="muteaudio" onclick="muteafn()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
            <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
            <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
          </svg>
        </button>
        <button id="endcall" onclick="endCall()"><img src="./assets/red-phone-7151.svg" alt="endcallicon" ></button>
        <button id="mutevideo" onclick="mutevfn()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/>
          </svg>
        </button>


    </div>
    <canvas id="sendingCanvas" style="display: none;"></canvas>

    <script src="https://unpkg.com/peerjs@1.4.8-rc.1/dist/peerjs.min.js"></script>
    <script src="camera_utils.js"></script>
    <script src="drawing_utils.js"></script>
    <script src="hands/hands.js"></script>
    <script src="./script.js"></script>
</body>
</html>