Skip to main content

Start streaming

How to stream your camera

Enable devices before connecting

You can enable your camera and microphone before calling connect method. This way, you can show user camera preview. Once connect method is called, enabled camera and microphone will start streaming to Room.

Enable your camera​

First, you have to enable your camera by calling prepareCamera method. You can open show camera preview with VideoPreviewView component

import React, { useEffect } from "react";
import {
  useCamera,
  VideoPreviewView,
} from "@fishjam-cloud/react-native-client";

export function ViewPreview() {
  const { prepareCamera } = useCamera();

  useEffect(() => {
    prepareCamera({ cameraEnabled: true });
  }, [prepareCamera]);

  return <VideoPreviewView />;
}

Listing user cameras​

To list all cameras available on device, you can use cameras property from useCamera hook. This way, you can either automatically choose camera (front/back) or allow user to select camera type.

To change camera, simply call switchCamera method.

import React, { useCallback } from "react";
import { Button } from "react-native";
import { useCamera } from "@fishjam-cloud/react-native-client";

export function FlipButton() {
  const { cameras, switchCamera, currentCamera } = useCamera();

  const onPressFlipCamera = useCallback(() => {
    // find first camera facing opposite direction than current camera
    const otherCamera = cameras.find(
      (camera) => camera.facingDirection !== currentCamera?.facingDirection,
    );
    if (otherCamera) {
      switchCamera(otherCamera.id);
    }
  }, [cameras, currentCamera?.facingDirection, switchCamera]);

  return <Button onPress={onPressFlipCamera} title="Flip Camera" />;
}

Disabling/enabling camera​

To change camera state, you use toggleCamera method.

import { Button } from "react-native";
import React from "react";
import { useCamera } from "@fishjam-cloud/react-native-client";

export function ToggleCameraButton() {
  const { isCameraOn, toggleCamera } = useCamera();

  return (
    <Button
      onPress={toggleCamera}
      title={isCameraOn ? "Disable camera" : "Enable camera"}
    />
  );
}

Enable microphone​

Microphone works similar to camera. In order to enable it, you have to call toggleMicrophone method.

import { Button } from "react-native";
import React from "react";
import { useMicrophone } from "@fishjam-cloud/react-native-client";

export function ToggleMicrophoneButton() {
  const { isMicrophoneOn, toggleMicrophone } = useMicrophone();

  return (
    <Button
      onPress={toggleMicrophone}
      title={isMicrophoneOn ? "Disable microphone" : "Enable microphone"}
    />
  );
}