Package Exports

@netless/white-video-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netless/white-video-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

自定义教具接入教程

Netless 自定义教具必须基于 react 开发，以下以 react + typescript 为例来说明

一、怎么编写 netless 自定义教具

创建一个自定义教具的 react component ，下面以一个简单的加减数字组件为例。

import * as React from "react";
import {CNode, CNodeKind, PluginComponentProps} from "white-web-sdk";

export type CounterComponentProps = PluginComponentProps & {
    readonly count: number;
};

export class CounterComponent extends React.Component<CounterComponentProps> {

    public static readonly protocol: string = "test";
    public static readonly backgroundProps: Partial<CounterComponentProps> = {count: 0};

    public static willInterruptEvent(props: any, event: any): boolean {
        return false;
    }

    public render(): React.ReactNode {
        const {width, height} = this.props;
        return (
            <CNode kind={CNodeKind.HTML}>
                <div style={{width: width, height: height}} className="editor-out-box">
                    <div>count: {this.props.count}</div>
                    <div style={{pointerEvents: "auto"}}>
                        <button style={{pointerEvents: "auto"}} onClick={() => {
                            this.props.setProps(this.props.uuid, {
                                count: this.props.count + 1,
                            });
                        }}>
                            increment
                        </button>
                        <button style={{pointerEvents: "auto"}} onClick={() => {
                            this.props.setProps(this.props.uuid, {
                                count: this.props.count - 1,
                            });
                        }}>
                            decrement
                        </button>
                    </div>
                </div>
            </CNode>
        );
    }
}

1、自定义教具组件必须是 CNode 的子组件

import * as React from "react";
import {CNode, CNodeKind} from "white-web-sdk";

export class CounterComponent extends React.Component<CounterComponentProps> {
    public render(): React.ReactNode {
        return (
            <CNode kind={CNodeKind.HTML}>
                {/*  */}
            </CNode>
        );
    }
}

2、声明自定义组件的名称，作为后续插入特定自定义教具的 target。比如这个自定义教具是数字加减，所以就起名为counter

public static readonly protocol: string = "counter";

3、声明自定义组件可同步字段的初始数据，如果允许为空则可以不写。比如例子的自定义教具初始数字为 0，所以代码如下。

public static readonly backgroundProps: Partial<CounterComponentProps> = {count: 0};

4、改变和获取可同步数据，this.props.uuid是教具识别标志作为 setProps第一个参数必须写成如下方式。count是业务定义的同步字段，获取和改变方式如下。

// 改变 
this.props.setProps(this.props.uuid, {
                                count: this.props.count + 1,
                            });
// 读取
this.props.count

5、获取自定义教具额实时宽高。这对数据会根据互动对自定义教具的拉扯实时变化。

const {width, height} = this.props;

6、自定义教具编辑与锁定的设置，需要等点击交互的时候将 style={{pointerEvents: "auto"}} 不需要交互的时候 style={{pointerEvents: "none"}}

   <button style={{pointerEvents: "auto"}} onClick={() => {
                            this.props.setProps(this.props.uuid, {
                                count: this.props.count + 1,
                            });
                        }}>
                            increment
                        </button>

二、怎么在项目中植入自定义教具

1、初始化白板的时候注册上自定义教具。

plugins后面可以跟自定义教具的 Component列表

import {CounterComponent} from "../components/Counter";

whiteWebSdk = new WhiteWebSdk({ deviceType: DeviceType.Surface, plugins:[CounterComponent]});

const room = await whiteWebSdk.joinRoom(...)

2、插入自定义教具

 this.props.room.insertPlugin({
            protocal: "count", // 自定义教具的名字
            centerX: 0, // 中心点为 0，0
            centerY: 0, // 中心点为 0，0
            width: 600,
            height: 600,
            props: {
                userId: this.props.userId,） // 自定义传入属性，可以不传
            },
        });

3、初始化回放的时候注册，便于回放。

const whiteWebSdk = new WhiteWebSdk({plugins: [CounterComponentProps]});
const player = await whiteWebSdk.replayRoom(...)

三、目前缺陷

1、事件拦截，该方法目前失效。正常情况下 return true;可以将教具定在一个固定位置，不被删除、选中。可以做水印等效果。

public static willInterruptEvent(props: any, event: any): boolean {
        return true;
    }