Video

This section describes how to render video.

Render video with VideoView

You can use VideoView to render video.

In the example app file, src/screens/call-screen/call-screen.tsx, the function returns VideoView in two separate code blocks: one for full screen visualization and the other for a horizontally scrolling list of remote users in a video session at the bottom of the screen.

Full screen visualization

The full screen visualization, upon initialization with video enabled, renders what others participating in a video session see.

<View style={styles.fullScreenVideo}>
    <VideoView
        user={fullScreenUser}
        sharing={fullScreenUser?.userId === sharingUser?.userId}
        onPress={() => {
            isKeyboardOpen ? toggleUI() : Keyboard.dismiss();
        }}
        fullScreen
    />
</View>

Properties passed to VideoView

The function passes the following properties to VideoView:

• user: This is a type ZoomVideoSdkUser that is instantiated via an event listener for video session creation/joining or users leaving a video session
• sharing: A boolean set to true if the current full screen user is currently the user who is sharing a screen with others
• onPress: A function that is invoked when the user taps the component
• fullScreen: A boolean prop that tells the VideoView component to render itself full screen
• videoResolution: An enum of type VideoResolution that sets the video resolution VideoResolution for the user video. You can pick from Resolution90P, Resolution180P, Resolution360P, Resolution720P, and Resolution1080P.

Horizontally scrolling list

At the bottom of the call-screen, users can see a horizontally scrolling list of other users in the call. VideoView is used in the FlatList that renders this as well:

{
  isInSession && isUserListVisible && ( <
    FlatList style = {styles.userList}
    contentContainerStyle = {
      styles.userListContentContainer
    }
    onTouchStart = {onTouchStart}
    onTouchEnd = {onTouchEnd}
    data = {users}
    renderItem = {({item}) => ( <
        VideoView user = {item}
        focused = {
          item.userId === fullScreenUser ? .userId
        }
        onPress = {
          (selectedUser) => setFullScreenUser(selectedUser)
        }
        key = {item.userId}
        />
      )
    }
    keyExtractor = {
      (item) => item.userId
    }
    fadingEdgeLength = {50}
    decelerationRate = {0}
    snapToAlignment = "center"
    snapToInterval = {100}
    showsHorizontalScrollIndicator = {false}
    horizontal /
    >
  )
}

The horizontally scrolling FlatList at the bottom of the screen renders mini video screens for all users in a session. The item passed to the user prop is from an array of remote users. Tapping a remote user's screen sets that user to the full screen user.

Use virtual background

Use ZoomVideoSdkVirtualBackgroundHelper to enable virtual backgrounds. First determine whether the device supports it using isSupportVirtualBackground. If the device supports it, add functions so people can add virtual backgrounds to the list of available backgrounds, choose a background from the list and set it, and remove backgrounds they no longer want.

Add this code to see if the user supports the virtual background feature.

const res = await zoom.virtualBackgroundHelper.isSupportVirtualBackground();

Add image

Add an image to the list of virtual background items.

zoom.virtualBackgroundHelper.addVirtualBackgroundItem(ASSET_URI);

For ASSET_URI, you can use an image bundled with your app as a virtual background or pick an image from the user's library. For example, you can obtain the URI for a bundled image in an Expo app by referencing the bundleDirectory:

import * as File from "expo-file-system";
const URI = File.bundleDirectory + `file.png`; // stored as assets/file.png
await zoom.virtualBackgroundHelper.addVirtualBackgroundItem(uri);

You can use expo-image-picker or a similar library to pick an image from the user's library and obtain the ASSET_URI:

import { launchImageLibraryAsync } from "expo-image-picker";
const image = await launchImageLibraryAsync();
zoom.virtualBackgroundHelper.addVirtualBackgroundItem(image.assets[0].uri);

Get list of images

Get the list of available virtual background items.

const itemList: ZoomVideoSdkVirtualBackgroundItem[] =
      await zoom.virtualBackgroundHelper.getVirtualBackgroundItemList();

Set image as virtual background

To set an image in the list as the virtual background, get the image name of the item and and pass it into the function.

const item: ZoomVideoSdkVirtualBackgroundItem = itemList[INDEX];
zoom.virtualBackgroundHelper.setVirtualBackgroundItem(item.imageName);

Remove image from list

Remove an image from the virtual background item list.

RNZoomVideoSdkVirtualBackgroundHelper.removeVirtualBackgroundItem(
    item.imageName,
);