From f211930610fd23ef1df7865def571617f003a457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5vard=20Holvik?= Date: Fri, 3 Feb 2023 11:17:11 +0100 Subject: [PATCH] Update README * Include information about how to use the new React hook * Provide links to REST API and web component documentation --- README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 60 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 45773667..103cbde0 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,75 @@ -# @whereby.com/browser-sdk +# `@whereby.com/browser-sdk` -Clientside library defining a web component to allow embedding Whereby video rooms in web applications. Only normal iframe under the hood, the web component adds syntactic sugar to make it easier to customize the Whereby experience and hook into powerful features such as listening to room events and sending commands to the room from the host application. +> This is a pre-release of the v2 version of this library, adding support for more custom integration using React hooks and plain JavaScript classes in addition to the web component for embedding. + +Whereby browser SDK is a library for seamless integration of Whereby (https://whereby.com) video calls into your web application. + +## Installation + +``` +npm install @whereby.com/browser-sdk +``` +or +``` +yarn add @whereby.com/browser-sdk +``` ## Usage -### React + a bundler (webpack, rollup, parcel etc) +> In order to make use of this functionality, you must have a Whereby account from which you can create room urls, either [manually or through our API](https://docs.whereby.com/creating-and-deleting-rooms). + +### React hooks + +The `useRoomConnection` hook provides a way to connect participants in a given room, subscribe to state updates, and perform actions on the connection, like toggling camera or microphone. + +``` +import { useRoomConnection } from “@whereby.com/browser-sdk”; + +function MyCallUX( { roomUrl, localStream }) { + const [state, actions, components ] = useRoomConnection( + "" + { + localMediaConstraints: { + audio: true, + video: true, + }, + } + ); + + const { connectionState, remoteParticipants } = state; + const { toggleCamera, toggleMicrophone } = actions; + const { VideoView } = components; + + return
+ { /* Render any UI, making use of state */ } + { remoteParticipants.map((p) => ( + + )) } +
; +} + +``` + +### Web component for embedding + +Use the `` web component to make use of Whereby's pre-built responsive UI. Refer to our [documentation](https://docs.whereby.com/embedding-rooms/in-a-web-page/using-the-whereby-embed-element) to learn which attributes are supported. + + +#### React + ``` import "@whereby.com/browser-sdk" const MyComponent = ({ roomUrl }) => { - return + return } export default MyComponent ``` -### Directly using a script tag +#### In plain HTML + ``` @@ -24,7 +77,7 @@ export default MyComponent
- +
@@ -32,4 +85,4 @@ export default MyComponent **Note** -Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks. \ No newline at end of file +Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks.