Install agora-fls-sdk
by npm
, yarn
or pnpm
npm i agora-fls-sdk
yarn add agora-fls-sdk
pnpm add agora-fls-sdk
Import necessary dependencies
import {
LivePlayer,
PlayerEvent,
RtcSourceState,
RtcMediaState,
RtcUserState,
setParameters,
getParameters,
MediaSource,
MediaPlayState,
IPlayerOptions,
setRTCParameters,
isRtcSupported,
isHlsSupported,
type IPlayerOptions,
type IPlayerError,
// enableLogUpload,
// enableNewNetworkConfig,
} from "agora-fls-sdk";
// enableLogUpload();
// enableNewNetworkConfig();
console.info(`WebRTC: ${isRtcSupported()}, HLS: ${isHlsSupported()}`);
- Prepare
<video/>
for video rendering
<video id="remote-video"></video>
- Create Live Player
const appId = "xxxxxxxxxxxxxxxxxxxxxx";
const token = "xxxxxxxxxxxxxxxxxxxxxx";
const rteURL = `rte://${appId}/appname/stream_name?token=${token}&uid=123456`
const playerOptions: IPlayerOptions = {
url: rteURL,
el: "remote-video",
width: undefined,
height: undefined,
aspectRatio: "16/9",
autoplay: true,
mirror: false,
defaultUseHLS: false,
autoSwitchHLS: true,
hlsConfig: {
debug: true,
enableWorker: true,
lowLatencyMode: true,
},
}
);
const player = new LivePlayer({ ...playerOptions });
- Event Listen
player.on(PlayerEvent.ERROR, ({ error, source }: IPlayerError) => {
console.info("error: ", error, `at ${source} mode, please retry!`);
});
player.on(PlayerEvent.AUTOPLAY_PREVENTED, () => {
console.info("autoplay failed, please toggle play manually");
});
player.on(PlayerEvent.BEFORE_MEDIA_SOURCE_CHANGE, (source: MediaSource) => {
console.info("media source will change to: ", source);
});
player.on(PlayerEvent.MEDIA_SOURCE_CHANGED, (source: MediaSource) => {
console.info("media source changed to: ", source);
});
player.on(PlayerEvent.REQUEST_SWITCH_MEDIA_SOURCE, (source: MediaSource) => {
console.info("request switch media source to: ", source);
});
player.on(PlayerEvent.PLAY_STATE_CHANGED, (state: MediaPlayState) => {
console.info("play state change to: ", state);
});
- Operate Player
async function play() {
await player.play();
}
async function pause() {
await player.pause();
}
async function stop() {
await player.pause(true);
}
async function retry() {
await player.retry();
}
async function switchURL(newURL: string) {
await player.switchURL(newURL);
}
async function switchToHLS() {
await player.switchMediaSource(MediaSource.HLS);
}
async function switchToRTC() {
await player.switchMediaSource(MediaSource.RTC);
}
async function destroy() {
await player.destroy();
}
Test Website:https://webdemo.agora.io/fls/fls-v0.0.2/
-
At RTC mode, you can get current network status and the callback when network status change
-
Reference:
-
Usage:
player.on("network-quality", (quality: 0 | 1 | 2 | 3 | 4 | 5 | 6) => {}); player.getNetworkQuality(): 0 | 1 | 2 | 3 | 4 | 5 | 6
-
-
At RTC mode, you can get host's audio and video stats
-
Reference:
-
Usage:
player.getStats(): { audio: RtcAudioStats, video: RtcVideoStats }
-
-
You can check whether the current browser supports WebRTC and HLS
-
isRtcSupported
whether the current browser supports WebRTC -
isHlsSupported
whether the current browser supports HLS
-
-
Add event "before-media-source-change"
- Usage:
player.on(PlayerEvent.BEFORE_MEDIA_SOURCE_CHANGE, (source: MediaSource) => { console.info("media source will change to: ", source); });
- The uid is regarded as string uid when set to 0
- Switching media source when muted, the voice recovered
- WebRTC is regarded as unsupported at the WebViews of some iOS devices