GCS SDK for H5

调用时机：实例化SDK后调用。用于初始化配置，返回初始化结果。

gcssdk.init({
  accessKey,           // 应用公钥
  token,                  // 用户token
  userId,                 // 用户ID
  sessionId,             // 唯一会话标识
}).then(ready => {
  console.log(ready); // true
}).catch(e => {
  console.log(ready); // false
});

调用时机：init异步结果返回true时调用。

gcssdk.prepare({
  appId,                                  // 应用ID
  appStartParam,                    // 应用启动命令，与用户具体业务相关
  container,                           // Dom容器
});

调用时机：在收到201010事件后调用。

gcssdk.start();

调用时机：用户需要手动关闭应用时调用。

gcssdk.stop();

gcssdk.setSize(width, height);

gcssdk.setVolume(volume);

调用时机：实例化SDK后调用。监听SDK所有事件，根据消息下行处理相关逻辑。

gcssdk.on('GCSEvent', res => {
  const { type, code, message } = res;
  console.log(`onGCSEvent: ${type} ${code} ${message}`);
  
  switch(code) {
    case '401010':              // 应用回传数据
      console.log(message);
      break;
    case '401020':              // 串流实时数据
      const {
        width,                     // 分辨率宽度
        height,                    // 分辨率高度
        fps,                        // 帧率
        bandwidth,              // 带宽（bps）
        rtt                          // 网络时延（ms）
      } = message;
      break;
    case '402010':             // 终端节点数据
      const {
        isp,                       // 供应商：TELECOM（中国电信）、UNICOM（中国联通）、MOBILE（中国移动）、BGP
        district,                 // 大区：华东、华北、华南、华中、西南
      } = message;
      break;
    default:
      break;
  }
});

// 鼠标移动
video.onmousemove = function(event) {
  const e = event || window.event || arguments.callee.caller.arguments[0];
  e.preventDefault();
  
  // const left = video.getBoundingClientRect().left;
  // const top = video.getBoundingClientRect().top;
  // const width = video.offsetWidth;
  // const height = video.offsetHeight;
   const x = e.clientX;
   const y = e.clientY;

  gcssdk.setMouse({
    // left, top,
    // width, height,
    x, y,
    isPressed: false,
    button: 10
  });
};

// 键盘按下
document.onkeydown = function(event) {
  const e = event || window.event || arguments.callee.caller.arguments[0];
  e.preventDefault();

  gcssdk.setKeyBoard({
    keyCode: e.keyCode,
    isPressed: true
  });
};

开启全屏并兼容iOS屏幕自动旋转。

// 开启全屏并兼容iOS屏幕自动旋转（建议按需使用contrainterId）
gcssdk.setFullscreen({
  type: 2,									
  contrainterId: 'content'
});   

// 取消全屏  
gcssdk.setFullscreen({
  type: 0
});

直传数据给应用，根据业务需要使用。

const _U8Afrom = Uint8Array.from.bind(Uint8Array);
function stringToUint8Array(str) {
  return _U8Afrom(str, c => c.charCodeAt(0));
}
const uintData = stringToUint8Array(JSON.stringify(object));
gcssdk.sendDataToService(uintData); // 向应用传递数据
gcssdk.on('GCSEvent', res => {
  const { type, code, message } = res;
  switch(code) {
    case '401010':  // 接收应用的回调数据：此处返回的message为Uint8Array类型
      // 为避免uint8ArrayToString的精度损失，该方法仅适用于0~128字节字符串
      const callbackMsg = new TextDecoder().decode(message); 
      console.log(callbackMsg);
      break;
    default:
      break;
  }
})

建议监听到901080 自动播放失败后，触发用户交互的同时进行调用。

如iOS低电量模式下自动播放失败，可使用此功能解决。

document.getElementById("confirmPlay").onclick = function() {
  gcssdk.replay();
};

通过不同事件发送操控指令输入sendRawEvent(eventConfig)。eventConfig对象结构如下表所示。

当手柄事件类型为apppadbutton时，bitMask的值如下表所示。

当您同时按键组合时，传递多个bitMask值之和。

例如，同时按A键和B键：bitMask=4096+8192=12288。

eventConfig：sendRawEvent({ type: "apppadbutton", bitMask: 12288, isPressed: true })。

检测SDK是否可用。

gcssdk.isSupport().then(res => {
  // 可用
}).catch(err => {
  console.log('GCSSDK not support: ', err) 
  // { type: '10', code: '109010', message: '当前浏览器不支持' }
  // { type: '10', code: '109011', message: '浏览器版本过低' }
  // { type: '10', code: '109012', message: '不支持webrtc' }
  // { type: '10', code: '109013', message: '不支持H264' }
})

设置画面基于左上角的旋转角度。

const { success, code } = gcssdk.setOrientation({
  container: 'coordinate',
  deg: 90
});