Code Example

Procedure

1. Request the send interface.

   this.$axios({
       method: 'post',
       url: API Fabric domain name/apiaccess/ccmessaging/send,
       headers: {
          'Content-Type': 'application/json',
          'x-app-key': c.appKey,
          'Authorization': fabric.token,
          'ccmessaging-token': ccmessaging.token
       },
       data: {
          'channel': 'WEB',
          'content': 'start', 
         'controlType': 'CONNECT',
          'from': userId,
          'mediaType': 'TEXT',
          'sourceType': 'CUSTOMER', 
         'to': channelId
       }
   })

   If the http status value returned by the send interface is 200 and the resultCode value in the returned message body is 0, the request is successful.

   In this case, the agent can view the connected subscriber on the online chat workbench.

2. Request the checkClickToCallSupport interface.

   Before sending the request, ensure that:

   • The send interface has received a response indicating that the access is successful.
   • The browser supports WebRTC. (For details about how to check whether the browser supports WebRTC, see the WebRTC official documentation.)

   Check example:

   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
         return Promise.reject(new Error('WebRTC is not supported'))
   }
   let cam = false
   let mic = false
   let spkr = false
   return navigator.mediaDevices.enumerateDevices().then((deviceInfos) => {
      deviceInfos.forEach(function (d) {
          switch (d.kind) {
               case 'videoinput': 
                cam = true 
                break 
              case 'audioinput':
                 mic = true
                 break
               case 'audiooutput':
                 spkr = true
                 break
             }
     })
     // Chrome supports 'audiooutput', Firefox and Safari do not support.
     if (navigator.webkitGetUserMedia === undefined) {
       spkr = true
     }
     if (!spkr) {
       return Promise.reject(new Error('Missing a speaker! Please connect one and reload'))
     }
     if (!mic) {
       return Promise.reject(new Error('Missing a microphone! Please connect one and reload'))
     }
     return Promise.resolve(cam)
   })
   1. After the preceding checks are successful, invoke the checkClickToCallSupport interface.

      this.$axios({
          method: 'get',
         url: API Fabric domain name/apiaccess/ccmessaging/v1/checkClickToCallSupport?channel=WEB,
          headers: {
             'Content-Type': 'application/json',
             'x-app-key': appKey,
             'Authorization': fabric.token,
             'ccmessaging-token': ccmessaging.token
          }
      })
   2. The returned message body is as follows:

      {    "resultCode":"0",
          "resultDesc": "",
          "webRTCSupported":true,
          "clickToCallSupported":true
      }

      If the value of httpStatus is 200 and the value of resultCode is 0, the request is successful.

      webRTCSupported indicates whether the tenant space supports WebRTC. clickToCallSupported indicates whether the channel supports the click-to-dial function.

      If the values of the preceding two variables are true, you can go to the next step to create a click-to-dial call.

3. Request the createClickToCall interface.
   NOTICE:

   Ensure that the values of webRTCSupported and clickToCallSupported returned by the checkClickToCallSupport interface are true.

   In request parameters, the values of mediaAbility are described as follows: 0 indicates a voice call, and 1 indicates a video call.

   this.$axios({
       method: 'post',
       url: API Fabric domain name/apiaccess/ccmessaging/v1/createClickToCall,
       headers: {
          'Content-Type': 'application/json',
          'x-app-key': appKey,
          'Authorization': fabric.token,
          'ccmessaging-token': ccmessaging.token
       },
       data: {
          'channel': 'WEB',
          'mediaAbility': '0'
       }
   })

   The returned message body is as follows:

   {    "resultCode":"0",
       "resultDesc": ""
   }

   If the value of httpStatus is 200 and the value of resultCode is 0, the request is successful.

4. Request the getClickToCallEvents interface in the case of long polling.

   After the createClickToCall interface is successfully invoked, the getClickToCallEvents interface is invoked.

   NOTE:

   1. Set the timeout interval of the request to a longer value. Requests are processed slowly, usually for more than 10 seconds. For example, the value in the preceding request is set to 60 seconds.
   2. The request is a long polling request. After the request is successful, the request is invoked based on the returned event status.

   this.$axios({
       method: 'get',
       url: API Fabric domain name/apiaccess/ccmessaging/v1/getClickToCallEvents?channel=WEB,
       timeout: 60000,
       headers: {
          'Content-Type': 'application/json',
          'x-app-key': appKey,
          'Authorization': fabric.token,
          'ccmessaging-token': ccmessaging.token
       }
   })

   The command output is as follows:

   If the value of resultCode is not 0, the request fails. In this case, set a retry mechanism. For example, if the client fails to send the request for three consecutive times, the client stops sending the request again.

   When the value of resultCode is 0, the values of eventId are described as follows:

   168101: call setup. 168102: call queuing. 168106: call forwarding. During polling, there may be no event, and eventId is not returned. In this case, the client needs to maintain long polling.

   When a call is set up, the following mandatory WebRTC parameters can be obtained in content:

   domain indicates the WebRTC gateway domain name. gwAddresses indicates the communication address and port of the WebRTC gateway. clickToCallCaller is the calling party, and accessCode is the called party.

   • Call setup

     {    resultCode:"0",
         resultDesc:"Call connected",
         "eventId": 168101,
        "content":{
             "domain":"xxx"
             "gwAddresses":["xx1","xx2"]
             "accessCode": "179080000537636"
             "clickToCallCaller":"AnonymousCard"
         }
     }
   • Call queuing

     {    resultCode:"0"
         resultDesc:"Call in queue"
         "eventId": 168102
     }
   • Call transfer

     {
         resultCode:"0"
         resultDesc:"Call transfered"
         "eventId": 168106
     }
   • Call release

     {
         resultCode:"0"
         resultDesc:"Call disconnected"
         "eventId": 168110
        "content":{
             "causeId":  -1
             "causeDesc": "xxxx"
         }
     }
   • Call queuing timeout

     {
         resultCode:"0"
         resultDesc:"Call queue timeout"
         "eventId": 168103
        "content":{
             "causeId":  -1
             "causeDesc": "xxxx"
         }
     }
   • Call failure

     {
         resultCode:"0"
         resultDesc:"Call failed"
         "eventId": 168105
        "content":{
             "causeId":  -1
             "causeDesc": "xxxx"
         }
     }
   • No events obtained

     {
         resultCode:"0"
         resultDesc:"ClickToCall polled without any events"
     }

5. Request the dropClickToCall interface to hang up the call.

   this.$axios({
       method: 'post',
       url: API Fabric domain name/apiaccess/ccmessaging/v1/dropClickToCall,
       headers: {
          'Content-Type': 'application/json',
          'x-app-key': appKey,
          'Authorization': fabric.token,
          'ccmessaging-token': ccmessaging.token
       },
       data: {
          'channel': 'WEB'
       }
   })

   The returned message body is as follows:

   If the value of httpStatus is 200 and the value of resultCode is 0, the request is successful.

   {
       "resultCode":"0",
       "resultDesc": ""
   }