npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

agora-fls-sdk

v0.0.8

Published

agora live streaming player for web

Downloads

96

Readme

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