forked from ApiRTC/ApiRTC-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPhone.html
105 lines (86 loc) · 3.94 KB
/
Phone.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
<html>
<!-- load apiRTC -->
<head>
<script src="http://cloud.apizee.com/libs/jquery-1.9.0.min.js"></script>
<script src="http://cloud.apizee.com/apiRTC/apiRTC-latest.min.js"></script>
</head>
<body>
<!-- present a simple interface to the user-->
<input type="text" id="number" value="" placeholder="Enter Destination ID..."/>
<input id="call" type="button" disabled="true" value="Registration Ongoing..."/>
<input id="hangup" type="button" disabled="true" value="Hangup"/>
<span id="status"></span>
<div id="local" style="position: absolute;"><video id="myLocalVideo" autoplay="autoplay" muted="true"></video></div>
<div id="remote" style="position: absolute;">
<div id="myRemoteVideo" style="width:640px; height:480px;"></div>
<div id="mini"><video width="30%" height="30%" id="myMiniVideo" autoplay="autoplay" muted="true"></video></div>
</div>
<!-- make handler functions and initialise ApiRTC -->
<script>
'use strict';
var session = null;
// handler function for media errors
function userMediaErrorHandler(e) {
$("#call").attr("disabled", false).val("Call");
$("#hangup").attr("disabled", true).val("Hangup");
}
// handler function for handling the remote user hanging up
function remoteHangupHandler(e) {
console.log('remoteHangupHandler');
console.log(e.detail.reason);
if (e.detail.lastEstablishedCall === true) {
$("#call").attr("disabled", false).val("Call");
$("#hangup").attr("disabled", true).val("Hangup");
}
}
// handler function for when the local user hangs up
function hangupHandler(e) {
console.log('hangupHandler');
console.log(e.detail.reason);
if (e.detail.lastEstablishedCall === true) {
$("#call").attr("disabled", false).val("Call");
$("#hangup").attr("disabled", true).val("Hangup");
}
}
function incomingCallHandler(e) {
apiRTC.addEventListener("remoteHangup", remoteHangupHandler);
$("#call").attr("disabled", true).val("Call ongoing");
$("#hangup").attr("disabled", false).val("Hangup");
}
function callAttemptHandler(e) {
alert('Id :' + e.detail.callerId + ' is trying to reach you');
}
// callback when ApiRTC is ready
function sessionReadyHandler(e) {
console.log('sessionReadyHandler :' + apiCC.session.apiCCId);
$("#call").attr("disabled", false).val("Call");
apiRTC.addEventListener("incomingCall", incomingCallHandler);
apiRTC.addEventListener("userMediaError", userMediaErrorHandler);
apiRTC.addEventListener("callAttempt", callAttemptHandler);
apiRTC.addEventListener("hangup", hangupHandler);
var webRTCClient = apiCC.session.createWebRTCClient({
localVideo : "myLocalVideo",
minilocalVideo : "myMiniVideo",
remoteVideo : "myRemoteVideo",
status : "status"
});
$("#call").click(function () {
$("#call").attr("disabled", true).val("Call ongoing");
$("#hangup").attr("disabled", false).val("Hangup");
apiRTC.addEventListener("remoteHangup", remoteHangupHandler);
webRTCClient.call($("#number").val());
});
$("#hangup").click(function () {
$("#call").attr("disabled", false).val("Call");
$("#hangup").attr("disabled", true).val("Hangup");
webRTCClient.hangUp();
});
}
// initialise ApiRTC
apiRTC.init({
apiKey : "myDemoApiKey",
onReady : sessionReadyHandler
});
</script>
</body>
</html>