netless-combine-player

Synchronize video and whiteboard playback projects

中文文档

Usages

import CombinePlayerFactory from "netless-combine-player";

whiteWebSdk.replayRoom({ room, roomToken })
    .then(async (player) => {
        const combinePlayerFactory = new CombinePlayerFactory(player, {
            url: "video url",
            videoDOM: videoEle.current as HTMLVideoElement,
        });
        
        const combinePlayer = combinePlayerFactory.create();
        
        combinePlayer.setOnStatusChange((status, message) => {
            console.log("status change:", status, message);
        });


        await combinePlayer.play();
        await combinePlayer.seek(1000 * 60);
        await combinePlayer.pause();
    });

API

CombinePlayerFactory

new CombinePlayerFactory(whiteboard, videoOptions, debug);

whiteboard

Generated by the replayRoom function

type: Player

videoOptions

Video configuration items

type: VideoOptions

Type Details:

videoOptions: {
    url: string; // video url address
    videoDOM?: HTMLVideoElement // Which video tag to mount to(If you do not pass in, it will automatically create one)
    videoJsOptions?: import("video.js").VideoJsPlayerOptions // video.js options(see: https://docs.videojs.com/tutorial-options.html)
}

videoJsOptions defaults is:

{
    preload: "auto"
}

debug

Whether to enable debug log

type: boolean

default is: false

Example:

whiteWebSdk.replayRoom({ room, roomToken })
    .then(player => {
        const combinePlayerFactory = new CombinePlayerFactory(player, {
            url: "video url",
            videoDOM: videoEle.current as HTMLVideoElement,
        });
    });

combinePlayerFactory.create

Create an instance of the CombinePlayer and return

const combinePlayer: CombinePlayer = combinePlayerFactory.create();

return type: CombinePlayer

combinePlayerFactory.getVideoDOM

Get the video element

This method can come in handy when the CombinePlayerFactory method is used and no videoDOM is passed in

const videoDOM: HTMLVideoElement = combinePlayerFactory.getVideoDOM();

return type: HTMLVideoElement

combinePlayer.setOnStatusChange

Register a callback function to notify when the status changes

combinePlayer.setOnStatusChange(statusOnChange);

cb

type: StatusChangeHandle

Example:

const statusOnChange = (status: PublicCombinedStatus, message: string): void => {
   console.log("status change:", status, message);
}
combinePlayer.setOnStatusChange(statusOnChange);

combinePlayer.removeStatusChange

Remove the specified status notification callback

combinePlayer.removeStatusChange(statusOnChange);

cb

type: StatusChangeHandle

Example:

const statusOnChange = (status: PublicCombinedStatus, message: string): void => {
   console.log("status change:", status, message);
}
combinePlayer.setOnStatusChange(statusOnChange);

combinePlayer.removeStatusChange(statusOnChange);

combinePlayer.removeAllStatusChange

Remove all status notification callbacks

combinePlayer.removeAllStatusChange();

combinePlayer.getStatus

Actively obtain the current status

combinePlayer.getStatus()

return type: PublicCombinedStatus

combinePlayer.play

Start synchronized playback

return type: Promise<void>

Example:

combinePlayer.play();
// or
await combinePlayer.play();

combinePlayer.pause

Pause video and whiteboard

return type: Promise<void>

Example:

combinePlayer.pause();
// or
await combinePlayer.pasue();

combinePlayer.seek

combinePlayer.seek(ms)

Synchronously jump to the specified millisecond timestamp

return type: Promise<void>

Example:

combinePlayer.seek(1000);
// or
await combinePlayer.seek(1000);