DOCSEARCHbyAlgolia
Submit Docs

ICC Interface Documentation

website·Indexed 30 days ago

https://fsyldn.github.io/iccTestPage

API documentation for the ICC communication interface, featuring capabilities for matrix monitoring, video calling, group communication (PTT), conference management, and user location/status tracking. Includes implementation examples using Vue and TypeScript for events such as CallConnect, PersonLocationChange, and PersonStatusChange.

Tokens
35.6K
Snippets
164
Records
201
Agent score
72%

What's inside ICC

  1. Overview of the Integrated Communication Middle-end Service

    The Integrated Communication Middle-end provides a pure JavaScript-based service designed for business encapsulation. It allows third-party systems to integrate low-level communication capabilities including point-to-point audio/video calls, video conferencing, telephone call handling (inbound/outbound), real-time monitoring browsing, and Instant Messaging (IM). The service is implemented as a JS-API using a Promise-based architecture, enabling developers to build communication command and dispatch platforms by calling methods and listening to events via a web frontend.

  2. Understand the OnIMMessage event data structure

    The OnIMMessage event returns a data object containing details about the sender, recipient, and the message content.

    Message Type (messageType) mapping:

    • 1: Text
    • 2: Image
    • 3: File
    • 4: Video
    • 5: Voice

    Recipient Type (receiveType) mapping:

    • 1: Individual
    • 2: Group

    Event Type (type) mapping:

    • msg: Normal message
    • 101: Send success notification
    • read: Read receipt
    // Example of the data structure received in OnIMMessage
{
  content: {
    dialogId: "Window ID",
    messageContent: "Message content",
    messageId: "Message ID",
    messageType: 1, // 1:Text, 2:Image, 3:File, 4:Video, 5:Voice
    receiveObj: "Recipient Account",
    receiveType: 1, // 1:Individual, 2:Group
    sendTime: 1648623990822,
    sendUser: "Sender Account"
  },
  fromId: "Sender Account",
  toId: "cp",
  topic: "websocket-im",
  type: "msg" // msg: normal, 101: success, read: read receipt
}

  3. Example: Implement voice call hang-up in Vue 3

    This example demonstrates how to integrate dialVoiceHangUp within a Vue 3 component, including instance checking and error handling using Element Plus for notifications.
    <script setup name="HangUp">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)

const dialVoiceHangUp = async () => {
  setLog({ name: '挂断语音呼叫' })

  // Ensure the FCC instance is initialized before calling the method
  if (!await checkInstance()) {
    setLog({
      name: '挂断语音呼叫',
      msg: '请先实例化',
      type: 'warning'
    })
    return
  }

  loading.value = true
  try {
    const result = await getInstanceFCC().dialVoiceHangUp()
    setLog({ name: '挂断语音呼叫结果', msg: result })

    if (result.status == 200) {
      ElMessage({ message: '挂断语音呼叫成功', type: 'success' })
    } else {
      ElMessage({ message: result.msg, type: 'info' })
    }
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="dialVoiceHangUp" :loading="loading">挂断语音点呼</el-button>
    </el-form-item>
  </el-form>
</template>

  4. Implement Emergency Call in a Vue 3 component

    This example demonstrates how to integrate the pttemeRgency call within a Vue 3 component using Element Plus for the UI. It includes instance validation via checkInstance() and getInstanceFCC() to ensure the SDK is initialized before attempting the call.
    <script setup name="PttemeRgency">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)
const groupRef = ref(null)
const groupForm = ref({
  groupId: ''
})
const rules = {
  groupId: [{ required: true, message: '请输入群组ID', trigger: ['blur', 'change'] }]
}

const groupBreakOff = () => {
  groupRef.value.validate(async (valid) => {
    if (valid) {
      setLog({ name: '紧急呼叫' })
      
      if (!await checkInstance()) {
        setLog({ name: '紧急呼叫', msg: '请先实例化' })
        ElMessage({ message: '请先实例化', type: 'warning' })
        return
      }

      loading.value = true
      let result = await getInstanceFCC().pttemeRgency(groupForm.value)
      setLog({ name: '紧急呼叫结果', msg: result })
      loading.value = false

      if (result.status == 200) {
        ElMessage({ message: '紧急呼叫成功', type: 'success' })
      } else {
        ElMessage({ message: result.msg, type: 'info' })
      }
    }
  })
}
</script>

<template>
<el-form :model="groupForm" ref="groupRef" :rules="rules">
  <el-row>
    <el-col :span="12">
      <el-form-item label="群组ID" prop="groupId">
        <el-input v-model="groupForm.groupId" placeholder="请输入群组ID"></el-input>
      </el-form-item>
    </el-col>
    <el-col class="col-right" :span="8">
      <el-form-item>
        <el-button type="primary" @click="groupBreakOff" v-loading="loading">紧急呼叫</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
</template>

<style scoped>
.col-right { margin-left: 20px; }
</style>

  5. Implement group querying in a Vue 3 component

    This example demonstrates how to integrate getGroupList within a Vue 3 setup script using element-plus for UI feedback. It includes a check to ensure the FCC instance is initialized via checkInstance() before attempting the query.
    <script setup name="GetGroupList">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)

const getGroupList = async () => {
  setLog({ name: '开始查询与自己相关的群组和人员' })
  
  if (!await checkInstance()) {
    setLog({ name: '查询自己相关群组', msg: '请先实例化' })
    ElMessage({ message: '请先实例化', type: 'warning' })
    return
  }

  loading.value = true
  let result = await getInstanceFCC().getGroupList()
  setLog({ name: '查询自己相关群组结果', msg: result })
  loading.value = false

  if (result.status == 200) {
    ElMessage({ message: '查询自己相关群组成功', type: 'success' })
  } else {
    ElMessage({ message: result.msg, type: 'info' })
  }
}
</script>

<template>
<el-form>
  <el-form-item>
    <el-button type="primary" @click="getGroupList" :loading="loading">查询与自己相关的群组和人员</el-button>
  </el-form-item>
</el-form>
</template>

  6. Implement user location retrieval in Vue 3

    This example demonstrates how to use getInstanceFCC().getLocation() within a Vue 3 component, including instance checking and state management for the user list.
    <script setup name="GetLocation">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'

const loading = ref(false)
const userLocationList = ref([])

const getLocation = async () => {
  if (!await checkInstance()) {
    ElMessage({ message: 'Please initialize first', type: 'warning' })
    return
  }
  
  loading.value = true
  const result = await getInstanceFCC().getLocation()
  
  if (result.data.code == 200) {
    userLocationList.value = result.data.data
  }
  
  loading.value = false
  if (result.status == 200) {
    ElMessage({ message: 'Successfully retrieved user location data', type: 'success' })
  } else {
    ElMessage({ message: result.msg, type: 'info' })
  }
}

const userSta = (value) => {
  const statusMap = { 1: 'Online', 2: 'Busy' }
  return statusMap[value] || 'Offline'
}
</script>

<template>
  <el-form>
    <div v-if="userLocationList.length > 0">
      <ul>
        <li v-for="item in userLocationList" :key="item.userId">
          <span>Account: {{ item.extSysAccount }}</span>
          <span>Status: {{ userSta(+item.natsStat) }}</span>
        </li>
      </ul>
    </div>
    <el-form-item>
      <el-button type="primary" @click="getLocation" :loading="loading">
        Get All User Location Data
      </el-button>
    </el-form-item>
  </el-form>
</template>

  7. Implement releaseRight in a Vue 3 component

    This example demonstrates how to integrate the releaseRight method into a Vue 3 component using Element Plus for the UI. It includes validation for the groupId and checks if the FCC instance is initialized using checkInstance() before calling the API.
    <script setup name="ReleaseRight">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)
const groupRef = ref(null)
const groupForm = ref({
  groupId: ''
})

const rules = {
  groupId: [{ required: true, message: 'Please enter Group ID', trigger: ['blur', 'change'] }]
}

const releaseRight = () => {
  groupRef.value.validate(async (valid) => {
    if (valid) {
      setLog({ name: 'ReleaseRight' })
      
      // Ensure instance is initialized
      if (!await checkInstance()) {
        setLog({ name: 'ReleaseRight', msg: 'Please initialize first' })
        ElMessage({ message: 'Please initialize first', type: 'warning' })
        return
      }

      loading.value = true
      try {
        let result = await getInstanceFCC().releaseRight(groupForm.value)
        setLog({ name: 'ReleaseRight Result', msg: result })
        
        if (result.status == 200) {
          ElMessage({ message: 'Release speaking rights successful', type: 'success' })
        } else {
          ElMessage({ message: result.msg, type: 'info' })
        }
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<template>
<el-form :model="groupForm" ref="groupRef" :rules="rules">
  <el-row>
    <el-col :span="12">
      <el-form-item label="Group ID" prop="groupId">
        <el-input v-model="groupForm.groupId" placeholder="Please enter Group ID"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item>
        <el-button type="primary" @click="releaseRight" :loading="loading">Release Right</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
</template>

  8. Implement group unsubscription in a Vue 3 component

    This example demonstrates how to integrate the unsubscribeGroup method within a Vue 3 component using Element Plus for the UI. It includes form validation for the groupId and a check to ensure the FCC instance is initialized via checkInstance() and getInstanceFCC().
    <script setup name="UnsubscribeGroups">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)
const groupRef = ref(null)
const groupForm = ref({
  groupId: ''
})
const rules = {
  groupId: [{ required: true, message: 'Please enter Group ID', trigger: ['blur', 'change'] }]
}

const subscribeGroups = () => {
  groupRef.value.validate(async (valid) => {
    if (valid) {
      setLog({ name: 'Unsubscribe Group' })
      
      if (!await checkInstance()) {
        setLog({ name: 'Unsubscribe Group', msg: 'Please initialize first' })
        ElMessage({ message: 'Please initialize first', type: 'warning' })
        return
      }

      loading.value = true
      let result = await getInstanceFCC().unsubscribeGroup(groupForm.value)
      
      setLog({ name: 'Unsubscribe Group Result', msg: result })
      loading.value = false

      if (result.status == 200) {
        ElMessage({ message: 'Unsubscribe successful', type: 'success' })
      } else {
        ElMessage({ message: result.msg, type: 'info' })
      }
    }
  })
}
</script>

<template>
<el-form :model="groupForm" ref="groupRef" :rules="rules">
  <el-row>
    <el-col :span="12">
      <el-form-item label="Group ID" prop="groupId">
        <el-input v-model="groupForm.groupId" placeholder="Please enter Group ID"></el-input>
      </el-form-item>
    </el-col>
    <el-col class="col-right" :span="8">
      <el-form-item>
        <el-button type="primary" @click="subscribeGroups" v-loading="loading">Unsubscribe Group</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
</template>

<style scoped>
.col-right { margin-left: 20px; }
</style>

  9. Implement conference list query in Vue 3 with Element Plus

    This example demonstrates how to build a conference inquiry form using Vue 3 reactive state, el-form for inputs, and the conferenceInquiry API. It includes date formatting for the el-date-picker and input validation to ensure only digits are entered for pagination.
    <script setup name="ConferenceInquiry">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)
const formData = reactive({
  meetingStatus: '0',
  meetingTime: '',
  page: '1',
  pagecount: '10'
})

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const handleInputPage = (value) => {
  formData.page = value.replace(/[\d]/g, "")
}

const handleInputCount = (value) => {
  formData.pagecount = value.replace(/[\d]/g, "")
}

const conferenceInquiryFn = async () => {
  if (loading.value) return
  if (!await checkInstance()) {
    ElMessage.warning('请先实例化')
    return
  }
  
  loading.value = true
  let result = await getInstanceFCC().conferenceInquiry({
    page: formData.page,
    pagecount: formData.pagecount,
    meetingStatus: formData.meetingStatus,
    startTime: formData.meetingTime ? formatDate(formData.meetingTime[0]) : '',
    endTime: formData.meetingTime ? formatDate(formData.meetingTime[1]) : ''
  })
  
  loading.value = false
  if (result.status == 200) {
    ElMessage.success('查询会议列表成功')
  } else {
    ElMessage.info(result.msg)
  }
}
</script>

<template>
<el-form :model="formData">
  <el-form-item label="当前页数">
    <el-input v-model.number="formData.page" @input="handleInputPage" />
  </el-form-item>
  <el-form-item label="显示条数">
    <el-input v-model.number="formData.pagecount" @input="handleInputCount" />
  </el-form-item>
  <el-form-item label="会议状态">
    <el-radio-group v-model="formData.meetingStatus">
      <el-radio label="">全部</el-radio>
      <el-radio label="0">未开始</el-radio>
      <el-radio label="1">正在召开</el-radio>
      <el-radio label="2">已结束</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="会议时间">
    <el-date-picker v-model="formData.meetingTime" type="datetimerange" />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="conferenceInquiryFn" :loading="loading">查询会议列表</el-button>
  </el-form-item>
</el-form>
</template>

  10. Implement PhoneCall event listener in Vue 3

    This example demonstrates how to integrate the PhoneCall event listener within a Vue 3 component using the Composition API. It includes checks to ensure the FCC instance is properly initialized before attempting to listen for events.
    <script setup name="CallEvent">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkInstance, getInstanceFCC } from '../../use-fcc'
import { setLog } from '../../use-log'

const loading = ref(false)

const listenStatusChange = async () => {
  setLog({ name: '来电事件["PhoneCall"]监听' })

  if (loading.value) {
    setLog({ name: '来电事件["PhoneCall"]监听结果', msg: '请先实例化' })
    return
  }

  // Ensure instance exists before listening
  if (!await checkInstance()) {
    setLog({
      name: '来电事件["PhoneCall"]监听',
      msg: '请先实例化',
      type: 'warning'
    })
    return
  }

  loading.value = true
  let result = await getInstanceFCC().listen('PhoneCall', (data) => {
    // Handle call data here
    console.log('Call received:', data)
  })

  setLog({ name: '来电事件["PhoneCall"]监听结果', msg: result })
  loading.value = false

  if (result.status == 200) {
    ElMessage({ message: '来电事件["PhoneCall"]监听成功', type: 'success' })
  } else {
    ElMessage({ message: result.msg, type: 'info' })
  }
}
</script>

<template>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="listenStatusChange" :loading="loading">
        来电事件监听
      </el-button>
    </el-form-item>
  </el-form>
</template>

  12. Listen for IM messages and read receipts

    To receive IM messages in real-time, you must first subscribe to the corresponding topic. Use the listen method on the FCC instance to handle IM-related events.

    There are two primary events for IM:

    1. OnIMMessage: Triggered when the current user receives an IM message from another user or a group.
    2. OnIMRead: Triggered when a message sent by the current user to another user has been read by that recipient.
    // Listen for incoming IM messages
fcc.listen('OnIMMessage', (data) => {
  console.log('New message received:', data);
});

// Listen for read receipts
fcc.listen('OnIMRead', (data) => {
  console.log('Message was read by recipient:', data);
});