Screenshots

You can capture high-resolution screenshots of any call participant’s video feed or screen sharing session using the useScreenshot hook.

Let’s for example take the dominant speaker in the call and create a screenshot:

import { Image } from "react-native";
import {
  useCallStateHooks,
  useScreenshot,
} from "@stream-io/video-react-native-sdk";

// get the speaker that needs to be screenshot
const { useDominantSpeaker } = useCallStateHooks();
const dominantSpeaker = useDominantSpeaker();

const { takeScreenshot } = useScreenshot();
const base64PngImage = await takeScreenshot(dominantSpeaker, "videoTrack");

// Display the screenshot
<Image
  source={{ uri: `data:image/png;base64,${base64PngImage}` }}
  resizeMode="contain"
/>;

Screenshot Options

Video Track Screenshots

To capture a participant’s video feed:

import { useScreenshot } from "@stream-io/video-react-native-sdk";

const { takeScreenshot } = useScreenshot();
const base64PngImage = await takeScreenshot(participant, "videoTrack");

To capture a participant’s screen sharing session:

import { useScreenshot } from "@stream-io/video-react-native-sdk";

const { takeScreenshot } = useScreenshot();
const base64PngImage = await takeScreenshot(participant, "screenShareTrack");

The SDK provides functionality to capture screenshots but does not include built-in methods for storing these images. If you need to save screenshots to the device’s gallery or cloud storage, you’ll need to implement this functionality separately.

Video filters

1.3.0

Screenshots

Screenshots

Screenshot Options

Video Track Screenshots

Screen Sharing Screenshots