MCS8 JavaScript Client SDK开发指南

快速入手

在开始之前，推荐先熟悉 React/Vue 和 ES5/ES6，并正确安装和配置了 Node.js v8 或以上。指南假设你已了解关于 HTML、CSS 和 JavaScript 等知识，并且已经掌握了 React/Vue基本开发方式及Web开发基本技能。

特别提示

MCS8 JavaScript Client SDK 仅在安全上下文中(HTTPS)，及所支持的浏览器中使用，并确保已正确配置麦克风、摄像头。

Google Chrome
Edge
Firefox
请确保以上所支持的浏览器是较新版本

在HTML5使用

<!-- 引用 MCS8 JavaScript Client SDK -->
<script src="js/mcs8Client.js"></script>
<script>
  //参数配置
  var options = {};

  //创建实例
  var mClient = new mcs8Client();
  //连接网关
  mClient.connect(options);

  //注册回调    
  mClient.on('OnManage', function (request) {
    //TODO：
  })
</script>

在ReactJS使用

//使用 import 进行引用
import { mcs8Client } from '@/lib/mcs8Client';

componentDidMount(){
    var options = {
        ...
    };

    //创建实例
    this.mClient = new mcs8Client();
    //连接网关
    this.mClient.connect(options);

    //注册回调    
    this.mClient.on('OnManage', function (request) {
        //TODO：
    })
}

在VueJS使用

//使用 import 进行引用
import { mcs8Client } from '@/lib/mcs8Client';

mounted(){
    var options = {
        ...
    };

    //创建实例
    this.mClient = new mcs8Client();
    //连接网关
    this.mClient.connect(options);

    //注册回调    
    this.mClient.on('OnManage', function (request) {
        //TODO：
    })
}

连接网关

特别提示：MCS8 JavaScript Client SDK 仅在安全上下文中(HTTPS)使用，请确保你的域名证书是有效的！

如果你无有效的域名证书，或域名证书错误、过期、无效，请在浏览器打开你的调度台网址，

在打开的隐私设置页面依次点击[ 高级 ][ 继续前往192.1680.114（不安全） ]（如图所示），设置完成后，请重新连接网关。

示例代码（完整示例代码见sdkDemo.js）

                  //调度台地址：https://106.54.78.47:7715

                  let url = new URL(gatewayUrl);
          
                  let httpProxy = null;
                  if (url.port == "") {
                      httpProxy = `:443/gateway`
                  } else {
                      httpProxy = `:${url.port}/gateway`
                  }
          
                  LOG("connect url", url);
          
                  let options = {
                      //用户账号配置：支持调度台账号、企业管理员账号，一般使用调度台账号连接网关
                      uid: username,                           //调度台用户名
                      pwd: password,                           //调度台密码                   
          
                      localVideo: localVideo,
                      localAudio: localAudio,
          
                      //网关连接参数配置，一般情况下使用默认配置即可，非必要不修改
                      host: url.hostname,
                      port: url.port,
                      httpProxy: httpProxy,
                      ssl: url.protocol.startsWith("https"),
                      privateNet: false,
                      encryType: 'v2',
                      encryTime: Math.floor(Date.now() / 1000),
                  }
          
                  //创建实例
                  this.mClient = new mcs8Client();
          
                  //连接网关
                  this.mClient.connect(options);
          
                  LOG("connect", options);
          
                  //注册回调，见onReceived
                  this.mClient.on('OnManage', this.onReceived.bind(this));

获取在线设备列表

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

sdkclient.mClient.requestMsg2GatewayServer("getDevOnlineList", {}).then(resp => {
  LOG('getDevOnlineList', resp);

  /*获取在线设备列表，Status：状态，0离线，1在线（仅返回在线设备） ：
  resp.Content = [
      {
          "DevId": "pc1",
          "Status": 1
      },
      {
          "DevId": "test1",
          "Status": 1
      }
  ]*/

  //TODO：
})

获取全部设备列表

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

2.10.1 获取设备树

获取当前用户的设备列表，不支持跨企业获取（包括递归）；

该接口以简单树（数据结构，[{id,pid},{id,pid}]）聚合了企业/组/设备/通道等基本信息，以方便应用端展示。

特别说明，返回的设备状态（status）为设备缓存状态，可能存在于实际状态不一致的情况，如需实时设备状态，请通过MCS8 SDK获取。

********************************
请求地址：https://sys.mcs8.net:7715/api/v1/ext/DevTree?token=xxxxxxxxxxxxxx

********************************
获取设备树详细内容见《MCS8平台API文档 数据管理部分.doc》：2.10.1 获取设备树

[
    {
        "id": 20000000,
        "pid": 0,
        "text": "默认企业",
        "type": 1, //type：1企业，2固定组，3设备
        "data": {} //内容见《MCS8平台API文档数据管理部分.doc》：B.1 企业实体模型
    },
    {
        "id": 30000000,
        "pid": 0,
        "text": "默认组",
        "type": 2,
        "data": {}//内容见《MCS8平台API文档数据管理部分.doc》：B.2 组（固定组）实体模型
    },
    {
        "id": 40000000,
        "pid": 30000000,
        "text": "pc1",
        "type": 3,
        "data": {},//内容见《MCS8平台API文档数据管理部分.doc》：B.3 设备实体模型
        "extras": null
    }
]

实时视频/声音监听具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

/**
* 打开实时视频
* @param {*} devId 设备Id
* @param {*} channelId 通道号（非多通道设备为null）
*/
async function FUNC_openVideo(devId, channelId) {
    var showObj = document.getElementById(`remoteVideo${devId}`);
    var resp = await sdkclient.mClient.openVideo(devId, showObj, channelId);

    console.log("[%s]%s %o", __KEY__, 'openVideo', resp);
}

/**
* 关闭实时视频
* @param {*} devId 设备Id
* @param {*} channelId 通道号（非多通道设备为null）
*/
async function FUNC_closeVideo(devId, channelId) {
    var resp = await sdkclient.mClient.closeVideo(devId, channelId);

    console.log("[%s]%s %o", __KEY__, 'closeVideo', resp);
}

/**
* 打开声音监听
* @param {*} devId 设备Id
* @param {*} channelId 通道号（非多通道设备为null）
*/
async function FUNC_openAudio(devId, channelId) {
    var showObj = document.getElementById(`remoteAudio${devId}`);
    var resp = await sdkclient.mClient.openAudio(devId, showObj, channelId);

    console.log("[%s]%s %o", __KEY__, 'openAudio', resp);
}

/**
* 关闭声音监听
* @param {*} devId 设备Id
* @param {*} channelId 通道号（非多通道设备为null）
*/
async function FUNC_closeAudio(devId, channelId) {
    var resp = await sdkclient.mClient.closeAudio(devId, channelId);

    console.log("[%s]%s %o", __KEY__, 'closeAudio', resp);
}

双向视频通话具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

/**
* 创建双向视频通话组
* @param {*} devId 
*/
async function FUNC_CreateP2pMediaGroup(devId) {
    var groupId = __FUNC_CreateRandomGroupId(devId);
    var groupType = 5; //组类型，4：集群对讲组，5：视频组，6：语音组
    var devModel = { kind: 'video', devId, showObj: document.getElementById(`remoteVideo${devId}`) }
    var resp = await sdkclient.mClient.CreateP2pMediaGroup(groupId, groupType, devModel);

    console.log("[%s]%s %o", __KEY__, 'CreateP2pMediaGroup', resp);

    //监听进入组回调，关联音频元素，见onReceived说明
    sdkclient.addObserver('CreateP2pMediaGroup', msg => {
        if (msg.method == 'newPeer') {
            sdkclient.mClient.addShowObject({
                groupId: __randomGroupIdMap[devId],
                kind: 'audio',
                devId: msg.data.id,
                showObj: document.getElementById(`remoteAudio${msg.data.id}`)
            });
        }
    })
}

双向语音通话具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

/**
* 创建双向语音通话组
* @param {*} devId 
*/
async function FUNC_CreateP2pMediaGroup6(devId) {
    var groupId = __FUNC_CreateRandomGroupId(devId);
    var groupType = 6; //组类型，4：集群对讲组，5：视频组，6：语音组
    var devModel = { kind: 'audio', devId, showObj: document.getElementById(`remoteAudio${devId}`) }
    var resp = await sdkclient.mClient.CreateP2pMediaGroup(groupId, groupType, devModel);

    console.log("[%s]%s %o", __KEY__, 'CreateP2pMediaGroup', resp);
}

接听设备视频呼叫具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

                  //被动呼叫，包括视频呼叫、语音呼叫，一般流程为：
        //1、在回调里监听 [JoinRoomAndProduct] 命令字，此命令字表示来自设备端的呼叫；
        //2、加入群组：add2MediaGroup
        //3、加入群组后，然后监听[JoinRoom]，并关联HTML音频、视频元素

        //监听回调消息类型，见onReceived->method：JoinRoomAndProduct说明
        sdkclient.addObserver('add2MediaGroup', msg => {
            if (msg.method == 'JoinRoomAndProduct') {
                var data = { list: [msg.data] };
                var html = template(`tpl_${key}`, data);
                document.getElementById(`tpl_${key}_content`).innerHTML = html;
            } else if (msg.method === 'joinRoom') {
                //关联音频和视频HTML元素
                for (const peer of msg.data.peers) {
                    sdkclient.mClient.addShowObject({
                        groupId: msg.data.groupId,
                        kind: 'audio',
                        devId: peer.id,
                        showObj: document.getElementById(`remoteAudio${peer.id}`)
                    });

                    if (msg.data.groupType == 5) { //视频组
                        sdkclient.mClient.addShowObject({
                            groupId: msg.data.groupId,
                            kind: 'video',
                            devId: peer.id,
                            showObj: document.getElementById(`remoteVideo${peer.id}`)
                        });
                    }
                }
            }
        })

接听设备语音呼叫具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

                  //被动呼叫，包括视频呼叫、语音呼叫，一般流程为：
        //1、在回调里监听 [JoinRoomAndProduct] 命令字，此命令字表示来自设备端的呼叫；
        //2、加入群组：add2MediaGroup
        //3、加入群组后，然后监听[JoinRoom]，并关联HTML音频、视频元素

        //监听回调消息类型，见onReceived->method：JoinRoomAndProduct说明
        sdkclient.addObserver('add2MediaGroup', msg => {
            if (msg.method == 'JoinRoomAndProduct') {
                var data = { list: [msg.data] };
                var html = template(`tpl_${key}`, data);
                document.getElementById(`tpl_${key}_content`).innerHTML = html;
            } else if (msg.method === 'joinRoom') {
                //关联音频和视频HTML元素
                for (const peer of msg.data.peers) {
                    sdkclient.mClient.addShowObject({
                        groupId: msg.data.groupId,
                        kind: 'audio',
                        devId: peer.id,
                        showObj: document.getElementById(`remoteAudio${peer.id}`)
                    });

                    if (msg.data.groupType == 5) { //视频组
                        sdkclient.mClient.addShowObject({
                            groupId: msg.data.groupId,
                            kind: 'video',
                            devId: peer.id,
                            showObj: document.getElementById(`remoteVideo${peer.id}`)
                        });
                    }
                }
            }
        })

集群对讲（多人语音通话组）具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

/**
* 创建多人语音通话组（集群对讲）
* @param {*} groupKey 
* @returns 
*/
async function FUNC_CreateTempMediaGroup(groupKey) {

    var devList = [];
    $("#CreateTempMediaGroup").find("input:checkbox:checked").each((i, item) => {
        devList.push(
            {
                kind: 'audio',
                devId: item.value,
                showObj: document.getElementById(`remoteAudio${item.value}`)
            }
        );
    });

    if (devList.length == 0) {
        alert("未选择设备");
        return;
    }

    var groupId = __FUNC_CreateRandomGroupId(groupKey);
    var groupType = 4; //组类型，4：集群对讲组，5：视频组，6：语音组
    var resp = await sdkclient.mClient.CreateTempMediaGroup(groupId, groupType, devList);

    console.log("[%s]%s %o", __KEY__, 'CreateTempMediaGroup', resp);
}

/**
* 申请发言权（排他性）
* @param {*} groupKey 
*/
async function FUNC_applyTalk(groupKey) {
    var resp = await sdkclient.mClient.applyTalk(__randomGroupIdMap[groupKey]);

    console.log("[%s]%s %o", __KEY__, 'applyTalk', resp);

    if (resp && resp.status === 1) {
        alert("请发言！说点什么呢...");
    } else {
        alert("~打断别人说话是不礼貌的行为~");
    }
}

/**
* 释放发言权
* @param {*} groupKey 
*/
async function FUNC_freeTalker(groupKey) {
    await sdkclient.mClient.freeTalker(__randomGroupIdMap[groupKey]);
}

/**
* 关闭通话组
*/
async function FUNC_closeGroup(devId) {

    sdkclient.removeObserver("CreateP2pMediaGroup");

    var resp = await sdkclient.mClient.closeGroup(__randomGroupIdMap[devId]);

    console.log("[%s]%s %o", __KEY__, 'closeGroup', resp);
}

向设备喊话具有视音频功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

/**
* 开始喊话
* @param {*} devId 
* @param {*} channelId 
*/
async function FUNC_startTalk(devId, channelId) {
    var resp = await sdkclient.mClient.startTalk(devId, channelId);

    console.log("[%s]%s %o", __KEY__, 'startTalk', resp);
}

/**
* 停止喊话
* @param {*} devId 
* @param {*} channelId 
*/
async function FUNC_stopTalk(devId, channelId) {
    var resp = await sdkclient.mClient.stopTalk();

    console.log("[%s]%s %o", __KEY__, 'stopTalk', resp);
}

获取实时位置具有定位功能设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

sdkclient.mClient.requestMsg2GatewayServer('getGps', { devId }).then(resp => {
  LOG('getGps', resp);

  //消息类型，见onReceived->method：gpsUpload说明

  //TODO：
})

获取设备参数 DSJ-V1、DSJ-V2设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）


sdkclient.mClient.requestMsg2GatewayServer('getDeviceInfo', { devId }).then(resp => {
    LOG('getDeviceInfo', resp);

    //"network": 1, //网络类型：1WIFI，2移动网络   
    //"recording": 2, //录像状态：1正在录像，2未录像
    //"totalSize": 50319328, //存储容量（字节）
    //"useSize": 4209568, //已用容量
    //"battery": 71, //电量（%）
    //"lat": 22.57688333333333, //维度，WGS84(大地坐标)
    //"lng": 113.91682, //经度，WGS84(大地坐标)
    //"hardware": "N6F26Q test-keys", //固件版本
    //"version": "1.5.44", //APP版本
    //"peopleNo": "000000", //人员编号
    //"workNo": "8600021935078769" //工单号

    //TODO：
})

GPS消息上报

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

//监听回调消息类型，见onReceived->method：gpsUpload说明
sdkclient.addObserver('gpsUpload', msg => {
    if (msg.method == 'gpsUpload') {
        //TODO：
    }
})

设备上下线消息上报

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

//监听回调消息类型，见onReceived->method：DeviceStatus说明
sdkclient.addObserver('DeviceStatus', msg => {
    if (msg.method == 'DeviceStatus') {
        //TODO：
    }
})

设备SOS报警消息上报 DSJ-V1、DSJ-V2设备支持

连接网关，即可演示该功能！

示例代码（完整示例代码见sdkDemo.js）

//监听回调消息类型，见onReceived->method：AlarmUpload说明
sdkclient.addObserver('AlarmUpload', msg => {
    if (msg.method == 'AlarmUpload') {
        //TODO：
    }
})

快速入手

特别提示

在HTML5使用

在ReactJS使用

在VueJS使用

连接网关

示例代码（完整示例代码见sdkDemo.js）

获取在线设备列表

示例代码（完整示例代码见sdkDemo.js）

获取全部设备列表

示例代码（完整示例代码见sdkDemo.js）

实时视频/声音监听 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

双向视频通话 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

双向语音通话 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

接听设备视频呼叫 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

接听设备语音呼叫 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

集群对讲（多人语音通话组） 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

向设备喊话 具有视音频功能设备支持

示例代码（完整示例代码见sdkDemo.js）

获取实时位置 具有定位功能设备支持

示例代码（完整示例代码见sdkDemo.js）

获取设备参数 DSJ-V1、DSJ-V2设备支持

示例代码（完整示例代码见sdkDemo.js）

GPS消息上报

示例代码（完整示例代码见sdkDemo.js）

设备上下线消息上报

示例代码（完整示例代码见sdkDemo.js）

设备SOS报警消息上报 DSJ-V1、DSJ-V2设备支持

示例代码（完整示例代码见sdkDemo.js）

下发录像指令 DSJ-V1、DSJ-V2设备支持

示例代码（完整示例代码见sdkDemo.js）

下发工单信息 DSJ-V1、DSJ-V2设备支持

示例代码（完整示例代码见sdkDemo.js）

下发文本消息 DSJ-V1、DSJ-V2设备支持

示例代码（完整示例代码见sdkDemo.js）

日志

实时视频/声音监听具有视音频功能设备支持

双向视频通话具有视音频功能设备支持

双向语音通话具有视音频功能设备支持

接听设备视频呼叫具有视音频功能设备支持

接听设备语音呼叫具有视音频功能设备支持

集群对讲（多人语音通话组）具有视音频功能设备支持

向设备喊话具有视音频功能设备支持

获取实时位置具有定位功能设备支持