cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
3785
Views
0
Helpful
7
Replies

REM web adv sdk call.end() doesnt work

edwin.ramana
Level 4
Level 4

Hi,

I'm using rem web advanced sdk and I tried to end the call by calling the call.end() function but it doesn't work.

The remote video show black screen but the camera and the session is still running.

Do you have any idea why?

Console:

Sending: {"type":"END","callId":"BG-fbef03e0-ae9d-4cc8-b990-ed6ea58a505d"}

csdk-common.js:689 Received: [{"type":"CALL_CONFIG","callId":"BG-fbef03e0-ae9d-4cc8-b990-ed6ea58a505d","iceServers":[]}]

peer-connection.js:318 ERROR: Message received for invalid call - ID: [BG-fbef03e0-ae9d-4cc8-b990-ed6ea58a505d]

Regards

1 Accepted Solution

Accepted Solutions

Hi Edwin,

The call is stopped by calling  call.end(). However you are right that to release the camera you need to close the page where the UC first initialized or move to another page. Below are some instructions on getting the sample app working....

REM is shipped with an Advanced CSDK WebRTC sample app which allows users to make and receive WebRTC calls in a compatible browser.


By default the Advanced  CSDK sample app is not deployed. In order to use it, following two files need to be deployed to REAS:

csdk-sample.war

csdksample-db.xml

The above files can be deployed to REAS either via CLI or the REAS Admin GUI.  They must be assigned to the main-server-group.

Following are the steps to configure REM’s CSDK Sample App.

STEP-1

SSH to the REM Server

The war file and the xml file which are needed to be deployed on REAS are present at the location:

/opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source

csdk-sample.war

csdksample-db-template.xml

STEP-2

The xml file is a template and needs to be configured for use with your server. Copy the existing template xml (csdksample-db-template.xml) to csdksample-db.xml which can be edited to suit your deployment

cp /opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source/csdksample-db-template.xml /opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source/csdksample-db.xml

Then make the following are the necessary changes:

At Line -8,

<webappId>CLIENTSDKSAMPLE-A8C1D</webappId>

WebappID needs to be added to Web Plugin Framework of REM server.

Navigate to https://<REM_SERVER>:8443/web_plugin_framework/webcontroller/admin/

Copy  the webappId mentioned above and add it under Web Application IDs of the above page.

NOTE: you can add a WebAppID of any name but the length of Application Key needs to be at least 16 characters. Only important point to remember is ID given in the xml should be present at the WPF’s WebappID’s.

STEP-3:

Replace example.com with the cluster address of your REM server.

After making these changes save the file and it's ready to deploy to REAS.

GUI : To deploy the files to REAS using the Admin GUI, follow the below steps:

Login to https://<REM_SERVER>:9990

Navigate to Runtime -> Manage Deployments

Add csdk-sample.war and the configured csdksample-db.xml

Assign them to main-server-group

Restart REAS: service reas restart

CLI : To deploy these files using CLI, follow the below steps:

SSH to the REM Server

Navigate to /opt/cisco/<REM_VERSION>/REAS/bin

Run the script jboss-cli.sh

connect using your server IP/FQDN and enter the credential of REAS AS when prompted.

connect <REM_SERVER_ADDRESS>:9999

deploy /opt/cisco/<REM_VERSION>/CSDK/Core_SDK/Sample_Source/csdksample-db.xml --server-groups=main-server-group

deploy /opt/cisco/<REM_VERSION>/CSDK/Core_SDK/Sample_Source/csdk-sample.war --server-groups=main-server-group

exit

Restart REAS: service reas restart

Using the CSDK sample webapp:

Navigate to:  https://<REM_SERVER>:8443/csdk-sample

As per the users defined in the xml file you can use two default user configured as:

USER1

Username:     voicevideo

Password :     123

Extension:      1001

USER2

Username:       all

Password:       123

Extension:      1002

After login with both users you can make call to each other by dialing their extensions.

From user: voicevideo dial 1002 and answer the call from user all.

If you are making a call from the sample app to Jabber, ensure that the Outbound SIP URI is set to the CUCM in the Web Plugin Framework and that you call from the app with the destination as sip:<Jabber extension>@<CUCM ip>

View solution in original post

7 Replies 7

racdavie
Cisco Employee
Cisco Employee

Hi Edwin.

Could you send us the fuller snippet of your console? It looks from that small snippet that it doesn't seem to see that the call exists.

Could you let us know the exact line you are executing to end the call?

Cheers,

Rach D

Hi Rach,

This is my console

Stopping Media Streams

local-media-generator-chrome.js:216 TypeError: phone.stopMediaStream is not a function

    at StreamGenerator.stop (local-media-generator-chrome.js:214)

    at LocalMediaGeneratorChrome.stopCapture (local-media-generator-chrome.js:328)

    at PCPhone.setPreferredVideoCaptureResolution (peer-connection.js:243)

    at Array.<anonymous> (peer-connection.js:223)

    at removeCall (peer-connection.js:32)

    at endCall (peer-connection.js:1207)

    at PCCall.end (peer-connection.js:2496)

    at HTMLButtonElement.<anonymous> ((index):802)

    at HTMLButtonElement.dispatch (jquery-2.1.4.min.js:3)

    at HTMLButtonElement.r.handle (jquery-2.1.4.min.js:3)

csdk-common.js:782 Sending: {"type":"END","callId":"BG-eaa5d032-14f7-44e1-8b29-1a8a42b3debc"}

call.js:483 onRemoteVideoRemoved(): The stream with Id [main] has been removed

this is my code

<script type="text/javascript" src="https://reas/gateway/scripts/adapter.js"></script>

    <script type="text/javascript" src="https://reas/gateway/scripts/csdk-sdk.js"></script>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script>

       //Get hold of the sessionID however your app needs to

    // Set up STUN server list

    var mIsAudioMuted =  false;

    var mIsOnHold = false;

    var call;

    var assistid = "assist-123";

    var sessionID;

 

    $('#go').click(function (event) {

         $.post("http://xxx/session.php", {assist: assistid}, function(result){

            sessionID = result['sessionid'];

            var stunServers=[{"url": "stun:stun.l.google.com:19302"}];

          UC.onInitialised = function() {

          //Register listeners on UC

          UC.phone.onIncomingCall = function(call) {

            // perform tasks associated with incoming call

          };

          call = UC.phone.createCall('xxx');

          call.onInCall = function() {

            // Show video stream(s) in elements

            // To resize the size of the videos, you just need to change the size of the div on css

            call.setVideoElement(document.getElementById('remoteVideoElement'));

            call.setPreviewElement(document.getElementById('previewVideoElement'));

            call.setLocalMediaEnabled(true,true);

            document.getElementById('callMenu').style.display = "block";

          };

          //Set what to do when the remote party ends the call

          call.onEnded = function() {

            alert("Call Ended");

          };

          //Set up what to do if the callee is busy, inform your user etc

          call.onBusy = function() {

            alert("The callee was busy");

          };

          //Dial the call

          call.dial();

 

        };

        UC.onInitialisedFailed = function() {

          };

      //Start UC session using the Session ID and stun server list

        UC.start(result['sessionid'], stunServers);

                });

        });

          $('#end').click(function (event) {

                call.end();

            });

I call the call.end() function

Regards,

Edwin R

Hi Edwin,

I'm not sure what the issue is.

Are you using the latest version of the SDK, 11.6?

I normally don't see the call as a global variable and the dial function is often provided explicit audio and video paramaters...

for instance...

function makeCall(number) {

   var call = UC.phone.createCall(number);

   var remote = $('#remote')[0];

   call.setVideoElement(remote);

   call.dial(true, true);

   };


$('#hangup').click(function() {

   // if we're on a call - end it!

   $('#remote').html("");

   var call = UC.phone.getCalls()[0];

   if (call) {

   call.end();

   }

   else { alert('Not on a call');}

   });


Regards,

Rob

Hi Rob,

Right now, I'm still using 11.5 SDK.

I've changed my code based on your example but I still get the same behavior as before.

The remote video is gone but the preview video is still there and the camera is still on also the call.onEnded callback doesn't get called.

This is my console log

csdk-common.js:689 Received: {"type":"MULTIPART","content":"G2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3\\r\\na=ssrc:885718797 label:fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK\\r\\na=mid:video\\r\\na=setup:active\\r\\n\"}]","multipartID":6,"finalMultipartID":6}

csdk-common.js:575 Combined: [{"type":"ANSWER","callId":"BG-203b6896-83c5-4394-94ba-80963aa18671","streamLabels":{"VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3 fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK":"main","VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3 14SsQfhS1HAmMqnnqKGIBhPY3sif1TY-CXcM":null},"sdp":"v=0\r\no=- 2083282752 3 IN IP4 182.23.67.166\r\ns=-\r\nc=IN IP4 182.23.67.166\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3\r\nm=audio 16004 UDP/TLS/RTP/SAVPF 0\r\na=rtpmap:0 PCMU/8000\r\na=sendonly\r\na=rtcp:1 IN IP4 182.23.67.166\r\na=rtcp-mux\r\na=fingerprint:sha-256 F7:C1:E6:34:15:E0:9A:6D:50:7E:C4:5C:9A:BA:03:DF:92:8C:C7:BB:3F:23:09:2E:03:8D:48:27:57:69:53:42\r\na=candidate:1269803428 1 udp 1 182.23.67.166 16004 typ host generation 0\r\na=candidate:1269803428 2 udp 1 182.23.67.166 16004 typ host generation 0\r\na=ice-ufrag:OOJzbn9S\r\na=ice-pwd:T3uhGBNuVlFd6ocmaDimHv1j\r\na=ssrc:2754669118 cname:GcF4J5kl8-XioKeO\r\na=ssrc:2754669118 msid:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3 14SsQfhS1HAmMqnnqKGIBhPY3sif1TY-CXcM\r\na=ssrc:2754669118 mslabel:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3\r\na=ssrc:2754669118 label:14SsQfhS1HAmMqnnqKGIBhPY3sif1TY-CXcM\r\na=mid:audio\r\na=setup:active\r\nm=video 16004 UDP/TLS/RTP/SAVPF 127 125 108 107 123\r\na=rtpmap:127 H264/90000\r\na=fmtp:127 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f\r\na=rtcp-fb:127 nack\r\na=rtcp-fb:127 ccm fir\r\na=rtcp-fb:127 nack pli\r\na=rtcp-fb:127 goog-remb\r\na=rtpmap:125 red/90000\r\na=rtpmap:108 ulpfec/90000\r\na=rtpmap:107 rtx/90000\r\na=fmtp:107 apt=125\r\na=rtpmap:123 rtx/90000\r\na=fmtp:123 apt=127\r\na=sendonly\r\na=rtcp:1 IN IP4 182.23.67.166\r\na=rtcp-mux\r\na=fingerprint:sha-256 F7:C1:E6:34:15:E0:9A:6D:50:7E:C4:5C:9A:BA:03:DF:92:8C:C7:BB:3F:23:09:2E:03:8D:48:27:57:69:53:42\r\na=candidate:1269803428 1 udp 1 182.23.67.166 16004 typ host generation 0\r\na=candidate:1269803428 2 udp 1 182.23.67.166 16004 typ host generation 0\r\na=ice-ufrag:OOJzbn9S\r\na=ice-pwd:T3uhGBNuVlFd6ocmaDimHv1j\r\na=ssrc-group:FID 1640835008 885718797\r\na=ssrc:1640835008 cname:GcF4J5kl8-XioKeO\r\na=ssrc:1640835008 msid:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3 fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK\r\na=ssrc:1640835008 mslabel:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3\r\na=ssrc:1640835008 label:fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK\r\na=ssrc:885718797 cname:GcF4J5kl8-XioKeO\r\na=ssrc:885718797 msid:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3 fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK\r\na=ssrc:885718797 mslabel:VnG2SHRi2lqm5leUgameGsJBdF-oUH3WXsS3\r\na=ssrc:885718797 label:fRDijLEje8rBQHHGDeLl3FqslIrJsgsG-ejK\r\na=mid:video\r\na=setup:active\r\n"}]

csdk-common.js:782 Sending: {"type":"OK","callId":"BG-203b6896-83c5-4394-94ba-80963aa18671"}

local-media-generator-chrome.js:213 Stopping Media Streams

local-media-generator-chrome.js:216 TypeError: phone.stopMediaStream is not a function

    at StreamGenerator.stop (local-media-generator-chrome.js:214)

    at LocalMediaGeneratorChrome.stopCapture (local-media-generator-chrome.js:328)

    at PCPhone.setPreferredVideoCaptureResolution (peer-connection.js:243)

    at Array.<anonymous> (peer-connection.js:223)

    at removeCall (peer-connection.js:32)

    at endCall (peer-connection.js:1207)

    at PCCall.end (peer-connection.js:2496)

    at HTMLButtonElement.<anonymous> ((index):808)

    at HTMLButtonElement.dispatch (jquery-2.1.4.min.js:3)

    at HTMLButtonElement.r.handle (jquery-2.1.4.min.js:3)

csdk-common.js:782 Sending: {"type":"END","callId":"BG-203b6896-83c5-4394-94ba-80963aa18671"}

call.js:483 onRemoteVideoRemoved(): The stream with Id [main] has been removed

phone.js:128 Local media acquired by phone object: [[object MediaStream]]


Regards,

Edwin R

Hi Edwin,

I don't understand why you code is throwing an exception when you are Stopping Media Streams. Have toy modified the SDK code in any way?

It is expected behaviour for the local preview and camera to still be active after the call has finished as there is no UC.stop method in the SDK. The mechanism to destroy the UC is to navigate to another page as done in the sample app.... https://REAS:8443/csdk-sample/Logout

Rob

Hi Rob,

I never modified the SDK. Correct me if I'm wrong, so to fully stop the call and destroy the UC, the only way to do it is close the page where the uc first initialized or move to another page?

For the sample app, is it only available in maven? Or can you give me a download link for it?

Hi Edwin,

The call is stopped by calling  call.end(). However you are right that to release the camera you need to close the page where the UC first initialized or move to another page. Below are some instructions on getting the sample app working....

REM is shipped with an Advanced CSDK WebRTC sample app which allows users to make and receive WebRTC calls in a compatible browser.


By default the Advanced  CSDK sample app is not deployed. In order to use it, following two files need to be deployed to REAS:

csdk-sample.war

csdksample-db.xml

The above files can be deployed to REAS either via CLI or the REAS Admin GUI.  They must be assigned to the main-server-group.

Following are the steps to configure REM’s CSDK Sample App.

STEP-1

SSH to the REM Server

The war file and the xml file which are needed to be deployed on REAS are present at the location:

/opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source

csdk-sample.war

csdksample-db-template.xml

STEP-2

The xml file is a template and needs to be configured for use with your server. Copy the existing template xml (csdksample-db-template.xml) to csdksample-db.xml which can be edited to suit your deployment

cp /opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source/csdksample-db-template.xml /opt/cisco/<VERSION_NUMBER>/CSDK/Core_SDK/Sample_Source/csdksample-db.xml

Then make the following are the necessary changes:

At Line -8,

<webappId>CLIENTSDKSAMPLE-A8C1D</webappId>

WebappID needs to be added to Web Plugin Framework of REM server.

Navigate to https://<REM_SERVER>:8443/web_plugin_framework/webcontroller/admin/

Copy  the webappId mentioned above and add it under Web Application IDs of the above page.

NOTE: you can add a WebAppID of any name but the length of Application Key needs to be at least 16 characters. Only important point to remember is ID given in the xml should be present at the WPF’s WebappID’s.

STEP-3:

Replace example.com with the cluster address of your REM server.

After making these changes save the file and it's ready to deploy to REAS.

GUI : To deploy the files to REAS using the Admin GUI, follow the below steps:

Login to https://<REM_SERVER>:9990

Navigate to Runtime -> Manage Deployments

Add csdk-sample.war and the configured csdksample-db.xml

Assign them to main-server-group

Restart REAS: service reas restart

CLI : To deploy these files using CLI, follow the below steps:

SSH to the REM Server

Navigate to /opt/cisco/<REM_VERSION>/REAS/bin

Run the script jboss-cli.sh

connect using your server IP/FQDN and enter the credential of REAS AS when prompted.

connect <REM_SERVER_ADDRESS>:9999

deploy /opt/cisco/<REM_VERSION>/CSDK/Core_SDK/Sample_Source/csdksample-db.xml --server-groups=main-server-group

deploy /opt/cisco/<REM_VERSION>/CSDK/Core_SDK/Sample_Source/csdk-sample.war --server-groups=main-server-group

exit

Restart REAS: service reas restart

Using the CSDK sample webapp:

Navigate to:  https://<REM_SERVER>:8443/csdk-sample

As per the users defined in the xml file you can use two default user configured as:

USER1

Username:     voicevideo

Password :     123

Extension:      1001

USER2

Username:       all

Password:       123

Extension:      1002

After login with both users you can make call to each other by dialing their extensions.

From user: voicevideo dial 1002 and answer the call from user all.

If you are making a call from the sample app to Jabber, ensure that the Outbound SIP URI is set to the CUCM in the Web Plugin Framework and that you call from the app with the destination as sip:<Jabber extension>@<CUCM ip>