Demo

Test Website(latest)：https://webdemo.agora.io/fls/fls-latest/

Test Website(version)：https://webdemo.agora.io/fls/fls-v0.0.7/

Install

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()}`);

1. Prepare <video/> for video rendering

<video id="remote-video"></video>

2. 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 });

3. 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);
});

1. 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();
}

Changelogs

FLS v0.0.2

New Features

1. At RTC mode, you can get current network status and the callback when network status change

   • Reference:

     • https://docportal.shengwang.cn/cn/All/API%20Reference/web_ng/interfaces/iagorartcclient.html#event_network_quality

   • Usage:

     player.on("network-quality", (quality: 0 | 1 | 2 | 3 | 4 | 5 | 6) => {});
     player.getNetworkQuality(): 0 | 1 | 2 | 3 | 4 | 5 | 6

2. At RTC mode, you can get host's audio and video stats

   • Reference:

     • https://docportal.shengwang.cn/cn/All/API%20Reference/web_ng/interfaces/iagorartcclient.html#getremoteaudiostats
     • https://docportal.shengwang.cn/cn/All/API%20Reference/web_ng/interfaces/iagorartcclient.html#getremotevideostats

   • Usage:

     player.getStats(): {
       audio: RtcAudioStats,
       video: RtcVideoStats
     }

3. 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

4. Add event "before-media-source-change"

   • Usage:

   player.on(PlayerEvent.BEFORE_MEDIA_SOURCE_CHANGE, (source: MediaSource) => {
     console.info("media source will change to: ", source);
   });

Bug fix

1. The uid is regarded as string uid when set to 0
2. Switching media source when muted, the voice recovered
3. WebRTC is regarded as unsupported at the WebViews of some iOS devices

FLS v0.0.3

Bug fix

1. Fallback to HLS in http environment even if WebRTC is supported

FLS v0.0.4

New Features

1. Never fallback to HLS when video codec is VP8 at RTC mode
2. Try to recover audio/video autoplay failed at wechat webview

FLS v0.0.5

New Features

1. Support non-standard rte hls url

FLS v0.0.6

New Features

1. Support set streamid to receive stream from the specified broadcaster

FLS v0.0.7

1. Upgrade AgoraRTC SDK to v4.22.1

Best Practices

Cannot decode H.264 video

Some users have encountered exceptions on some Huawei mobile phones when decoding H.264 video. You can set defaultUseHLS to true.

const isHuawei = /Huawei/i.test(navigator.userAgent);
const playerOptions: IPlayerOptions = {
    // ...
    defaultUseHLS: isHuawei,
  }
);
const player = new LivePlayer({ ...playerOptions });