-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
151 lines (142 loc) · 4.74 KB
/
index.html
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
<!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" />
<!-- Import the stylesheet -->
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Import the javascript file -->
<script src="/script.js" defer></script>
<title>Create Live Stream</title>
</head>
<body>
<h1 class="text-center text-[28px] font-bold my-2">My Live Stream</h1>
<hr />
<!-- input own API -->
<div
class="flex flex-col items-center justify-center text-sm"
id="apiContainer"
>
<p class="mt-6 text-md">
To get your API Key, kindly login here :
<a
href="https://studio.inlive.app/login"
aria-label="login-studio"
class="text-blue-500"
>studio.inlive.app</a
>
and read README.md file on how to get it
</p>
<div class="flex items-center justify-center">
<p>Input your API key :</p>
<input
type="text"
placeholder="Your API Key"
id="userAPIKey"
class="border rounded-lg border-gray-500 p-2 ml-1 my-4"
/>
</div>
<div id="warningAPIKey" class="my-2 text-xs text-red-600 font-bold"></div>
<!-- add own API Key -->
<button
onclick="inputAPIKey()"
type="button"
aria-label="create-stream"
class="cursor-pointer border-2 border-blue-600 rounded-lg text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2"
>
Submit
</button>
</div>
<!-- create stream name -->
<div
class="hidden flex-col items-center justify-center text-sm"
id="createContainer"
>
<div class="flex items-center justify-center">
<p>Type your stream name to create a new stream (optional) :</p>
<input
type="text"
placeholder="Your stream name"
id="inputStreamName"
class="border rounded-lg border-gray-500 p-2 ml-1 my-4"
/>
</div>
<!-- create stream id -->
<button
onclick="createStream()"
type="button"
aria-label="create-stream"
class="cursor-pointer border-2 border-blue-600 rounded-lg text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2"
>
Create Stream
</button>
</div>
<div
class="hidden flex-col content-center items-center justify-center justify-items-center text-center text-base"
id="mainContainerError"
>
<!-- to view error message of createStream func -->
<h1 id="createStreamErrMessage" class="text-center mt-2"></h1>
</div>
<div
class="hidden flex-col content-center items-center justify-center justify-items-center text-center text-xs"
id="mainContainer"
>
<!-- to view stream name only -->
<div id="yourStream" class="text-center mt-2 text-xs"></div>
<!-- stream video view -->
<video
autoplay
muted
playsinline
class="w-3/4 border rounded-xl my-4"
></video>
<div id="streamStatus" class="text-blue-600 my-4"></div>
<!-- to start streaming -->
<button
onclick="startStream()"
type="button"
aria-label="start-stream"
id="startStream"
class="block cursor-pointer border-2 border-blue-600 rounded-lg text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2"
>
Start Stream
</button>
<!-- to end streaming from the endpoint -->
<button
onclick="endStream(createdStreamData?.data?.id)"
type="button"
aria-label="end-stream"
id="endStream"
class="hidden cursor-pointer border-2 border-blue-600 rounded-lg text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2"
>
End Stream
</button>
<!-- to get the video link -- for viewers to view live stream -->
<form id="getStream" class="hidden my-4 border border-black rounded-lg">
<input
type="text"
id="getStreamLink"
placeholder="Click the button to get your live streaming link"
readonly
class="p-1 w-[300px] rounded-l-lg"
/>
<button
onclick="getStream(createdStreamData?.data?.id, options)"
type="button"
aria-label="get-stream"
class="cursor-pointer border border-black rounded-r-lg bg-gray-300 text-black p-1 hover:bg-gray-400"
>
Get Stream
</button>
</form>
<div id="streamLink" class="my-2 text-xs font-bold"></div>
<div
id="manifestUriLink"
class="mb-2 text-xs text-gray-800 font-bold"
></div>
</div>
</body>
</html>