### Initialize Voice9 SDK and Handle Events

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Initializes the Voice9 SDK instance and sets up event listeners for 'message' and 'logout' events. The 'message' listener logs incoming data to a UI element, while the 'logout' listener logs a simple message to the console and UI.

```JavaScript
const voice9 = new Voice9();
voice9.addEventListener('message', (data) => {
  let msg = JSON.stringify(data);
  if (data.type == "pong") {
    return;
  }
  messageBody.innerHTML += `<br>${msg}</br>`;
})
voice9.addEventListener('logout', (data) => {
  console.log('logout');
  messageBody.innerHTML += `<br>logout</br>`;
})
```

--------------------------------

### Basic Call Management (Make, Accept, Close)

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Implements core call handling actions. Agents can initiate an outbound call to a specified number, accept an incoming call, and terminate an ongoing call.

```JavaScript
makeCallBtn.addEventListener('click', () => {
  voice9.makeCall(phoneNum.value)
})
acceptCallBtn.addEventListener('click', () => {
  voice9.acceptCall()
})
closeCallBtn.addEventListener('click', () => {
  voice9.closeCall()
})
```

--------------------------------

### Agent Login with Voice9 SDK

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Handles the agent login process by capturing credentials from input fields, hashing the password using SHA256, and sending the data via an AJAX POST request to the '/fs-api/index/login' endpoint. Upon successful login, the SDK is initialized with the received data.

```JavaScript
connectBtn.addEventListener('click', () => {
  try {
    let data = {
      agentKey: $('#agentKey').val(),
      passwd: CryptoJS.SHA256($('#passwd').val()).toString(),
      loginType: $('#loginType').val(),
      workType: $('#workType').val()
    };
    $.ajax({
      type: "POST",
      url: "/fs-api/index/login",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify(data),
      success: function (res) {
        if (res.code != 0) {
          alert(res.message);
          res;
        }
        //let loginInfo = JSON.stringify(res.data);
        voice9.init(res.data);
      }
    });
  } catch (e) {
    alert('登录信息格式错误,请检查是否是标准格式的json')
  }
})
```

--------------------------------

### Basic CSS Styling for WebRTC Elements

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Provides fundamental CSS rules for WebRTC-related UI elements, including flexbox utilities, width/height adjustments, and basic fieldset/label styling to ensure a consistent layout.

```CSS
webrtc * { margin: 0; padding: 0; } .d-flex { display: flex; } .align-center { align-items: center; } .w-50 { width: 50%; margin: 5px; } .w-100 { width: 100%; } .h-95 { height: 95vh; } fieldset { padding: 20px } label { width: 130px; margin-right: 10px; } button { padding: 5px 15px; } #messageBody { height: 100%; overflow: auto; } fieldset { margin-bottom: 15px; } .divBox { margin-bottom: 20px; }
```

--------------------------------

### Manage Agent Status (Logout, Busy, Ready)

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Provides functionality for agents to manage their online status. This includes logging out from the system, setting their status to 'busy' to indicate unavailability, and setting their status to 'ready' to become available for calls.

```JavaScript
logoutBtn.addEventListener('click', () => {
  voice9.logout()
})
busyBtn.addEventListener('click', () => {
  voice9.setBusy()
})
readyBtn.addEventListener('click', () => {
  voice9.setReady()
})
```

--------------------------------

### In-Call Audio Control (Mute, Hold)

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Provides controls for managing audio during an active call. Agents can mute their microphone, unmute it, place the current call on hold, and resume a held call.

```JavaScript
mutePhoneBtn.addEventListener('click', () => {
  voice9.mutePhone()
})
cancelMuteBtn.addEventListener('click', () => {
  voice9.cancelMute()
})
holdTalkingBtn.addEventListener('click', () => {
  voice9.holdTalking()
})
cancelHoldBtn.addEventListener('click', () => {
  voice9.cancelHold()
})
```

--------------------------------

### Advanced Call Operations (Transfer, Consult)

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Enables advanced call functionalities such as transferring a call to another agent or number, initiating a consultation with another party, canceling an ongoing consultation, transferring a call during a consultation, and adding a third party to a consultation.

```JavaScript
phoneTransferBtn.addEventListener('click', () => {
  voice9.phoneTransfer(phoneTransfertNum.value)
})
phoneConsultBtn.addEventListener('click', () => {
  voice9.phoneConsult(phoneConsultNum.value)
})
phoneConsultCancelBtn.addEventListener('click', () => {
  voice9.phoneConsultCancel()
})
phoneConsultTransferBtn.addEventListener('click', () => {
  voice9.phoneConsultTransfer(phoneConsultTransfer.value)
})
phoneConsultPartyBtn.addEventListener('click', () => {
  voice9.phoneConsultParty()
})
```

--------------------------------

### Clear Message Log

Source: https://github.com/caoliang1918/contact-center/blob/main/fs-api/src/main/resources/static/demo.html

Implements a utility function to clear all messages displayed in the `messageBody` UI element, effectively clearing the log or message history.

```JavaScript
messageClear.addEventListener('click', () => {
  while (messageBody.childNodes.length > 0) {
    messageBody.removeChild(messageBody.firstChild);
  }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.