# Video

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

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.

```tsx
<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](https://reactnative.dev/docs/flatlist) that renders this as well:

```tsx
{
  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`](https://marketplacefront.zoom.us/sdk/custom/reactnative/classes/native_ZoomVideoSdkVirtualBackgroundHelper.ZoomVideoSdkVirtualBackgroundHelper.html) 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.

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

### Add image

Add an image to the list of virtual background items.

```javascript
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`:

```javascript
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`:

```javascript
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.

```javascript
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.

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

### Remove image from list

Remove an image from the virtual background item list.

```javascript
RNZoomVideoSdkVirtualBackgroundHelper.removeVirtualBackgroundItem(
    item.imageName,
);
```