Video-Call-Web-Application/index.html at main · HarshitOnLoop/Video-Call-Web-Application · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <!-- Materialize Css CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- FontAwesome CDN-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">

    <!-- Page Title -->
    <title>Video Call</title>

    <!-- Custom CSS -->
    <style>
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .videoCard {
            width: 35vw;
            height: 50vh;
            box-shadow: 1px 1px 10px #0004;
            border-radius: 4%;
            overflow: hidden;
        }

        .videoContainer {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            padding: 5vh 0;
        }
    </style>
</head>

<body>
    <h4 class="center" id="msg">Video Call</h4>

    <!-- Video Container -->
    <div class="videoContainer">
        <div class="videoCard">
            <video id="localVideo" controls autoplay></video>
        </div>
        <div class="videoCard">
            <video id="remoteVideo" controls autoplay></video>
        </div>
    </div>

    <!-- Input Container -->
    <div class="center container">
        <div class="input-field">
            <input id="peerId" type="text">
            <label for="peerId">Enter Peer Id</label>
        </div>
        <button id="videoCallBtn" class="btn purple darken-1 waves-effect waves-light">
            Video Call <i class="fas fa-video right"></i>
        </button>
        <button id="stopVideoCallBtn" class="btn red darken-1 waves-effect waves-light">
            Stop Video <i class="fas fa-video-slash right"></i>
        </button>
    </div>

    <!-- Materialize JS CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Peer js CDN -->
    <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>

    <!-- ----------------------------------------------------------------------- -->
    <!--                      Custom Script For Video Call                       -->
    <!-- ----------------------------------------------------------------------- -->
    <script>
        // Global Stream Object
        var MY_STREAM;
        var peerList = [];

        // Access All Required DOM Elements
        const videoCallBtn = document.getElementById("videoCallBtn");
        const stopVideoCallBtn = document.getElementById("stopVideoCallBtn");
        const localVideo = document.getElementById("localVideo");
        const remoteVideo = document.getElementById("remoteVideo");
        const peerId = document.getElementById("peerId");
        const msg = document.getElementById("msg");

        // Create Connection
        var peer = new Peer();

        // Listen Peer Open Event
        peer.on('open', (id) => msg.innerHTML = "Yard Express Video Call id: " + id);

        // Listen Peer Call Event
        peer.on('call', (call) => {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                }
            }).then((stream) => {
                MY_STREAM = stream;
                addLocalVideo(stream);
                call.answer(stream);
                call.on('stream', (remoteStream) => {
                    if (!peerList.includes(call.peer)) {
                        addRemoteVideo(remoteStream);
                        peerList.push(call.peer);
                    }
                })

            }).catch((err) => console.log(err))
        })

        // Add Event To Video Call Button
        videoCallBtn.addEventListener('click', () => {
            let remotePeerId = peerId.value;
            msg.innerHTML = "Connecting to " + remotePeerId;
            callPeer(remotePeerId);
        });

        // Add Event to stop call button
        stopVideoCallBtn.addEventListener('click', () => stopVideo())

        // Create Calling Function
        const callPeer = (id) => {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            }).then((stream) => {
                MY_STREAM = stream;
                addLocalVideo(stream);
                let call = peer.call(id, stream);

                call.on('stream', (remoteStream) => {
                    if (!peerList.includes(call.peer)) {
                        addRemoteVideo(remoteStream);
                        peerList.push(call.peer);
                    }
                })
            }).catch((err) => console.log(err));
        }

        // Create Remote Stream Video
        const addRemoteVideo = (remoteStream) => remoteVideo.srcObject = remoteStream

        // Create local Stream Video
        const addLocalVideo = (localStream) => localVideo.srcObject = localStream

        // Stop Video Call
        const stopVideo = () => {
            const localTracks = document.querySelector("#localVideo").srcObject.getTracks();
            localTracks.forEach((track) => track.stop());
            const remoteTracks = document.querySelector("#remoteVideo").srcObject.getTracks();
            remoteTracks.forEach((track) => track.stop());
        };
    </script>

</body>

</html>