forked from AgoraIO/API-Examples-Web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (120 loc) · 5.92 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
<!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>Video Self-Capturing -- Agora</title>
<link rel="stylesheet" href="../assets/bootstrap.min.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!--
This page interacts with the Agora Voice Call for Web Next Generation SDK to easily create Video Call
functionality in a Web page.
This HTML page imports the next generation Agora Video SDK for Web from
https://download.agora.io/sdk/release/AgoraRTC_N.js and local functionality from cloudProxy.js.
The form in this page passes data and actions input by the user to cloudProxy.js. basicVideoCall
creates an AgoraRTC client which adds and and removes local and remote users to a specific channel.
-->
<!--
Create the banner at the top of the page.
-->
<div class="container-fluid banner">
<p class="banner-text">Video Self-Capturing</p>
<a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
class="Header-link " href="https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo">
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
</div>
<!--
When a user tries to join a Video Call without supplying an AccessToken, this button
calls #success-alert in cloudProxy.js. #success-alert refreshes this page with the
user information.
-->
<div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Congratulations!</strong><span> You can invite others join this channel by click </span><a href="" target="_blank">here</a>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--
When a user successfully joins a Video Call channel with an AccessToken, this section displays
a banner with a close button.
-->
<div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Congratulations!</strong><span> Joined room successfully. </span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--
When a user successfully joins a Video Call channel with an AccessToken, this section displays
a banner with a close button.
-->
<div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Congratulations!</strong><span> Joined room successfully. </span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="container">
<!--
Input fields so the user can securely join a Video Call channel.
-->
<form id="join-form">
<div class="row join-info-group">
<div class="col-sm">
<p class="join-info-text">APP ID</p>
<input id="appid" type="text" placeholder="Enter the appid" required>
<p class="tips">You find your APP ID in the <a href="https://console.agora.io/projects">Agora Console</a></p>
</div>
<div class="col-sm">
<p class="join-info-text">Token(optional)</p>
<input id="token" type="text" placeholder="Enter the app token">
<p class="tips">To create a temporary token, <a href="https://console.agora.io/projects">edit your project</a> in Agora Console.</p>
</div>
<div class="col-sm">
<p class="join-info-text">Channel Name</p>
<input id="channel" type="text" placeholder="Enter the channel name" required>
<p class="tips">You create a channel when you create a temporary token. You guessed it, in <a href="https://console.agora.io/projects">Agora Console</a></p>
</div>
<div class="col-sm">
<p class="join-info-text">User ID(optional)</p>
<input id="uid" type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" placeholder="Enter the user ID">
</div>
</div>
<!--
Join or leave a Video Call channel.
-->
<div class="button-group">
<button id="join" type="submit" class="btn btn-primary btn-sm">Join</button>
<button id="leave" type="button" class="btn btn-primary btn-sm" disabled>Leave</button>
</div>
</form>
<div class="canvas-area">
<canvas id="customCanvasElement" style="width: 480px; height: 320px;" >Your Browser doesn't support this Feature</canvas>
</div>
<!--
This local media splayer is enabled when the user has successfully joined a Video Call channel.
-->
<div class="row video-group">
<div class="col">
<p id="local-player-name" class="player-name"></p>
<div id="local-player" class="player"></div>
</div>
<div class="w-100"></div>
<div class="col">
<div id="remote-playerlist"></div>
</div>
</div>
</div>
<!--
Import the Agora Video Call SDK for Web and local calls to it.
-->
<script src="../assets/jquery-3.4.1.min.js"></script>
<script src="../assets/bootstrap.bundle.min.js"></script>
<script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
<script src="./index.js"></script>
</body>
</html>