-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (111 loc) · 4.69 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
<!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">
<link rel="stylesheet" href="./assets/css/style.css">
<title>Web Call V5 Quick Demo</title>
<script src="./assets/js/utils.js"></script>
</head>
<body>
<div class="rong-container">
<h3 class="rong-title"> Web Call V5 Quick Demo </h3>
<div id="rongUser" class="rong-user">
<span>用户 ID：</span>
<span id="rongUserId"></span>
</div>
<div class="rong-im" id="rongIM">
<p>请先进行 IM 连接</p>
<!--appkey-->
<div class="im-item">
<label>App Key</label>
<input type="text" id="appkey" placeholder="请输入 App Key">
<p>必填；可通过 <a target="_blank" href="https://developer.rongcloud.cn/">[开发者后台] -> [服务管理] -> [基本信息]</a> 获取</p>
</div>
<!--token-->
<div class="im-item">
<label>Token</label>
<input type="text" id="token" placeholder="请输入 Token">
<p>必填；可通过 <a target="_blank" href="https://developer.rongcloud.cn/">[开发者后台] -> [服务管理] -> [API 调用] -> [用户服务] -> [获取 token]</a> 获取</p>
</div>
<!--navi-->
<div class="im-item">
<label>Navi</label>
<input type="text" id="navi" placeholder="请输入 Navi 地址">
<p>非必填；私有云环境必填</p>
</div>
<!--mediaServer-->
<div class="im-item">
<label>MediaServer</label>
<input type="text" id="mediaServer" placeholder="请输入 MediaServer 地址">
<p>非必填；音视频服务地址</p>
</div>
<!--连接-->
<div class="im-item">
<button onclick="connectIM()">连接</button>
</div>
</div>
<div class="rong-call" id="rongCall" style="display: none;">
<!--呼叫选项-->
<div id="callParam" class="call-param">
<!--选择通话类型-->
<div class="param-item">
<label>通话类型</label>
<select name="" id="callType" onchange="callTypeChange()">
<option value="1">单聊</option>
<option value="3">群聊</option>
</select>
<p>必选</p>
</div>
<!--mediaType-->
<div class="param-item">
<label>媒体类型</label>
<select name="" id="callMediaType" onchange="callMediaTypeChange()">
<option value="1">音频</option>
<option value="2">音视频</option>
</select>
<p>必选</p>
</div>
<!--targetId-->
<div id="paramPrivate" class="param-item">
<label>对方 ID</label>
<input id="targetId" type="text" placeholder="对方 userId">
<p>必填；对方的 userId，可通过<a target="_blank" href="https://developer.rongcloud.cn/">[开发者后台] -> [服务管理] -> [API 调用] -> [用户服务] -> [获取 token]</a>获取，且登录成功</p>
</div>
<!--targetId-->
<div id="paramGroupId" class="param-item" style="display: none;">
<label>群组 ID</label>
<input id="groupId" type="text" placeholder="群组 ID">
<p>必填；可通过 <a target="_blank" href="https://developer.rongcloud.cn/">[开发者后台] -> [服务管理] -> [API 调用] -> [群组服务] -> [加入群组]</a> 加入群组后获取</p>
</div>
<!--userIds 只有群显示-->
<div id="paramInvitedIds" class="param-item" style="display: none;">
<label>被邀请者 ID</label>
<input id="userIds" type="text" placeholder="多个 userId 用英文半角逗号分开">
<p>必填；需加入群后，方可收到邀请。多个 userId 用英文半角逗号分开</p>
</div>
</div>
<!--通话操作按钮-->
<div class="opt-btn">
<button id="callBtn" class="btn-call" onclick="call()">呼叫</button>
<button id="acceptBtn" class="btn-accept" onclick="accept()">接听</button>
<button id="hungupBtn" class="btn-hungup" onclick="hungup()">挂断</button>
</div>
<!--通话视图展示-->
<div id="videoView" class="video-view"></div>
</div>
</div>
<div class="toast-wrap">
<span class="toast-msg"></span>
</div>
<!-- RongIMLib -->
<script src="https://cdn.ronghub.com/RongIMLib-v4-Adapter-5.7.2.prod.js"></script>
<!-- RTCLib v5 -->
<script src="https://cdn.ronghub.com/RCRTC-5.6.latest.js"></script>
<!-- Call v5 -->
<script src="https://cdn.ronghub.com/RCCall-5.1.latest.js"></script>
<script src="./assets/js/im.js"></script>
<script src="./assets/js/call.js"></script>
</body>
</html>