@whereby.com/browser-sdk 2.0.0-alpha → 2.0.0-alpha10

package/README.md

@@ -20,6 +20,42 @@ yarn add @whereby.com/browser-sdk
 
 ### React hooks
 
+#### useLocalMedia
+The `useLocalMedia` hook enables preview and selection of local devices (camera & microphone) prior to establishing a connection within a Whereby room. Use this hook to build rich pre-call
+experiences, allowing end users to confirm their device selection up-front. This hook works seamlessly with the `useRoomConnection` hook described below.
+
+```
+import { useLocalMedia, VideoView } from “@whereby.com/browser-sdk”;
+
+function MyPreCallUX() {
+    const localMedia = useLocalMedia({ audio: false, video: true });
+
+    const { currentCameraDeviceId, cameraDevices, localStream } = localMedia.state;
+    const { setCameraDevice, toggleCameraEnabled } = localMedia.actions;
+    const { VideoView } = components;
+
+    return <div className="preCallView">
+        { /* Render any UI, making use of state */ }
+        { cameraDevices.map((d) => (
+            <p
+                key={d.deviceId}
+                onClick={() => {
+                    if (d.deviceId !== currentCameraDeviceId) {
+                        setCameraDevice(d.deviceId);
+                    }
+                }}
+            >
+                {d.label}
+            </p>
+        )) }
+        <VideoView muted stream={localStream} />
+    </div>;
+}
+
+```
+
+
+#### useRoomConnection
 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.
 
 ```
@@ -29,10 +65,11 @@ function MyCallUX( { roomUrl, localStream }) {
     const [state, actions, components ] = useRoomConnection(
         "<room_url>"
         {
-                localMediaConstraints: {
+            localMedia: null, // Supply localMedia from `useLocalMedia` hook, or constraints below
+            localMediaConstraints: {
                 audio: true,
                 video: true,
-            },
+            }
         }
     );