Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions docs/how-to/client/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -221,12 +221,10 @@ export default function App() {
## Camera and Microphone Permissions

:::info
You don't need to explicitly request permissions as they're automatically asked for when your app needs them.
You don't need to explicitly request permissions they're automatically requested when your app calls `initializeDevices()`.
:::

The SDK automatically requests camera and microphone permissions when you call `initializeDevices()`. The system permission dialog will be shown to the user if permissions haven't been granted yet.

If you need manual control over permissions, you can use the [expo-permissions](https://docs.expo.dev/versions/latest/sdk/permissions/) or [react-native-permissions](https://github.com/zoontek/react-native-permissions) libraries.
If you need manual control over when permissions are requested, see [Managing Permissions](./managing-devices#managing-permissions-mobile-only).

</TabItem>
</Tabs>
50 changes: 50 additions & 0 deletions docs/how-to/client/managing-devices.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -252,3 +252,53 @@ export function MicrophoneControl() {
);
}
```

## Managing Permissions (Mobile only)

The SDK provides built-in hooks for querying and requesting device permissions: `useCameraPermissions` and `useMicrophonePermissions` from `@fishjam-cloud/react-native-client`.

Both hooks return a `[query, request]` tuple:

- **`query()`** — checks the current permission status without prompting the user
- **`request()`** — triggers the native permission dialog and returns the resulting status

The returned `PermissionStatus` is one of: `'granted'`, `'denied'`, or `'prompt'`.

#### Usage Example

```tsx
// @noErrors: 2305
import React, { useEffect } from "react";
import {
useCameraPermissions,
useMicrophonePermissions,
useInitializeDevices,
} from "@fishjam-cloud/react-native-client";

function RoomScreen() {
const [queryCamera, requestCamera] = useCameraPermissions(); // [!code highlight]
const [queryMicrophone, requestMicrophone] = useMicrophonePermissions(); // [!code highlight]
const { initializeDevices } = useInitializeDevices(); // [!code highlight]

useEffect(() => {
const setup = async () => {
let cam = await queryCamera();
let mic = await queryMicrophone();

if (cam !== "granted") cam = await requestCamera();
if (mic !== "granted") mic = await requestMicrophone();

if (cam === "granted" && mic === "granted") {
await initializeDevices(); // [!code highlight]
}
};
setup();
}, [
queryCamera,
requestCamera,
queryMicrophone,
requestMicrophone,
initializeDevices,
]);
}
```
2 changes: 1 addition & 1 deletion packages/web-client-sdk
Submodule web-client-sdk updated 42 files
+29 −0 e2e-tests/livestream-client/.gitignore
+42 −0 e2e-tests/livestream-client/README.md
+2 −0 e2e-tests/livestream-client/config.ts
+23 −0 e2e-tests/livestream-client/index.html
+39 −0 e2e-tests/livestream-client/package.json
+58 −0 e2e-tests/livestream-client/playwright.config.ts
+61 −0 e2e-tests/livestream-client/scenarios/basic.spec.ts
+84 −0 e2e-tests/livestream-client/scenarios/utils.ts
+209 −0 e2e-tests/livestream-client/src/App.tsx
+92 −0 e2e-tests/livestream-client/src/canvasStream.ts
+14 −0 e2e-tests/livestream-client/src/main.tsx
+10 −0 e2e-tests/livestream-client/src/vite-env.d.ts
+18 −0 e2e-tests/livestream-client/tsconfig.json
+10 −0 e2e-tests/livestream-client/tsconfig.node.json
+8 −0 e2e-tests/livestream-client/vite.config.ts
+37 −8 examples/mobile-client/fishjam-chat/app/room/preview.tsx
+45 −0 examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
+4 −3 package.json
+1 −1 packages/mobile-client/package.json
+68 −0 packages/mobile-client/src/hooks/usePermissions.ts
+5 −0 packages/mobile-client/src/index.ts
+28 −0 packages/mobile-client/src/overrides/getUserMedia.ts
+2 −0 packages/mobile-client/src/webrtc-polyfill.ts
+1 −1 packages/protobufs/fishjam/agent_notifications.ts
+1 −1 packages/protobufs/fishjam/media_events/peer/peer.ts
+1 −1 packages/protobufs/fishjam/media_events/server/server.ts
+1 −1 packages/protobufs/fishjam/media_events/shared.ts
+1 −1 packages/protobufs/fishjam/notifications/shared.ts
+1 −1 packages/protobufs/fishjam/peer_notifications.ts
+1 −1 packages/protobufs/fishjam/server_notifications.ts
+1 −1 packages/protobufs/protos
+1 −1 packages/react-client/package.json
+18 −19 packages/react-client/src/devices/mediaInitializer.ts
+84 −69 packages/react-client/src/hooks/internal/useScreenshareManager.ts
+4 −1 packages/react-client/src/hooks/useLivestreamViewer.ts
+51 −40 packages/react-client/src/hooks/useSandbox.ts
+4 −2 packages/react-client/src/hooks/useStatistics.ts
+11 −13 packages/react-client/src/utils/errors.ts
+1 −1 packages/ts-client/package.json
+4 −0 packages/ts-client/src/livestream.ts
+1 −1 packages/webrtc-client/package.json
+33 −0 yarn.lock