CloudHub Docs
Download Documents

RTC


Fast integration SDK

To import CloudHub JSSDK, choose any of the following methods to obtain CloudHub JSSDK.

ready

Example

<script src="./sdk/cloudhubrtcjssdk.js" type="text/javascript"></script>

Note： Importing in this way will bind CloudHubRTC under window, so you can directly use window.CloudHubRTC or CloudHubRTC.

###npm get SDK

To use this method, you need to install npm first

  1. Run the installation command:
npm install cloudhub-rtc-js-sdk --save
  1. Introduce this module in your project:
import CloudHubRTC from 'cloudhub-rtc-js-sdk';

Basic process

The steps of a simple audio and video live broadcast are generally as follows:

1.Call createClient to create a local client object. 2. Initialize the client according to AppId, and call client.joinChannel to join the channel. 3. Call createStream to create a local stream object localStream 4. Call localStream.init to initialize the local stream created in step 3, and use localStream.playVideo to play the local video 5. Publish the local video to the channel via client.publish 6.Use client.subscribe to subscribe and play other users’ videos in the channel 7. Call client.leaveChannel to leave the channel

start

1. Initialize the client

const config = {
  mode: 'live',
  codec: 'vp8',
};
const client = CloudHubRTC.createClient(config);

See create Client for details

2. Set user role

There are two user roles for live channels: host and audience. The default role is audience. Users in the live channel can only see the host’s screen and hear the host’s voice.

After setting the channel scene as live broadcast, you can call the setClientRole method to set the user role.

// The value of Role can be "host" or "audience".
client.setClientRole("host", errInfo => {
  if (!errInfo) {
    // setClientRole success
  } else {
    // setClientRole error
  }
});

See setclientrole for details of parameters

Note： Only live broadcast needs to set roles

3. Join the target channel

client.init(appId,{},
  () => {
    client.joinChannel(null,channelId,'',{},
        myUserId => {
            console.log('Channel joining succeeded, myUserId:', id);
        },
        errCode => {
            console.error('Failed to join the room', errCode);
        },
    );
  },
  err => {
      console.error('initialization failed', err);
  },
);

See join Channel for details, init

4. Create and play local audio and video

When the user role is set as the host, after successfully joining the channel, you can create and publish local audio and video.

const localStream = CloudHubRTC.createStream({
    uid: myUserId,
    type: 'video',
});
localStream.init({}, errInfo => {
    if (errInfo) {
        console.error('stream init error：', errInfo);
    }
    localStream.playVideo(videoEleId, {}, err => {
        console.error('err', err)
    });
});

5. Publish local video

After publishing the audio and video stream, other users in the channel can subscribe to the audio and video stream and play it


client.publish(localStream, {});

6. Subscribe to remote audio and video and play

After a user publishes an audio and video stream in the channel, the’stream-added' event will be triggered, and the audio and video stream can be subscribed after listening to the event;
After the subscription is successful, the’stream-subscribed' event will be triggered locally;
If the subscription stream contains a video, the first-video-frame-decode event will also be triggered;
If the subscription stream contains audio, the first-audio-frame-decode event will also be triggered.

client.on('stream-added', data => {
  const { stream } = data;
  client.subscribe(stream, {}, err => {
      console.error("stream subscribe failed", err);
      // Code logic for handling subscription failure
  });
})

// Trigger callback after successful subscription
client.on('stream-subscribed', data => {
    const { stream } = data;
    const streamId = stream.getId();
    const type = stream.getType();
    switch (type) {
        case 'video': {
          stream.playVideo(videoBoxId, {fit: "contain"}, function(StreamPlayError){
              console.error("playVideo StreamPlayError", StreamPlayError);
          });
          stream.playAudio({}, errorInfo => {
              console.error('playAudio fail,errorInfo:', errorInfo);
          });
          break;
        }
    }
});

**Note：**The data.getType() returned by the stream-subscribed event represents the media type currently published by the remote user

7. Leave channel

// Destroy the created local audio and video tracks, and remove the webpage's access to the camera and microphone.
localStream.close();
// Leave channel
client.leaveChannel();

See leavechannel for details