100米白板

100ms SDK提供强大的API,用于将白板协作纳入您的会话. 与会者可以通过绘画、写作和在共享数字白板上合作进行实时参与。 该文件概述了如何实施白板的起动和停止功能,并将它显示在iframe内或嵌入为回放组件.

所需资源

• 反应 18 或以上
• 如果你是用它来捆绑你的应用软件 5 或更多
• 用户角色必须配置,以便通过100ms仪表板来启用白板功能来启动或查看白板. 参考这里。 。 。 .
• 如果你在反应中,没有使用 @100mslive/roomkit-react 软件包,安装 @100mslive/hms-whiteboard 软件包.

yarn add @100mslive/hms-whiteboard

打开并关闭白板

JavaScript 用户可以使用 selectPermissions 从本地对等方的角色权限获取白板特定权限数组的选择器 .

反应用户可以检查 toggle 函数由工具钩返回 useWhiteboard。 。 。 .

// Vanilla JavaScript Example
import { selectPermissions, selectWhiteboard } from '@100mslive/hms-video-store';

const permissions = hmsStore.getState(selectPermissions)?.whiteboard; // Array<'read' | 'write' | 'admin'>
const isAdmin = !!permissions?.includes('admin');
const whiteboard = hmsStore.getState(selectWhiteboard);
const isOwner = whiteboard?.owner === localPeerUserId;

const toggle = async () => {
    if (!isAdmin) {
        return;
    }

    if (whiteboard?.open) {
        isOwner && (await actions.interactivityCenter.whiteboard.close());
    } else {
        await actions.interactivityCenter.whiteboard.open();
    }
};

// usage
const toggleButton = document.getElementById('toggle-whiteboard');
// non-admin users cannot toggle the whiteboard
toggleButton.disabled = !isAdmin;
toggleButton.onclick = toggle;

// React Example
import React from 'react';
import { useWhiteboard } from '@100mslive/react-sdk';

export const WhiteboardToggle = () => {
    const { toggle, open, isOwner } = useWhiteboard();

    // non-admin users cannot toggle the whiteboard
    if (!toggle) {
        return null;
    }

    return (
        <Button onClick={toggle} active={!open} disabled={open && !isOwner}>
            Toggle Whitboard
        </Button>
    );
};

显示协作白板

您可以在打开时显示白板, 将它嵌入为iframe或作为反应组件, 用于更精细的控件, 如果您的应用是使用 React 构建的 .

// Vanilla JavaScript Example
import { selectWhiteboard } from '@100mslive/hms-video-store';

const whiteboard = hmsStore.subscribe((whiteboard) => {
    if (whiteboard?.open && whiteboard?.url) {
        const whiteboardIframe = document.createElement('iframe');
        whiteboardIframe.src = whiteboard.url;
    } else {
        const whiteboardIframe = document.getElementById('whiteboard');
        whiteboardIframe?.remove();
    }
}, selectWhiteboard);

// React Example
import React from 'react';
import { useWhiteboard } from '@100mslive/react-sdk';
import { Whiteboard } from '@100mslive/hms-whiteboard';
import '@100mslive/hms-whiteboard/index.css';

const WhiteboardEmbed = () => {
    const { token, endpoint } = useWhiteboard();

    if (!token) {
        return null;
    }

    return (
        <div style={{ width: '100%', height: '650px' }}>
            <Whiteboard
                token={token}
                endpoint={`https://${endpoint}`}
                onMount={({ store, editor }) => {
                    console.log(store, editor);
                }}
            />
        </div>
    );
};

白板相关的 CSS 需要导入到您的应用程序的顶级 CSS 文件 @import '@100mslive/hms-whiteboard/index.css';(建议)或者在您的顶级JS文件中使用 import '@100mslive/hms-whiteboard/index.css';。 。 。 .

注意,如果你使用 @100mslive/roomkit-react 您需要导入 @100mslive/roomkit-react/index.css 相应.