GCS SDK for H5

Call this method after you instantiate the SDK. It initializes the configuration and returns the result.

gcssdk.init({
  accessKey,           // The public key of the application.
  token,                  // The user token.
  userId,                 // The user ID.
  sessionId,             // The unique session ID.
}).then(ready => {
  console.log(ready); // true
}).catch(e => {
  console.log(ready); // false
});

Call this method after the init method returns true asynchronously.

gcssdk.prepare({
  appId, // The application ID.
  appVersion, // The version number of the application.
  container, // The DOM container.
  projectId, // The project ID.
  idleTime,
}).then(res => {
  console.log('plateformSessionId: ', res.plateformSessionId);
});

Call this method after you instantiate the SDK to listen for all SDK events and process downstream messages.

gcssdk.on('GCSEvent', (res) => {
  const { type, code, message } = res;

  switch (code) {
    case '201010': // The application runtime environment is ready.
      console.log(message);
      break;
    case '902011': // The connection to the server is successful.
      console.log(message);
      break;
    case '902013': // The Tunnel Service is ready.
    case '902014': // The Tunnel Service is closed.
    default:
      break;
  }
});

Call this method after you instantiate the SDK to remove an event listener that was attached by the on method.

gcssdk.off('GCSEvent')

Call this method after you receive the 201010 event.

gcssdk.start();

Call this method when you need to manually shut down the application.

gcssdk.stop();
gcssdk.stop({ switchContainer: true }); // Shut down before switching containers.

Call this method after the SDK establishes a connection to establish a custom data tunnel and obtain the returned parameters.

function onMessage (evt) {
  console.log(`udpOnMessage: ${evt}`);
}

gcssdk.udpOpen(port, onMessage);

Call this method to send a message after the custom data tunnel is established.

gcssdk.udpSend(msg);

Call this method to close the custom data tunnel after it is established.

gcssdk.udpClose()

// Key is pressed.
document.onkeydown = function(event) {
  const e = event || window.event || arguments.callee.caller.arguments[0];
  e.preventDefault();

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

gcssdk.setSize(width, height);

// Mouse move
video.onmousemove = function(event) {
  const e = event || window.event || arguments.callee.caller.arguments[0];
  e.preventDefault();
  const x = e.clientX;
  const y = e.clientY;

  gcssdk.setMouse({
    x, y,
    isPressed: false,
    button: 10
  });
};

Call this method after you receive the 902011 event to retrieve video stream information.

/**
 * Video stream parameter stat
 * @param Mbps 
 * @param delay 
 * @param fps 
 * @param resolution 
 * @param rtt 
 */
const onMessage = (stat) => {
  console.log(stat)
}
gcssdk.onStat(onMessage);

Call this method after you receive the 201010 event to create a virtual joystick.

const params = {
  joystickImage: {
    back: 'url',
    front: 'base64'
  }
}
// Make sure that the gcs-sdk-videoBox mount target exists.
gcssdk.JoystickCreate(params);

Pass an event listener to the virtual joystick button. The listener is invoked when event 902012 is received.

const function = (e) => {
  console.log(e)
}
gcssdk.JoystickOn(type, function);

Use this method to restart stream pulling.

gcssdk.replay();

Use this method to set the full screen mode.

// Enable full screen (use containerId as needed).
gcssdk.setFullscreen({
  type: 2,
});   

// Cancel full screen.  
gcssdk.setFullscreen({
  type: 0
});

Call this method after the 902012 event to dynamically set the bit rate.

gcssdk.setBitrate(1000) // The default kbps value at startup is 3000.

Use this method to set the volume.

gcssdk.setVolume(volume);

Call this method after you receive the 902011 event to shut down the Rgc service.

gcssdk.disconnect()