-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: web whiteboard docs (#2319) * feat: whiteboard docs * fix: link to whiteboard * Update whiteboard.mdx * Update whiteboard.mdx * Update collaborative-whiteboard.mdx --------- Co-authored-by: ygit <[email protected]> * Android API reference docs PR (#2323) Updating the API reference for SDK version * Android release 2.9.63 (#2324) * added changes * Update release-notes.mdx * Update release-notes.mdx --------- Co-authored-by: Eswar Prasad Clinton. A <[email protected]> Co-authored-by: ygit <[email protected]> Co-authored-by: Mantra Manan Saraswat <[email protected]> Co-authored-by: Aniket Kadam <[email protected]> Co-authored-by: Gulzar <[email protected]>
- Loading branch information
6 people
authored
Jul 9, 2024
1 parent
c4d99b9
commit 590ef13
Showing
32 changed files
with
685 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 2 additions & 4 deletions
6
...javascript/v2/how-to-guides/enable-content-sharing/collaborative-whiteboard.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
144 changes: 144 additions & 0 deletions
144
docs/javascript/v2/how-to-guides/extend-capabilities/whiteboard.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| --- | ||
| title: Whiteboard | ||
| nav: 1.52 | ||
| --- | ||
|
|
||
| The 100ms SDK provides robust APIs for integrating whiteboard collaboration into your conferencing sessions. Participants can engage in real-time by drawing, writing, and collaborating on a shared digital whiteboard. This documentation outlines how to implement the start and stop functionality for a whiteboard and display it within an iframe or embed it as a React component. | ||
|
|
||
| ## Requirements | ||
|
|
||
| - React 18 or higher | ||
| - Webpack 5 or higher if you're using it to bundle your app | ||
| - User roles must be configured to enable whiteboard functionality via the 100ms dashboard for starting or viewing the whiteboard. [Refer here](/get-started/v2/get-started/features/whiteboard#enabling-and-configuring-the-whiteboard) | ||
| - If you're on React and are not using the `@100mslive/roomkit-react` package, install the `@100mslive/hms-whiteboard` package. | ||
| ```bash | ||
| yarn add @100mslive/hms-whiteboard | ||
| ``` | ||
|
|
||
| ## Opening and Closing the Whiteboard | ||
|
|
||
| <Note type="warning" title="How to know if a role is allowed to open/close whiteboard"> | ||
| Javascript users can use the `selectPermissions` selector which fetches the whiteboard specific permissions array from the local peer's role permissions. | ||
|
|
||
| React users can check for the `toggle` function returned by the utility hook `useWhiteboard`. | ||
|
|
||
| </Note> | ||
|
|
||
| <Tabs id="toggle" items={['JavaScript', 'React']} /> | ||
|
|
||
| <Tab id='toggle-0'> | ||
|
|
||
| ```js | ||
| 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; | ||
| ``` | ||
| </Tab> | ||
| <Tab id='toggle-1'> | ||
| ```jsx | ||
| 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> | ||
| ); | ||
| }; | ||
| ``` | ||
| </Tab> | ||
| ## Displaying the Collaborative Whiteboard | ||
| You can display the whiteboard when it's open by embedding it as an iframe or as a React component for more fine grained controls, if your app is built using React. | ||
| <Tabs id="display" items={['JavaScript', 'React']} /> | ||
| <Tab id='display-0'> | ||
| ```js | ||
| 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); | ||
| ``` | ||
| </Tab> | ||
| <Tab id='display-1'> | ||
| ```jsx | ||
| 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> | ||
| ); | ||
| }; | ||
| ``` | ||
| </Tab> | ||
| <Note type="warning" title="CSS Styling required for Whiteboard"> | ||
| Whiteboard related CSS needs to be imported in your app's top level CSS files using `@import '@100mslive/hms-whiteboard/index.css';`(recommended) or in one of your top level JS file using `import '@100mslive/hms-whiteboard/index.css';`. | ||
| Note that if you're using `@100mslive/roomkit-react` you'll need to import `@100mslive/roomkit-react/index.css` accordingly. | ||
| </Note> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
.../api-reference/android/v2/lib/live.hms.video.factories/-safe-variable/-safe-variable.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8"> | ||
| <title>SafeVariable</title> | ||
| <link href="../../../images/logo-icon.svg" rel="icon" type="image/svg"><script>var pathToRoot = "../../../";</script> <script>const storage = localStorage.getItem("dokka-dark-mode") | ||
| if (storage == null) { | ||
| const osDarkSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches | ||
| if (osDarkSchemePreferred === true) { | ||
| document.getElementsByTagName("html")[0].classList.add("theme-dark") | ||
| } | ||
| } else { | ||
| const savedDarkMode = JSON.parse(storage) | ||
| if(savedDarkMode === true) { | ||
| document.getElementsByTagName("html")[0].classList.add("theme-dark") | ||
| } | ||
| } | ||
| </script> | ||
| <script type="text/javascript" src="../../../scripts/sourceset_dependencies.js" async></script> | ||
| <link href="../../../styles/style.css" rel="Stylesheet"> | ||
| <link href="../../../styles/jetbrains-mono.css" rel="Stylesheet"> | ||
| <link href="../../../styles/main.css" rel="Stylesheet"> | ||
| <link href="../../../styles/prism.css" rel="Stylesheet"> | ||
| <link href="../../../styles/logo-styles.css" rel="Stylesheet"> | ||
| <script type="text/javascript" src="../../../scripts/clipboard.js" async></script> | ||
| <script type="text/javascript" src="../../../scripts/navigation-loader.js" async></script> | ||
| <script type="text/javascript" src="../../../scripts/platform-content-handler.js" async></script> | ||
| <script type="text/javascript" src="../../../scripts/main.js" defer></script> | ||
| <script type="text/javascript" src="../../../scripts/prism.js" async></script> | ||
| <script type="text/javascript" src="../../../scripts/symbol-parameters-wrapper_deferred.js" defer></script></head> | ||
| <body> | ||
| <div class="navigation-wrapper" id="navigation-wrapper"> | ||
| <div id="leftToggler"><span class="icon-toggler"></span></div> | ||
| <div class="library-name"> | ||
| <a href="../../../index.html"> | ||
| <span>Android SDK 100ms</span> </a> </div> | ||
| <div> | ||
| </div> | ||
| <div class="pull-right d-flex"> | ||
| <button id="theme-toggle-button"><span id="theme-toggle"></span></button> | ||
| <div id="searchBar"></div> | ||
| </div> | ||
| </div> | ||
| <div id="container"> | ||
| <div id="leftColumn"> | ||
| <div id="sideMenu"></div> | ||
| </div> | ||
| <div id="main"> | ||
| <div class="main-content" id="content" pageids="lib::live.hms.video.factories/SafeVariable/SafeVariable/#/PointingToDeclaration//1464059712"> | ||
| <div class="breadcrumbs"><a href="../../index.html">lib</a><span class="delimiter">/</span><a href="../index.html">live.hms.video.factories</a><span class="delimiter">/</span><a href="index.html">SafeVariable</a><span class="delimiter">/</span><span class="current">SafeVariable</span></div> | ||
| <div class="cover "> | ||
| <h1 class="cover"><span>Safe</span><wbr><span><span>Variable</span></span></h1> | ||
| </div> | ||
| <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":lib:dokkaHtmlPartial/release"><div class="symbol monospace"><span class="token keyword"></span><span class="token keyword">fun </span><a href="-safe-variable.html"><span class="token function">SafeVariable</span></a><span class="token punctuation">(</span><span class="token punctuation">)</span></div></div></div> | ||
| </div> | ||
| <div class="footer"> | ||
| <span class="go-to-top-icon"><a href="#content" id="go-to-top-link"></a></span><span>© 2024 Copyright</span><span class="pull-right"><span>Generated by </span><a href="https://github.com/Kotlin/dokka"><span>dokka</span><span class="padded-icon"></span></a></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body></html> | ||
|
|
Oops, something went wrong.