xref: /xiu/protocol/webrtc/src/clients/index.html (revision 80f20d70) 
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>WHEP Example</title>
6    <style>
7        body {
8            font-family: Arial, sans-serif;
9            background-color: #f2f2f2;
10        }
11
12        h1 {
13            text-align: center;
14            margin-top: 50px;
15        }
16
17        label {
18            display: inline-block;
19            width: 100px;
20            margin-bottom: 10px;
21        }
22
23        input[type="text"] {
24            padding: 5px;
25            border-radius: 5px;
26            border: 1px solid #ccc;
27            width: 200px;
28        }
29
30        button {
31            padding: 10px;
32            background-color: #4CAF50;
33            color: white;
34            border: none;
35            border-radius: 5px;
36            cursor: pointer;
37        }
38
39        button:hover {
40            background-color: #3e8e41;
41        }
42
43        #video-container {
44            width: 640px;
45            height: 360px;
46            margin: 0 auto;
47            background-color: #000;
48            position: relative;
49        }
50
51        #localVideo {
52            width: 100%;
53            height: 100%;
54        }
55
56        #play-btn {
57            position: absolute;
58            top: 50%;
59            left: 0;
60            transform: translate(0, -50%);
61            font-size: 24px;
62            color: #fff;
63            cursor: pointer;
64            z-index: 1;
65        }
66
67        #progress-bar {
68            position: absolute;
69            bottom: 0;
70            left: 0;
71            width: 100%;
72            height: 10px;
73            background-color: #333;
74            cursor: pointer;
75        }
76
77        #progress-bar-fill {
78            height: 100%;
79            background-color: #4CAF50;
80            width: 0%;
81        }
82    </style>
83</head>
84
85<body>
86    <h1>WHEP Example</h1>
87    <div style="text-align: center;">
88        <label for="app-name">App Name:</label>
89        <input type="text" id="app-name" name="app-name" value="live">
90        <label for="stream-name">Stream Name:</label>
91        <input type="text" id="stream-name" name="stream-name" value="test">
92        <br><br>
93        <button id="start-whep-btn">Start WHEP</button>
94    </div>
95    <div id="video-container">
96        <video id="localVideo" autoplay playsinline muted></video>
97    </div>
98
99    <script src="whep.js"></script>
100    <script>
101        const startWhepBtn = document.getElementById("start-whep-btn");
102
103        startWhepBtn.addEventListener("click", () => {
104            const appName = document.getElementById("app-name").value;
105            const streamName = document.getElementById("stream-name").value;
106
107            //Create peerconnection
108            const pc = window.pc = new RTCPeerConnection();
109
110            //Add recv only transceivers
111            pc.addTransceiver("audio");
112            pc.addTransceiver("video");
113
114            pc.ontrack = (event) => {
115                console.log(event)
116                if (event.track.kind == "video") {
117                    var player = document.getElementById('localVideo')
118                    player.srcObject = event.streams[0]
119                    player.controls = true
120
121                }
122            }
123            //Create whep client
124            const whep = new WHEPClient();
125
126            const url = location.origin + "/whep?app=" + appName + "&stream=" + streamName;
127            const token = ""
128
129            //Start viewing
130            whep.view(pc, url, token);
131
132        });
133    </script>
134</body>
135
136</html>