The Web RTS SDK provides APIs for real-time stream pulling, stream ingest, and event handling.
Contents
|
API |
Description |
|
Creates an RTS client instance. |
|
|
Checks whether the stream pulling environment is supported. |
|
|
Checks whether the stream ingest environment is supported. |
|
|
Starts pulling an RTS stream. |
|
|
Stops RTS playback. |
|
|
Mutes the audio. |
|
|
Obtains a local camera stream, a local screen sharing stream, or a custom stream. |
|
|
Starts stream ingest. |
|
|
Stops stream ingest. |
|
|
Registers an event listener. |
|
|
Removes an event listener. |
|
|
Registers a one-time event listener. |
Details
-
createClient: Creates an RTS client instance.
var aliRts = AliRTS.createClient(); -
isSupport: Checks whether the stream pulling environment is supported.
/** * isSupport checks whether the environment is available. * @param {Object} supportInfo Check information. * @param {boolean} supportInfo.isReceiveVideo Specifies whether to pull a video stream. * @return {Promise} */ aliRts.isSupport({isReceiveVideo: true}).then(re=> { // Available }).catch(err=> { // Unavailable console.log(`not support errorCode: ${err.errorCode}`); console.log(`not support message: ${err.message}`); }) -
checkPublishSupport: Checks whether the stream ingest environment is supported.
/** * checkPublishSupport checks whether the stream ingest environment is available. * @return {Promise} */ aliRts.checkPublishSupport().then(re => { console.log('support info',re); // re.isAudioMixSupported: boolean; Specifies whether local audio stream mixing is supported. // re.isH264EncodeSupported: boolean; Specifies whether H.264 encoding is supported. // re.isMediaDevicesSupported: boolean; Specifies whether access to cameras, microphones, and speakers is supported. // re.isScreenCaptureSupported: boolean; Specifies whether screen sharing is supported. // re.isWebRTCSupported: boolean; Specifies whether WebRTC is supported. // re.cameraList: MediaDeviceInfo[]; The list of video input devices. // re.micList: MediaDeviceInfo[]; The list of audio input devices. // re.speakerList: MediaDeviceInfo[]; The list of audio output devices. }).catch(err=> { console.log(err); }) -
subscribe: Pulls an RTS stream.
/** * The API to start pulling an RTS stream. * @param {string} pullStreamUrl The stream pulling URL. You can add @subaudio=no or @subvideo=no to the end of the URL to unsubscribe from the audio or video stream. * @param {Object} [config] (Optional) Custom configurations. * @param {string} [config.signalUrl] (Optional) The signaling URL. * @param {number} [config.retryTimes] (Optional) The maximum number of reconnection attempts. Default value: 5. * @param {number} [config.retryInterval] (Optional) The reconnection interval. Unit: ms. Default value: 2000. * @return {Promise} */ aliRts.subscribe(pullStreamUrl).then((remoteStream) => { // mediaElement is an audio or video media tag. remoteStream.play(mediaElement); // Calling remoteStream.play attaches the media stream to the media tag and tries to enable autoplay. // If you do not want to enable autoplay, you can pass {autoplay:false} as the second parameter. This feature is supported from version 2.2.4. // remoteStream.play(mediaElement, {autoplay:false}); }).catch((err) => { // Subscription failed. })Important-
When decoding audio and video for RTS (RTS), B-frames are not supported for video, which can cause screen stuttering. AAC encoding is not supported for audio, which can result in noise. If necessary, you can perform RTS transcoding to remove these limitations. For more information, see RTS transcoding.
-
If you import the Web RTS SDK into a uni-app project, the
remoteStream.play()method requires an actual HTMLVideoElement. Because uni-app encapsulates the <video> tag, you can refer to the method in the demo to obtain the actual HTMLVideoElement. For example, in pages/index/index.vue, useremoteStream.play(this.$refs.myVideo.$refs.video). -
The returned remoteStream from the subscribe method contains raw audio and video data, which you can access through the WebRTC MediaStream.
-
-
unsubscribe: Stops RTS playback.
aliRts.unsubscribe(); -
muted: Mutes the audio.
remoteStream.muted = true; -
createStream
-
Obtains a local camera stream.
/** * Gets the local stream localStream. * @param {Object} config Configurations. * @param {boolean} config.audio Specifies whether to use an audio device. * @param {boolean} config.video Specifies whether to use a video device. * @param {boolean} config.skipProfile Specifies whether to skip the profile. We recommend that you set this parameter to true when the camera shows a black screen. * @returns {Promise} */ AliRTS.createStream({ audio: true, video: true, }).then((localStream) => { // Previews the ingested stream. mediaElement is an audio or video media tag. localStream.play(mediaElement); }).catch((err) => { // Failed to create the local stream. }) -
Obtains a local screen sharing stream.
/** * Shares only the screen. */ AliRTS.createStream({ screen: true }); /** * Shares the screen and captures the screen audio. Chrome on macOS supports capturing tab audio. Chrome on Windows supports capturing tab and system audio. */ AliRTS.createStream({ screen: { audio: true } }); /** * Shares the screen, captures the screen audio, and captures the microphone audio. */ AliRTS.createStream({ screen: { audio: true }, audio: true }); /** * Custom capture parameters. * - Disables echo cancellation for audio. * - Chrome prioritizes the current tab. * The preceding code provides an example. You can pass any parameter that complies with getDisplayMedia. The actual effect depends on whether the browser supports the parameter. */ AliRTS.createStream({ screen: { audio: { echoCancellation: false }, preferCurrentTab: true } }); -
Obtains a custom stream.
/** * Gets the local stream localStream. * @param {Object} config Configurations. * @param {boolean} config.custom Specifies whether to pass a custom stream. * @param {boolean} config.mediaStream A valid custom stream. * @returns {Promise} */ AliRTS.createStream({ // Custom stream custom: true, mediaStream: myStream // Pass a valid MediaStream (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream). }).then((localStream) => { // Previews the ingested stream. mediaElement is an audio or video media tag. localStream.play(mediaElement); }).catch((err) => { // Failed to create the local stream. })
-
-
publish: Starts stream ingest.
/** * Starts stream ingest. * @param {string} pushUrl The ingest URL. * @param {Object} localStream The local stream created by createStream. * @param {Object} [config] (Optional) Custom configurations. * @param {string} [config.signalUrl] (Optional) The signaling URL. * @param {number} [config.retryTimes] (Optional) The maximum number of reconnection attempts. Default value: 5. * @param {number} [config.retryInterval] (Optional) The reconnection interval. Unit: ms. Default value: 2000. * @return {Promise} */ aliRts.publish(pushUrl, localStream).then(() => { // Stream ingest successful. }).catch((err) => { // Stream ingest failed. }) -
unpublish: Stops stream ingest.
aliRts.unpublish(); -
on: Registers an event listener.
/* * When error code 10201 is returned in onError, the audio on the web page is muted. * The user must manually trigger an event on the web page to unmute the audio. This requires user interaction and cannot be controlled by code. * Call remoteStream.muted = false to unmute. */ aliRts.on("onError", (err)=> { console.log(`errorCode: ${err.errorCode}`); console.log(`message: ${err.message}`); }) aliRts.on('reconnect', function(evt) { console.log('reconnect', evt); // Listens for the reconnection event. evt is the cause of the reconnection. }) const PLAY_EVENT = { CANPLAY: "canplay", // Playback is ready. WAITING: "waiting", // Stuttering occurs. PLAYING: "playing", // Playback resumes after stuttering. MEDIA: "media", // Reports real-time media status every second. } aliRts.on('onPlayEvent', function(evt) { /* evt data structure: { event: string, // PLAY_EVENT data: any, // Data } */ if (evt.event === PLAY_EVENT.CANPLAY) { console.log("Playback is ready"); } else if (evt.event === PLAY_EVENT.WAITING) { console.log("Stuttering occurs"); } else if (evt.event === PLAY_EVENT.PLAYING) { console.log("Playback resumes after stuttering"); } else if (evt.event === PLAY_EVENT.MEDIA) { console.log("Real-time media data per second: ", evt.data); /* evt.data data structure: { url: string, // The playback URL aMsid: stirng, // The audio ID. Default value: 'rts audio'. audio: { // (Not supported by some browsers) bytesReceivedPerSecond: number, // The audio bitrate lossRate: number, // The audio packet loss rate rtt: number, // The RTT for both audio and video }, vMsid: string, // The video ID. Default value: 'rts video'. video: { // (Not supported by some browsers) bytesReceivedPerSecond: number, // The video bitrate framesDecodedPerSecond: number, // The decoding frame rate fps: number, // The rendering frame rate height: number, // The resolution height width: number, // The resolution width lossRate: number, // The video packet loss rate rtt: number, // The RTT for both audio and video }, networkQuality: number, // The network quality score } // The network quality score (networkQuality) can be one of the following values: // 0: Unknown, 1: Excellent, 2: Good, 3: Fair, 4: Poor, 5: Very poor, 6: No network */ } }); -
off: Removes an event listener.
function handle() {}; aliRts.on('onPlayEvent', handle); // Cancel the listener. aliRts.off('onPlayEvent', handle); -
once: Registers a one-time event listener.
aliRts.once('onPlayEvent', handle);