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()}`);
- 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();
}
Changelogs
FLS v0.0.2
New Features
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
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 }
You can check whether the current browser supports WebRTC and HLS
isRtcSupported
whether the current browser supports WebRTCisHlsSupported
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); });
Bug fix
- 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
FLS v0.0.3
Bug fix
- Fallback to HLS in http environment even if WebRTC is supported
FLS v0.0.4
New Features
- Never fallback to HLS when video codec is VP8 at RTC mode
- Try to recover audio/video autoplay failed at wechat webview
FLS v0.0.5
New Features
- Support non-standard rte hls url
FLS v0.0.6
New Features
- Support set streamid to receive stream from the specified broadcaster
FLS v0.0.7
- 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 });