このトピックでは、Web用コストリーミングSDKによって提供される方法について説明します。
基本クラス
クラス | 説明 | ||||||
AlivcLivePusher | ストリーム取り込みのクラス。The class for stream ingest. 説明 クラスにアクセスするには、window.AlivcLivePush.AlivcLivePusherを使用します。 | ||||||
AlivcLivePlayer | ストリームをプルするためのクラス。 説明 クラスにアクセスするには、window.AlivcLivePush.AlivcLivePlayerを使用します。 |
AlivcLivePusher-ストリームの取り込みに関連するメソッドを提供します
メソッドのリスト
移動方法 | 説明 | ||||||
カメラを照会します。 これは静的な方法です。 | |||||||
マイクを照会します。 これは静的な方法です。 | |||||||
再生デバイスを照会します。 これは静的な方法です。 | |||||||
WebRTCの要件が満たされているかどうかを確認します。 これは静的な方法です。 | |||||||
画面共有がサポートされているかどうかを確認します。 これは静的な方法です。 | |||||||
ストリーム取り込みパラメーターを初期化します。 | |||||||
ストリーム取り込みインスタンスをリリースします。 | |||||||
プレビューを開始します。 | |||||||
プレビューを停止します。 | |||||||
ストリームの取り込みを開始します。 | |||||||
ストリームの取り込みを再開します。 | |||||||
ストリーム取り込みを再結合して続行します。 | |||||||
ストリームの取り込みを停止します。 | |||||||
マイクをオンにするか、別のマイクに切り替えます。 | |||||||
マイクをオフにします。 | |||||||
マイクのデバイスIDを照会します。 | |||||||
カメラをオンにするか、別のカメラに切り替えます。 | |||||||
カメラの電源を切ります。 | |||||||
カメラのデバイスIDを照会します。 | |||||||
画面共有を開始します。 | |||||||
画面の共有を停止します。 | |||||||
カスタムセカンダリストリームの取り込みを開始します。 | |||||||
カスタムセカンダリストリームの取り込みを停止します。 | |||||||
ストリームをミュートまたはミュート解除します。 (ストリーム取り込みは停止しません。) | |||||||
ストリームの表示を表示または停止します。 (ストリーム取り込みは停止しません。) | |||||||
最後に報告されたストリーム取り込み統計を照会します。 | |||||||
取り込みURLを照会します。 | |||||||
チャネルIDを照会します。 | |||||||
ユーザーIDを照会します。 | |||||||
ストリーム中継とミキシングのレイアウトを更新します。 | |||||||
解像度を照会します。 | |||||||
解像度を更新します。 | |||||||
フレームレートを照会します。 | |||||||
フレームレートを更新します。 | |||||||
現在のストリームのMediaStream情報を照会します。 | |||||||
トレースIDを照会します。 |
詳細
getCameras: カメラを照会します。 これは静的な方法です。
/** * Query cameras. * @return {Promise<MediaDeviceInfo[]>} */ const cameras = await AlivcLivePusher.getCameras();
getMicrophones: マイクを照会します。 これは静的な方法です。
/** * Query microphones. * @return {Promise<MediaDeviceInfo[]>} */ const microphones = await AlivcLivePusher.getMicrophones();
getPlayoutDevices: 再生デバイスを照会します。 これは静的な方法です。
/** * Query playback devices. * @return {Promise<MediaDeviceInfo[]>} */ const playoutDevices = await AlivcLivePusher.getPlayoutDevices();
checkSystemRequirements: WebRTCの要件が満たされているかどうかを確認します。 これは静的な方法です。
/** * Check whether the requirements for WebRTC are met. * @param {('sendonly' | 'recvonly' | 'sendrecv')} [direction] * @return {Promise<CheckResult>} */ const checkResult = await AlivcLivePusher.checkSystemRequirements(); // checkResult.support: boolean; Indicates whether the requirements are met. // checkResult.detail.isBrowserSupported: boolean; Indicates whether the browser is supported. // checkResult.detail.isH264DecodeSupported: boolean; Indicates whether H.264 decoding is supported. // checkResult.detail.isH264EncodeSupported: boolean; Indicates whether H.264 encoding is supported. // checkResult.detail.isWebRTCSupported: boolean; Indicates whether WebRTC is supported.
checkScreenShareSupported: 画面共有がサポートされているかどうかを確認します。 これは静的な方法です。
/** * Check whether screen sharing is supported. * @returns {boolean} */ const isScreenShareSupported = AlivcLivePusher.checkScreenShareSupported();
init: ストリーム取り込みパラメータを初期化します。
/** * Initialize the RTC engine. * @param config Configure parameters. All the parameters are optional. * config.resolution: AlivcResolutionEnum; The resolution. * config.fps: AlivcFpsEnum; The frame rate. Unit: frames per second (FPS). * config.logLevel: LogLevel; The log level. Default value: ERROR. * config.connectRetryCount: number; The maximum number of reconnection attempts. * config.audio: boolean; Specifies whether to enable audio. * config.audioId: string; The ID of the default audio device. * config.video: boolean; Specifies whether to turn on the camera. * config.cameraId: string; The device ID of the default camera. * config.screen: boolean; Specifies whether to enable screen sharing. */ const pusher = new AlivcLivePush.AlivcLivePusher(); pusher.init({ resolution: AlivcLivePush.AlivcResolutionEnum.RESOLUTION_720P });
destroy: ストリーム取り込みインスタンスをリリースします。
// Release the stream ingest instance. You cannot use the instance after you release it. pusher.destroy()
startPreview: プレビューを開始します。
/** * Start video preview. * @param {string | HTMLVideoElement} elementOrId The node where the video resides or the ID of the video. * @param {boolean} secondary Specifies whether to preview the secondary stream. This parameter is optional. By default, only the primary stream is previewed. * @return {Promise<MediaStream>} */ const stream = pusher.startPreview(elementOrId);
stopPreview: プレビューを停止します。
/** * Stop video preview. * @param {string | HTMLVideoElement} elementOrId The node where the video resides or the ID of the video. This parameter is optional. If you do not specify this parameter, previewing for all videos is stopped. */ pusher.stopPreview(elementOrId);
startPush: ストリームの取り込みを開始します。
/** * Start stream ingest. * @param {string} url The ingest URL. Example: artc://live.aliyun.com/push/.... * @return {Promise} */ await pusher.startPush(url);
重要コストリーミングに使用される取り込みURLを指定する必要があります。 コストリーミング用のURLを生成する方法については、「コストリーミングURLジェネレーター」をご参照ください。
restartPush: 現在の取り込みURLを使用してストリーム取り込みを再開します。
/** * Use the current ingest URL to restart stream ingest. * @return {Promise} */ await pusher.restartPush();
reconnectPush: 再接続してストリーム取り込みを続行します。
/** * Reconnect and continue stream ingest. * @param {string} url The new ingest URL. Example: artc://live.aliyun.com/push/.... * @return {Promise} */ await pusher.reconnectPush(url);
stopPush: ストリームの取り込みを停止します。
/** * Stop stream ingest. * @return {Promise} */ await pusher.stopPush(url);
startMicrophone: マイクをオンにするか、別のマイクに切り替えます。
/** * Turn on the microphone or switch to another microphone. * @param {string} deviceId The device ID of the microphone. This parameter is optional. * @return {Promise} */ await pusher.startMicrophone(deviceId);
stopMicrophone: マイクをオフにします。
/** * Turn off the microphone. * @return {Promise} */ await pusher.stopMicrophone();
getCurrentMicDeviceId: マイクのデバイスIDを照会します。
/** * Query the device ID of the microphone. * @return {string | undefined} The device ID of the microphone. */ const micId = pusher.getCurrentMicDeviceId();
startCamera: カメラをオンにするか、別のカメラに切り替えます。
/** * Turn on the camera or switch to another camera. * @param {string} deviceId The device ID of the camera. This parameter is optional. * @return {Promise} */ await pusher.startCamera(deviceId);
stopCamera: カメラをオフにします。
/** * Turn off the camera. * @return {Promise} */ await pusher.stopCamera();
getCurrentCameraDeviceId: カメラのデバイスIDを照会します。
/** * Query the device ID of the camera. * @return {string | undefined} The device ID of the camera. */ const cameraId = pusher.getCurrentCameraDeviceId();
startScreenShare: 画面共有を開始します。
/** * Start screen sharing. * @return {Promise} */ await pusher.startScreenShare();
stopScreenShare: 画面共有を停止します。
/** * Stop screen sharing. * @return {Promise} */ await pusher.stopScreenShare();
startCustomStream: カスタムセカンダリストリームの取り込みを開始します。
/** * Start ingest of the custom secondary stream. * @param mediaStream The custom secondary stream. * @return {Promise<MediaStream>} */ await pusher.startCustomStream(mediaStream);
stopCustomStream: カスタムセカンダリストリームの取り込みを停止します。
/** * Stop ingest of the custom secondary stream. * @return {Promise<void>} */ await pusher.stopCustomStream();
mute: ストリームをミュートまたはミュート解除します。 (ストリーム取り込みは停止しません。)
/** * Mute or unmute the stream. * @param {boolean} Specifies whether to mute the stream. * @returns {boolean} The mute or unmute result. */ pusher.mute(true);
muteVideo: ストリームの表示を表示または停止します。 (ストリーム取り込みは停止しません。)
/** * Display or stop displaying the stream. * @param mute Specifies whether to stop sending video data. Valid values: true and false. * @returns Indicates whether the operation is successful. */ pusher.muteVideo(true);
getLivePushStatsInfo: 最後に報告されたストリーム取り込み統計を照会します。
/** * Query the stream ingest statistics that was last reported. * @return {StatsInfo} The stream ingest statistics. */ const statsInfo = pusher.getLivePushStatsInfo();
getPushUrl: 取り込みURLを照会します。
/** * Query the ingest URL. * @return {string | undefined} The current ingest URL. */ const url = pusher.getPushUrl();
getChannelId: チャネルIDを照会します。
/** * Query the channel ID. * @return {string | undefined} The current channel ID. */ const channelId = pusher.getChannelId();
getUserId: ユーザーIDを照会します。
/** * Query the user ID. * @return {string | undefined} The current user ID. */ const userId = pusher.getUserId();
setLiveMixTranscodingConfig: ストリームリレーとミキシングのレイアウトを更新します。
/** * Update the layout for stream relay and mixing. * @param {AlivcLiveTranscodingConfig} config This parameter is optional. If you do not specify this parameter, stream relay and mixing are stopped. For more information, check the details about the AlivcLiveTranscodingConfig class. * @return {Promise} The result of the operation. */ const response = await pusher.setLiveMixTranscodingConfig(config);
getResolution: 解決を照会します。
/** * Query the resolution. * @return {AlivcResolutionEnum | undefined} The resolution. */ const resolution = pusher.getResolution();
changeResolution: 解像度を更新します。
/** * Update the resolution. * @param resolutionEnum The resolution that you want to use. If you set this parameter to Custom, specify a custom resolution. * @param width The width, which is required when you specify a custom resolution. * @param height The height, which is required when you specify a custom resolution. * @param bitrate The maximum bitrate. * @return {Promise} */ await pusher.changeResolution(AlivcResolutionEnum.RESOLUTION_720P);
getFps: フレームレートを照会します。
/** * Query the frame rate. * @return {AlivcFpsEnum | undefined} The current frame rate. */ const fps = pusher.getFps();
changeFps: フレームレートを更新します。
/** * Update the frame rate. * @param {AlivcFpsEnum} fps The frame rate that you want to use. * @return {Promise} */ await pusher.changeFps(AlivcFpsEnum.FPS_30);
getPublishMediaStream: 現在のストリームのMediaStream情報を照会します。
/** * Query the MediaStream information of the current stream. * @return {MediaStream | undefined} The MediaStream information of the stream. */ const mediaStream = pusher.getPublishMediaStream();
getLiveTraceId: トレースIDを照会します。
/** * Query the trace ID. * @return {string} TraceId */ pusher.getLiveTraceId();
AlivcLiveTranscodingConfig
List of parameters
パラメーター | 説明 | ||||||
width | 中継されたストリームの幅を示す数値。 | ||||||
height | 中継されたストリームの高さを示す数値。 | ||||||
backgroundColor | 背景色を示す16進値。 例: 0x000000。 | ||||||
cropMode | AlivcLiveTranscodingCropModeEnum
| ||||||
mixStreams | AlivcLiveMixStream[]: 混合ストリームに含まれる各ストリームのレイアウトの詳細。 |
AlivcLiveMixStream
List of parameters
パラメーター | 説明 | ||||||
userId | ストリームミキシングを実行するユーザーのIDを示す文字列。 | ||||||
x | ストリームのミキシングが開始されるx軸方向のピクセル数を示す数値。 | ||||||
y | ストリームミキシングの開始位置からy軸方向のピクセル数を示す数値。 | ||||||
width | 混合ストリームの幅を示す数値。 | ||||||
height | 混合ストリームの高さを示す数値。 | ||||||
zOrder | 階層レベルを示す数値。 値が大きいほど、レベルは高くなります。 |
AlivcLivePusher.info
イベント | 説明 | ||||||
さようなら | ビューアが部屋を離れることを示します。 視聴者は、他の視聴者によって移動されたり、ストリーマによって追い出されたりする可能性があります。 | ||||||
pushstatistics | 取り込まれたストリームに関するデータ統計のコールバック。 このコールバックは2秒ごとに返されます。 |
サンプルコード:
pusher.info.on('bye', (_code, reason) => {
// console.log ('You have left the room. Reason: ${reason}');
});
pusher.info.on('pushstatistics', _stat => {
// console.log(_stat);
});
AlivcLivePusher. エラー
イベント | 説明 | ||||||
system | システムエラーを示します。 | ||||||
sdk | SDKの内部エラーを示します。 |
サンプルコード:
pusher.error.on('system', error => {
// console.log(error);
});
pusher.error.on('sdk', error => {
// console.log(error);
});
AlivcLivePusher.netワーク
イベント | 説明 | ||||||
connectionlost | 切断を示します。 | ||||||
networkrecovery | ネットワークの回復を示します。 | ||||||
reconnectstart | 再接続の開始を示します。 | ||||||
reconnectfail | 再接続が失敗したことを示します。 | ||||||
reconnectsuccess | 再接続が成功したことを示します。 |
サンプルコード:
pusher.network.on('connectionlost', () => {
// console.log ('A network exception occurs, which results in a disconnection.');
});
AlivcLivePlayer-ストリームプルに関連するメソッドを提供します
メソッドのリスト
移動方法 | 説明 | ||||||
オーディオストリームとビデオストリームの再生を開始します。 | |||||||
別のノードでオーディオストリームとビデオストリームを再生します。 | |||||||
オーディオおよびビデオストリームの再生を停止します。 | |||||||
オーディオストリームの再生を一時停止します。 | |||||||
ビデオストリームの再生を一時停止します。 | |||||||
オーディオストリームの再生を再開します。 | |||||||
ビデオストリームの再生を再開します。 | |||||||
ストリームプルインスタンスをリリースします。 |
詳細
startPlay: オーディオストリームとビデオストリームの再生を開始します。
/** * Start the playback of the audio and video streams. * @param url The streaming URL. Example: artc://live.aliyun.com/play/... * @param elementOrId The label or ID of the media resource. * @param secondaryElementOrId The label or ID of the media resource of the secondary stream. * @return {Promise<AlivcLivePlayInfo>} You can use AlivcLivePlayInfo to listen to related events. */ const playInfo = await player.startPlay(url, elementOrId, secondaryElementOrId);
重要コストリーミングに使用されるストリーミングURLを指定する必要があります。 コストリーミング用のURLを生成する方法については、「コストリーミングURLジェネレーター」をご参照ください。
通常の視聴者は、ApsaraVideo Player SDK for Webを使用してストリームを再生できます。 詳細については、「webプレーヤーへのクイックアクセス」をご参照ください。
playAnotherElement: 別のノードでオーディオストリームとビデオストリームを再生します。
/** * Play the audio and video streams on another node. * @param elementOrId The label or ID of the media resource. * @param secondary Specifies whether to play the secondary stream. This parameter is optional. By default, only the primary stream is played. */ player.playAnotherElement(elementOrId);
stopPlay: オーディオストリームとビデオストリームの再生を停止します。
/** * Stop the playback of the audio and video streams. * @param elementOrId The label or ID of the media resource. This parameter is optional. If you do not specify this parameter, playback of all media resources is stopped. * @return {Promise} */ await player.stopPlay(elementOrId);
pauseAudioPlaying: オーディオストリームの再生を一時停止します。
/** * Pause the playback of the audio stream. */ player.pauseAudioPlaying();
pauseVideoPlaying: ビデオストリームの再生を一時停止します。
/** * Pause the playback of the video stream. */ player.pauseVideoPlaying();
resumeAudioPlaying: オーディオストリームの再生を再開します。
/** * Resume the playback of the audio stream. */ player.resumeAudioPlaying();
resumeVideoPlaying: ビデオストリームの再生を再開します。
/** * Resume the playback of the video stream. */ player.resumeVideoPlaying();
destroy: ストリームプルインスタンスを解放します。
/** * Release the stream pulling instance. You cannot use the instance after you release it. */ player.destroy();
AlivcLivePlayInfo
イベント | 説明 | ||||||
canplay | canplayイベントを示します。 | ||||||
userleft | リモートユーザーが部屋を離れることを示します。 | ||||||
statistics | 再生統計を示します。 | ||||||
update | リモートストリームを更新します。 |
サンプルコード:
playInfo.on('statistics', _stat => {
// console.log(_stat);
});
playInfo.on('userleft', () => {
// console.log ('The remote user leaves the room.');
});
playInfo.on('canplay', function () {
// console.log ('The remote stream can be played.');
});
playInfo.on('update', function (previousStatus) {
// console.log(previousStatus.mediaStream);
// console.log(previousStatus.secondaryMediaStream);
});