Replay · Netless

Prerequisite

// TODO

Make sure that when requesting the server to create a room, the room type is Playable Room. For details, please see Server-side Document -> Whiteboard Type。

Read Initialization Parameters -> Playback Parameters to understand the parameters required when initializing playback.

In this section, player is the player object that was successfully returned after sdk called replayRoom API.

white-react-sdk

white-react-sdk, you can use the following methods for binding operations:

import React from "react";

class App extends React.Component {
    render() {
        return <PlayerWhiteboard player={player}/>;
    }
}

Audio and video support

sdk supports the input of audio and video addresses during playback. For details, please refer to Initialization Parameters -> Playback Parameters. sdk will actively take over the playback of audio and video, and is responsible for handling the synchronization status of audio and video withsdk 'player. When any one of the whiteboard playback and audio and video enters thebufferstate,sdkwill automatically stop the playback of the other, wait for the other party to finish buffering, and trigger the buffer state callback ofplayer` at the same time.

Audio

For audio, you only need to configure the correct audio address according to Initialization Parameters -> Playback Parameters.

Video

1. Create a video tag

Create a video tag to display and set theid to white-sdk-video-js. (Developers can configure the layout of the label themselves according to business needs.)

Before 2.2.13, please add the css namevideo-js in the video tag

<!-- According to business needs, set the layout method by yourself -->
<video id="white-sdk-video-js" class="video-js"></video>

2. Quote videojs css

Reference sdk in the tag

2.3.0 and previous versions need to manually reference the css of videojs

<head>
<link rel="stylesheet" href="https://vjs.zencdn.net/7.6.0/video-js.css">
</head>

Use package management tools like npm

Currently video-js is adependency dependency of sdk and will be installed automatically. Just call manual import on the corresponding page.

import "video.js/dist/video-js.css";

Limitations-Safari limitations

Due to the privacy restrictions of iOS (includingiOS WeChat browser and browser App) andmacOS Safari-audio and video cannot be played through code (videos marked with muted are OK), andsdk needs to synchronize whiteboard playback with audio and video playback. It will be paused and played by code, so it will cause normal playback oniOS and macOS Safari.

Solution

After initialization, call player.seekToScheduleTime (0) to touch the video and the buffer of the whiteboard, so as to ensure the development of playback

Status monitoring during playback

For details, please refer to Status Management Document and Initialization Parameters -> Playback Parameters

Proactive API

Play

player.play();

Seek

You can fast forward to a specific point in time as follows. scheduleTime is an integer (milliseconds) with >=0, it should not exceed the total time of the playback segment.

player.seekToScheduleTime(scheduleTime);

Stop

player.pause();

Observation mode

TypeScript signature

//player.d.ts
export enum ObserverMode {
    // Follow the current anchor angle, if there is no current anchor, follow the oldest user who joined the room
    Directory = "directory",
    // Free mode
    Freedom = "freedom",
}

// Same as a real-time room, once the user actively moves, it will become "freedom" mode
player.setObserverMode("directory");

Termination-release resources

After using this API, player is no longer available, if you need to play, please regenerate a new instance

player.stop();