Skip to content

Commit 1334448

Browse files
author
Antonis Tsakiridis
committed
Fixed #24: Refactor code so that getUserMedia() is not called at Device.setup(), but later at Device.connect()
1 parent 9641939 commit 1334448

File tree

2 files changed

+57
-60
lines changed

2 files changed

+57
-60
lines changed

‎samples/hello-world/index.html‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
</head>
2121
<body>
2222
<!-- html elements for local and remote media (audio and video if applicable -->
23-
<video id="localMedia" autoplay muted></video>
24-
<video id="remoteMedia" autoplay></video>
23+
<video id="localMedia" autoplay muted style="display: none;"></video>
24+
<video id="remoteMedia" autoplay style="display: none;"></video>
2525

2626
<div>
2727
<button id="callButton">Call</button>
@@ -30,10 +30,8 @@
3030
</div>
3131

3232
<script>
33-
var useVideo = false;
3433
var localMedia = document.getElementById("localMedia");
3534
var remoteMedia = document.getElementById("remoteMedia");
36-
remoteMedia.style.display = "none";
3735
var callButton = document.getElementById("callButton");
3836
var hangupButton = document.getElementById("hangupButton");
3937
var currentConnection;
@@ -45,9 +43,6 @@
4543
'debug': true,
4644
'username': 'web-sdk',
4745
'password': '1234',
48-
'local-media': localMedia,
49-
'remote-media': remoteMedia,
50-
'video-enabled': useVideo,
5146
};
5247

5348
// In order to use RestCommWebClient you first to setup the Device with parameters set above
@@ -66,14 +61,15 @@
6661
// Pass a callback to get notified when a connection is established successfuly
6762
RestCommClient.Device.connect(function(connection) {
6863
$("#log").text("Successfully established call");
69-
remoteMedia.style.display = "block";
7064
});
7165

7266
// When user presses Dial, this function is called that makes the actuall call
7367
function call() {
7468
var parameters = {
75-
'username': '[email protected]', // CHANGEME: update the IP address to your Restcomm instance
76-
'video-enabled': useVideo, // should we use WebRTC video or WebRTC audio only?
69+
'username': '[email protected]', // CHANGEME: update the IP address to your Restcomm instance
70+
'video-enabled': false, // should we use WebRTC video or WebRTC audio only?
71+
'local-media': localMedia,
72+
'remote-media': remoteMedia,
7773
};
7874

7975
// Make the actual call, using the parameters above
@@ -82,7 +78,6 @@
8278
// Pass a callback to get notified when the connection is disconnected
8379
currentConnection.disconnect(function(connection) {
8480
$("#log").text("Connection ended");
85-
remoteMedia.style.display = "none";
8681
});
8782

8883
// Pass a callback to get notified if a Connetion error occurs

‎src/RestCommWebClient.js‎

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,8 @@ Connection.prototype.accept = function(parameters)
366366
messageMediaFlag: false
367367
};
368368

369+
this.parameters['video-enabled'] = parameters['video-enabled'];
370+
369371
if (this.webrtcommCall) {
370372
this.webrtcommCall.accept(callConfiguration);
371373
this.status = 'open';
@@ -692,9 +694,6 @@ var RestCommClient = {
692694
* <b>password</b> : Password to be used in client authentication, i.e. <i>1234</i> <br>
693695
* <b>registrar</b> : URL for the registrar, i.e. <i>wss://cloud.restcomm.com:5063</i> <br>
694696
* <b>domain</b> : domain to be used, i.e. <i>cloud.restcomm.com</i> <br>
695-
* <b>localMedia</b> : Local media stream, usually an HTML5 video or audio element <br>
696-
* <b>remoteMedia</b> : Remote media stream, usually an HTML5 video or audio element <br>
697-
* <b>videoEnabled</b> : Should we enable video internally when calling WebRTC getUserMedia() (boolean) <br>
698697
* <b>debug</b> : Enable debug logging in browser console <br>
699698
*/
700699
setup: function(parameters) {
@@ -706,27 +705,6 @@ var RestCommClient = {
706705
console.log("Device::setup(): " + JSON.stringify(parameters));
707706
}
708707

709-
// webrtc getUserMedia
710-
getUserMedia({audio:true, video:parameters['video-enabled']},
711-
function(stream) {
712-
// got local stream as result of getUserMedia() -add it to localVideo html element
713-
if (this.debugEnabled) {
714-
console.log("Device::setup(), received local WebRTC stream");
715-
}
716-
parameters['local-media'].src = URL.createObjectURL(stream);
717-
localStream = stream;
718-
//callButton.disabled = false;
719-
},
720-
function(error) {
721-
console.log("Device::setup(), getUserMedia error: ", error);
722-
723-
this.onError("Error in getUserMedia()" + error);
724-
}
725-
);
726-
727-
// store remote media element for later
728-
remoteMedia = parameters['remote-media'];
729-
730708
// if parameters.registrar is either unset or empty we should function is registrar-less mode
731709
var register = false;
732710
if (parameters['registrar'] && parameters['registrar'] != "") {
@@ -889,7 +867,9 @@ var RestCommClient = {
889867
* @param {varies} arg1 - Callback to be invoked (a) or params (b)
890868
* @param {dictionary} arg2 - Parameters for the connection: <br>
891869
* <b>username</b> : Username for the called party, i.e. <i>[email protected]</i> <br>
892-
* <b>videoEnabled</b> : Whether we want video enabled for the call (boolean) <br>
870+
* <b>localMedia</b> : Local media stream, usually an HTML5 video or audio element <br>
871+
* <b>remoteMedia</b> : Remote media stream, usually an HTML5 video or audio element <br>
872+
* <b>videoEnabled</b> : Should we enable video for this call (boolean) <br>
893873
*/
894874
connect: function(arg1, arg2) {
895875
if (typeof arg1 == "function") {
@@ -910,36 +890,58 @@ var RestCommClient = {
910890
// not implemented yet
911891
var audioConstraints = arg2;
912892

893+
// store remote media element for later
894+
remoteMedia = parameters['remote-media'];
895+
913896
this.connection = new Connection(this, 'connecting');
914897
this.connection.parameters = {
915898
'From': wrtcConfiguration.sip.sipUserName,
916899
'To': parameters['username'],
900+
'video-enabled': parameters['video-enabled'],
917901
};
918-
var callConfiguration = {
919-
displayName: wrtcConfiguration.sip.sipDisplayName,
920-
localMediaStream: localStream,
921-
audioMediaFlag: true,
922-
videoMediaFlag: parameters['video-enabled'],
923-
messageMediaFlag: false,
924-
audioCodecsFilter: '',
925-
videoCodecsFilter: ''
926-
};
927-
928-
this.connection.webrtcommCall = wrtcClient.call(parameters['username'], callConfiguration);
929-
//this.connection.onDisconnect = this.onDisconnect;
930902

931-
this.status = 'busy';
932-
933-
if (localStream.getVideoTracks().length > 0) {
934-
if (this.debugEnabled) {
935-
console.log("Device::connect(): Using video device: " + localStream.getVideoTracks()[0].label);
936-
}
937-
}
938-
if (localStream.getAudioTracks().length > 0) {
939-
if (this.debugEnabled) {
940-
console.log("Device::connect(): Using audio device: " + localStream.getAudioTracks()[0].label);
941-
}
942-
}
903+
var that = this;
904+
// webrtc getUserMedia
905+
getUserMedia({audio:true, video:parameters['video-enabled']},
906+
function(stream) {
907+
// got local stream as result of getUserMedia() -add it to localVideo html element
908+
if (that.debugEnabled) {
909+
console.log("Device::setup(), received local WebRTC stream");
910+
}
911+
parameters['local-media'].src = URL.createObjectURL(stream);
912+
localStream = stream;
913+
914+
var callConfiguration = {
915+
displayName: wrtcConfiguration.sip.sipDisplayName,
916+
localMediaStream: localStream,
917+
audioMediaFlag: true,
918+
videoMediaFlag: parameters['video-enabled'],
919+
messageMediaFlag: false,
920+
audioCodecsFilter: '',
921+
videoCodecsFilter: ''
922+
};
923+
924+
that.connection.webrtcommCall = wrtcClient.call(parameters['username'], callConfiguration);
925+
926+
that.status = 'busy';
927+
928+
if (localStream.getVideoTracks().length > 0) {
929+
if (that.debugEnabled) {
930+
console.log("Device::connect(): Using video device: " + localStream.getVideoTracks()[0].label);
931+
}
932+
}
933+
if (localStream.getAudioTracks().length > 0) {
934+
if (that.debugEnabled) {
935+
console.log("Device::connect(): Using audio device: " + localStream.getAudioTracks()[0].label);
936+
}
937+
}
938+
},
939+
function(error) {
940+
console.log("Device::setup(), getUserMedia error: ", error);
941+
942+
that.onError("Error in getUserMedia()" + error);
943+
}
944+
);
943945

944946
return this.connection;
945947
}

0 commit comments

Comments
 (0)