-
Notifications
You must be signed in to change notification settings - Fork 0
/
sdkdemo.html
322 lines (317 loc) · 16.9 KB
/
sdkdemo.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<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">
<script src="./rztrtcsdk.min.js"></script>
<title>RZTRtcSDK Demo - 本机 8503</title>
<style>
video {
background: #222;
width: 480px;
height: 360px;
margin: 0 0 20px 0;
vertical-align: top;
}
video#localVideoTag {
margin: 0 20px 20px 0;
/* 本地镜像 */
/* transform: rotateY(180deg); */
}
</style>
</head>
<body>
<div align=center>
<video id=localVideoTag autoplay></video>
<video id=remoteTag autoplay></video><br>
<input class="phone">
<button class="btnCall">语音呼叫</button>
<button class="btnVideoCall">视频呼叫</button>
<button class="btnAnswer">接听</button>
<button class="btnHangup">挂断</button>
<button class="btnSwitchAudio">静音</button>
<button class="btnHold">保持</button>
<button class="btnSwitchVideoSource">共享屏幕</button>
<button class="btnSwitchVideo">关闭本地视频</button>
<input type=checkbox id=cbShareScreen>使用屏幕作为默认视频源<br>
<p>下面的接听按钮，供与freeswitch-webrtc-bench测试时使用</p>
<button class="btnAnswerOnlyOneMediaForVideo">忽略语音接听（只有视频）</button><br>
<p id=callInfo>呼叫提示信息</p>
<button class="btnAnswerSecond">接听第二路，挂断第一路</button>
<button class="btnHangupSecond">挂断第二路</button><br>
<p id=callInfo2>第二路呼叫相关信息</p>
<p id=callInfo3 style="color:red">漏接呼叫及错误相关信息</p>
</div>
<script>
let callShareScreen = false;
const sdk = new RZTRtcSDK.RTCSDK('8503', '123456', '192.168.100.205', 7443, '测试8503');
sdk.setWebSocketInfo('wss://192.168.100.205:7443', 'WSS');
// sdk.setWebSocketInfo('ws://192.168.100.205:5066', 'WS');
// sdk.setWebSocketInfo('wss://192.168.100.205/fswss/', 'WSS');
// sdk.setWebSocketInfo('wss://192.168.100.205/fsws/', 'WS');
sdk.enableDebug();
sdk.setParams({
// 远端语音或视频标签，必须
remoteTag: remoteTag,
// 被叫振铃音，必须
ringRingUrl: 'ringtone.wav',
// 重要！！！能缩短听到看到通话对端的时间，只适用于RZT并需要设置为true
// 如不是RZT服务器，请置为false或不设置该值
rztpcc: true,
// 重要！！！设置session timer的数值，RZT需要设置为240
sessionExpires: 240,
// 本地视频窗口标签，可选
localVideoTag: localVideoTag,
// 控制本地发送的视频的宽、高和帧率，可选
width: 640, height: 360, frameRate: 30,
// 控制本地发送的视频的码率，可选
bandWidth: 800,
// 控制共享屏幕时发送的视频的宽、高和帧率，可选
screenWidth: 1280, screenHeight: 720, screenFrameRate: 20,
// 控制共享屏幕时发送的视频的码率，可选
screenBandWidth: 1200,
// 共享屏幕时显示分享音频选项，共享屏幕默认屏蔽了这个选项
// displayShareAudioOption: true,
// 调用call或answer时使用屏幕作为视频源，但用户却最终取消了共享屏幕，这时候仍然会呼出或接听（使用摄像头作为视频源）
// 下面这个参数置为true后，会改变这种默认行为，会取消呼出或挂断来电
// cancelCallWhenShareCanceled: true,
// 自定义SIP USER AGENT
// userAgent: 'xxx',
// 自定义STUN/TURN设置, RTCConfiguration，https://www.w3.org/TR/webrtc/#dom-rtcconfiguration
// 这个参数设置后，前面的rztpcc将失效
// pcc: {
// iceServers : [ {
// urls : [ 'turn:xxx.xxx.xxx.xxx' ],
// username : 'uuu_your_username_uuu',
// credential : 'ppp_your_password_ppp'
// } ],
// iceTransportPolicy : 'relay',
// rtcpMuxPolicy : 'require'
// },
// 下面这两个参数，对于FreeSWITCH，可不用设置，如果回铃音在183 early media中提供了
// 主叫回铃音
// ringBackUrl: 'ringback.wav',
// 即使主叫收到了183仍然使用自己的主叫回铃音
// SC183StillRingBack: true,
// 禁用session timer，这个参数设置后，前面的sessionExpires无效
// sessionTimer: false,
});
sdk.eventHandler = function(event, data) {
const ci = document.getElementById('callInfo');
const ci2 = document.getElementById('callInfo2');
const ci3 = document.getElementById('callInfo3');
const { remoteUser, remoteUserId, callType, statusCode } = data;
const { originator, cause } = data;
const { type, reason } = data;
// console.log(remoteUser, remoteUserId, callType, statusCode);
switch (event) {
case 'registered':
// 注册成功处理
break;
case 'incomingCall':
ci.textContent = '您有一个来自' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话，请接听！';
break;
case 'remoteRingRing':
ci.textContent = (callType === 'video' ? '视频' : '语音') + '呼叫' + remoteUser + '中，对方' + statusCode + '正在振铃。。。';
break;
case 'remoteAnswerCall':
ci.textContent = remoteUser + '已接通与您的' + (callType === 'video' ? '视频' : '语音') + '通话。';
if (sdk.getVideoSource() === 'camera') {
document.querySelector('.btnSwitchVideoSource').textContent = '共享屏幕';
} else if (sdk.getVideoSource() === 'screen') {
document.querySelector('.btnSwitchVideoSource').textContent = '取消共享屏幕';
}
break;
case 'remoteHangupCall':
ci.textContent = remoteUser + '已挂断与您的' + (callType === 'video' ? '视频' : '语音') + '通话。';
document.querySelector('.btnSwitchVideoSource').textContent = '共享屏幕';
document.querySelector('.btnSwitchVideo').textContent = '关闭本地视频';
document.querySelector('.btnSwitchAudio').textContent = '静音';
document.querySelector('.btnHold').textContent = '保持';
break;
case 'localAnswerCall':
ci.textContent = '您已接通与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。';
if (sdk.getVideoSource() === 'camera') {
document.querySelector('.btnSwitchVideoSource').textContent = '共享屏幕';
} else if (sdk.getVideoSource() === 'screen') {
document.querySelector('.btnSwitchVideoSource').textContent = '取消共享屏幕';
}
break;
case 'localHangupCall':
ci.textContent = '您已挂断与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。';
document.querySelector('.btnSwitchVideoSource').textContent = '共享屏幕';
document.querySelector('.btnSwitchVideo').textContent = '关闭本地视频';
document.querySelector('.btnSwitchAudio').textContent = '静音';
document.querySelector('.btnHold').textContent = '保持';
break;
case 'videoSourceChanged':
if (sdk.getVideoSource() === 'camera') {
document.querySelector('.btnSwitchVideoSource').textContent = '共享屏幕';
} else if (sdk.getVideoSource() === 'screen') {
document.querySelector('.btnSwitchVideoSource').textContent = '取消共享屏幕';
}
break;
case 'callEstablishFailed':
ci.textContent = '呼叫建立失败，失败方为：' + originator + '，失败原因为：' + cause + '。';
break;
case 'missCall':
ci3.textContent = '您有一个来自' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '未接通话。';
break;
case 'failed':
ci3.textContent = '有错误发生，错误类型：' + type + '，错误原因：' + reason + '。';
if (type == 'accountError') {
ci3.textContent += '账号的用户名或密码错误，请联系管理员！';
} else if (type == 'connectionError') {
ci3.textContent += '连接服务器错误，请联系管理员！';
}
break;
case 'secondCall':
ci2.textContent = '您有一个来自' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话，请接听！（第二路）';
break;
case 'remoteSecondCallHangup':
ci2.textContent = remoteUser + '已挂断与您的' + (callType === 'video' ? '视频' : '语音') + '通话。（第二路）';
break;
case 'localSecondCallHangup':
ci2.textContent = '您已挂断与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。（第二路）';
break;
case 'secondCallEstablishFailed':
ci2.textContent = '呼叫建立失败，失败方为：' + originator + '，失败原因为：' + cause + '。（第二路）';
break;
}
};
sdk.start();
document.querySelector('.btnCall').onclick = () => {
if (document.querySelector('.phone').value === '') {
const ci = document.getElementById('callInfo');
ci.textContent = '请输入被叫号码';
} else if (!sdk.inCall() && !sdk.hasSecondCall()) {
const ci = document.getElementById('callInfo');
ci.textContent = '语音呼叫' + document.querySelector('.phone').value + '中。';
sdk.call(document.querySelector('.phone').value, 'audio');
} else {
const ci = document.getElementById('callInfo');
ci.textContent = '语音呼叫操作不允许';
}
};
document.querySelector('.btnVideoCall').onclick = () => {
if (document.querySelector('.phone').value === '') {
const ci = document.getElementById('callInfo');
ci.textContent = '请输入被叫号码';
} else if (!sdk.inCall() && !sdk.hasSecondCall()) {
const ci = document.getElementById('callInfo');
ci.textContent = '视频呼叫' + document.querySelector('.phone').value + '中。';
sdk.call(document.querySelector('.phone').value, 'video', callShareScreen);
} else {
const ci = document.getElementById('callInfo');
ci.textContent = '视频呼叫操作不允许';
}
};
document.querySelector('.btnAnswer').onclick = () => {
if (sdk.canAnswer()) {
// const ci = document.getElementById('callInfo');
// const { remoteUser, remoteUserId, callType } = sdk.getCallInfo();
// ci.textContent = '您已接通与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。';
sdk.answer(callShareScreen);
} else {
const ci = document.getElementById('callInfo');
ci.textContent = '接听操作不允许';
}
};
document.querySelector('.btnHangup').onclick = () => {
if (sdk.inCall()) {
// const ci = document.getElementById('callInfo');
// const { remoteUser, remoteUserId, callType } = sdk.getCallInfo();
// ci.textContent = '您已挂断与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。';
sdk.hangup();
} else {
const ci = document.getElementById('callInfo');
ci.textContent = '挂断操作不允许';
}
};
document.querySelector('.btnSwitchVideo').onclick = () => {
if (!sdk.inCall() || sdk.getVideoSource() === '') {
return;
}
newVideoStatus = !sdk.getVideoStatus();
if (newVideoStatus)
document.querySelector('.btnSwitchVideo').textContent = '关闭本地视频';
else
document.querySelector('.btnSwitchVideo').textContent = '打开本地视频';
sdk.switchVideo();
};
document.querySelector('.btnSwitchAudio').onclick = () => {
if (!sdk.inCall()) {
return;
}
newVoiceStatus = !sdk.getAudioStatus();
if (newVoiceStatus)
document.querySelector('.btnSwitchAudio').textContent = '静音';
else
document.querySelector('.btnSwitchAudio').textContent = '取消静音';
sdk.switchAudio();
};
document.querySelector('.btnHold').onclick = () => {
if (!sdk.inCall()) {
return;
}
if (sdk.isOnHold()) {
sdk.unhold();
document.querySelector('.btnHold').textContent = '保持';
} else {
sdk.hold();
document.querySelector('.btnHold').textContent = '解保持';
}
};
document.querySelector('#cbShareScreen').onchange = () => {
callShareScreen = document.getElementById('cbShareScreen').checked;
};
document.querySelector('.btnSwitchVideoSource').onclick = () => {
sdk.switchVideoSource(sdk.getVideoSource() === 'camera' ? 'screen' : 'camera');
};
document.querySelector('.btnAnswerSecond').onclick = () => {
if (sdk.hasSecondCall()) {
const ci2 = document.getElementById('callInfo2');
const { remoteUser, remoteUserId, callType } = sdk.getSecondCallInfo();
ci2.textContent = '您已接通与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。（第二路）';
sdk.answerSecondCall(callShareScreen);
} else {
const ci2 = document.getElementById('callInfo2');
ci2.textContent = '接听操作不允许（第二路）';
}
};
document.querySelector('.btnHangupSecond').onclick = () => {
if (sdk.hasSecondCall()) {
// const ci2 = document.getElementById('callInfo2');
// const { remoteUser, remoteUserId, callType } = sdk.getSecondCallInfo();
// ci2.textContent = '您已挂断与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。（第二路）';
sdk.hangupSecondCall();
} else {
const ci2 = document.getElementById('callInfo2');
ci2.textContent = '挂断操作不允许（第二路）';
}
};
document.querySelector('.btnAnswerOnlyOneMediaForVideo').onclick = () => {
if (sdk.canAnswer()) {
// const ci = document.getElementById('callInfo');
// const { remoteUser, remoteUserId, callType } = sdk.getCallInfo();
// ci.textContent = '您已接通与' + remoteUser + '的' + (callType === 'video' ? '视频' : '语音') + '通话。';
sdk.answerOnlyOneMedia('video', callShareScreen);
} else {
const ci = document.getElementById('callInfo');
ci.textContent = '接听操作不允许';
}
};
document.body.onload = function () {
if (!(window.location.hostname.toLowerCase() === 'localhost' || window.location.hostname.toLowerCase() === '127.0.0.1'
|| window.location.protocol.toLowerCase() === 'https:')) {
alert('请在localhost或有安全证书的站点部署此页面。');
return;
}
};
document.body.onunload = function () {
sdk.stop();
};
</script>
</body>
</html>