-
Notifications
You must be signed in to change notification settings - Fork 137
/
viewer.js
240 lines (209 loc) · 8.62 KB
/
viewer.js
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
/**
* This file demonstrates the process of starting WebRTC streaming using a KVS Signaling Channel.
*/
const viewer = {};
async function startViewer(localView, remoteView, formValues, onStatsReport, onRemoteDataMessage) {
viewer.localView = localView;
viewer.remoteView = remoteView;
// Create KVS client
const kinesisVideoClient = new AWS.KinesisVideo({
region: formValues.region,
accessKeyId: formValues.accessKeyId,
secretAccessKey: formValues.secretAccessKey,
sessionToken: formValues.sessionToken,
endpoint: formValues.endpoint,
});
// Get signaling channel ARN
const describeSignalingChannelResponse = await kinesisVideoClient
.describeSignalingChannel({
ChannelName: formValues.channelName,
})
.promise();
const channelARN = describeSignalingChannelResponse.ChannelInfo.ChannelARN;
console.log('[VIEWER] Channel ARN: ', channelARN);
// Get signaling channel endpoints
const getSignalingChannelEndpointResponse = await kinesisVideoClient
.getSignalingChannelEndpoint({
ChannelARN: channelARN,
SingleMasterChannelEndpointConfiguration: {
Protocols: ['WSS', 'HTTPS'],
Role: KVSWebRTC.Role.VIEWER,
},
})
.promise();
const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
return endpoints;
}, {});
console.log('[VIEWER] Endpoints: ', endpointsByProtocol);
const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
region: formValues.region,
accessKeyId: formValues.accessKeyId,
secretAccessKey: formValues.secretAccessKey,
sessionToken: formValues.sessionToken,
endpoint: endpointsByProtocol.HTTPS,
});
// Get ICE server configuration
const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
.getIceServerConfig({
ChannelARN: channelARN,
})
.promise();
const iceServers = [];
if (!formValues.natTraversalDisabled && !formValues.forceTURN) {
iceServers.push({ urls: `stun:stun.kinesisvideo.${formValues.region}.amazonaws.com:443` });
}
if (!formValues.natTraversalDisabled) {
getIceServerConfigResponse.IceServerList.forEach(iceServer =>
iceServers.push({
urls: iceServer.Uris,
username: iceServer.Username,
credential: iceServer.Password,
}),
);
}
console.log('[VIEWER] ICE servers: ', iceServers);
// Create Signaling Client
viewer.signalingClient = new KVSWebRTC.SignalingClient({
channelARN,
channelEndpoint: endpointsByProtocol.WSS,
clientId: formValues.clientId,
role: KVSWebRTC.Role.VIEWER,
region: formValues.region,
credentials: {
accessKeyId: formValues.accessKeyId,
secretAccessKey: formValues.secretAccessKey,
sessionToken: formValues.sessionToken,
},
});
const resolution = formValues.widescreen ? { width: { ideal: 1280 }, height: { ideal: 720 } } : { width: { ideal: 640 }, height: { ideal: 480 } };
const constraints = {
video: formValues.sendVideo ? resolution : false,
audio: formValues.sendAudio,
};
const configuration = {
iceServers,
iceTransportPolicy: formValues.forceTURN ? 'relay' : 'all',
};
viewer.peerConnection = new RTCPeerConnection(configuration);
if (formValues.openDataChannel) {
viewer.dataChannel = viewer.peerConnection.createDataChannel('kvsDataChannel');
viewer.peerConnection.ondatachannel = event => {
event.channel.onmessage = onRemoteDataMessage;
};
}
// Poll for connection stats
viewer.peerConnectionStatsInterval = setInterval(() => viewer.peerConnection.getStats().then(onStatsReport), 1000);
viewer.signalingClient.on('open', async () => {
console.log('[VIEWER] Connected to signaling service');
// Get a stream from the webcam, add it to the peer connection, and display it in the local view
try {
viewer.localStream = await navigator.mediaDevices.getUserMedia(constraints);
viewer.localStream.getTracks().forEach(track => viewer.peerConnection.addTrack(track, viewer.localStream));
localView.srcObject = viewer.localStream;
} catch (e) {
console.error('[VIEWER] Could not find webcam');
return;
}
// Create an SDP offer to send to the master
console.log('[VIEWER] Creating SDP offer');
await viewer.peerConnection.setLocalDescription(
await viewer.peerConnection.createOffer({
offerToReceiveAudio: true,
offerToReceiveVideo: true,
}),
);
// When trickle ICE is enabled, send the offer now and then send ICE candidates as they are generated. Otherwise wait on the ICE candidates.
if (formValues.useTrickleICE) {
console.log('[VIEWER] Sending SDP offer');
viewer.signalingClient.sendSdpOffer(viewer.peerConnection.localDescription);
}
console.log('[VIEWER] Generating ICE candidates');
});
viewer.signalingClient.on('sdpAnswer', async answer => {
// Add the SDP answer to the peer connection
console.log('[VIEWER] Received SDP answer');
await viewer.peerConnection.setRemoteDescription(answer);
});
viewer.signalingClient.on('iceCandidate', candidate => {
// Add the ICE candidate received from the MASTER to the peer connection
console.log('[VIEWER] Received ICE candidate');
viewer.peerConnection.addIceCandidate(candidate);
});
viewer.signalingClient.on('close', () => {
console.log('[VIEWER] Disconnected from signaling channel');
});
viewer.signalingClient.on('error', error => {
console.error('[VIEWER] Signaling client error: ', error);
});
// Send any ICE candidates to the other peer
viewer.peerConnection.addEventListener('icecandidate', ({ candidate }) => {
if (candidate) {
console.log('[VIEWER] Generated ICE candidate');
// When trickle ICE is enabled, send the ICE candidates as they are generated.
if (formValues.useTrickleICE) {
console.log('[VIEWER] Sending ICE candidate');
viewer.signalingClient.sendIceCandidate(candidate);
}
} else {
console.log('[VIEWER] All ICE candidates have been generated');
// When trickle ICE is disabled, send the offer now that all the ICE candidates have ben generated.
if (!formValues.useTrickleICE) {
console.log('[VIEWER] Sending SDP offer');
viewer.signalingClient.sendSdpOffer(viewer.peerConnection.localDescription);
}
}
});
// As remote tracks are received, add them to the remote view
viewer.peerConnection.addEventListener('track', event => {
console.log('[VIEWER] Received remote track');
if (remoteView.srcObject) {
return;
}
viewer.remoteStream = event.streams[0];
remoteView.srcObject = viewer.remoteStream;
});
console.log('[VIEWER] Starting viewer connection');
viewer.signalingClient.open();
}
function stopViewer() {
console.log('[VIEWER] Stopping viewer connection');
if (viewer.signalingClient) {
viewer.signalingClient.close();
viewer.signalingClient = null;
}
if (viewer.peerConnection) {
viewer.peerConnection.close();
viewer.peerConnection = null;
}
if (viewer.localStream) {
viewer.localStream.getTracks().forEach(track => track.stop());
viewer.localStream = null;
}
if (viewer.remoteStream) {
viewer.remoteStream.getTracks().forEach(track => track.stop());
viewer.remoteStream = null;
}
if (viewer.peerConnectionStatsInterval) {
clearInterval(viewer.peerConnectionStatsInterval);
viewer.peerConnectionStatsInterval = null;
}
if (viewer.localView) {
viewer.localView.srcObject = null;
}
if (viewer.remoteView) {
viewer.remoteView.srcObject = null;
}
if (viewer.dataChannel) {
viewer.dataChannel = null;
}
}
function sendViewerMessage(message) {
if (viewer.dataChannel) {
try {
viewer.dataChannel.send(message);
} catch (e) {
console.error('[VIEWER] Send DataChannel: ', e.toString());
}
}
}