Room Previews

---description: Getting Thumbnails for Video Roomsslug: /guides/get-thumbnails-for-your-video-callssidebar_position: 5x-custom: ported_from_readme: true---# Room PreviewsOnce you start to host multiple rooms with several people each, you might want a way to peek into the rooms. Room names only take you so far.

## Introducing Video PreviewsVideo previews are live thumbnails of the ongoing room sessions. They refresh twice every minute, and record a small slice of the room. You can use these previews to represent a room.## Turning Video Previews OnDepending on how you are creating your rooms, you need to enable video previews before you can begin using them.If you’re using the API to programmatically [create rooms](pathname:///rest/create-a-room), you need to set the enable_room_previews attribute to true when creating the new room.If you’re auto-creating a new room when requesting a room token, you need to set the enable_room_previews attribute to true .If you’re using the new programmable video communication tool, just turn on Enable Room Previews option from settings.

## Obtaining the actual previewsSignalWire makes the video previews accessible as animated .webp images. Thereare a few ways to get their URL: some might be easier or better suited based onyour application. In the following sections we review the different methods,namely REST APIs, JavaScript SDKs, and Programmable Video Conferences.### REST APIIf you have a proxy backend (as described in the [Simple Video Demo](guides/video-api/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx)), you can query the Rest API for the room sessions. You can either list all room sessions with the [GET /api/video/room_sessions](pathname:///rest/list-room-sessions) endpoint. Or if you have the id of your current room session, you can [GET /api/video/room_sessions/{id}](pathname:///rest/find-a-room-session-by-id).The URL for the preview image will be in the attribute, preview_url for the room session. If preview is turned off, therell be a null instead of the URL.### Realtime API and Video Client SDKFor Realtime API, you can add an event listener for [room.started](docs/sdks/reference/realtime-sdk/video/video-client.mdx#roomstarted) event to get new room sessions as they are created.For the Video Client SDK running in the browser, the previewUrl is available in the same [RoomSession](docs/sdks/reference/browser-sdk/video/video-roomsession.mdx) object you create to start the video call.You will find the preview image in the previewUrl attribute of the RoomSession object.### Programmable Video ConferencesIf youre using SignalWires Programmable Video Conferences to create and administrate rooms through the dashboard, you can access the Video Preview by tapping into the [setupRoomSession](guides/video-api/getting-started/video-conferences/index.mdx#technical-reference) parameter when setting up the video room in your web page.## Refreshing the previews### Vanilla HTML/JavaScriptThe previews of the room are regenerated a few times every minute. The contentchanges, but the URL remains the same. To keep them up to date in your website,you should keep on updating them using a timing mechanism like createInterval.For example, using Programmable Video Conferences with AppKit:html ### ReactIf you are using React, you can use the[@signalwire-community/react](https://signalwire-community.github.io/docs/react/)package which offers a handy component for rendering room previews. You justneed to provide the URL, and the component will take care of refreshing,caching, loading indicators, and so on.For example:jsx// npm install @signalwire-community/reactimport { RoomPreview } from @signalwire-community/react;export default function App() { // const previewUrl = ... return ( );}### React NativeIf you are using React Native, you can use the[@signalwire-community/react-native-room-preview](https://signalwire-community.github.io/docs/react-native/components/roompreview/)package which offers a handy component for rendering room previews. Just likefor the React component, you just need to provide the URL, and the componentwill take care of refreshing, caching, loading indicators, and so on.For example:jsximport React from react;import { SafeAreaView } from react-native;import { RoomPreview } from @signalwire-community/react-native-room-preview;export default function App() { return ( );}### DemoIf youd like to explore and tinker with this feature, you can do so right from the browser in [Code Sandbox](https://codesandbox.io/s/room-preview-demo-zb2urs).The demo code is also available on [GitHub](https://github.com/signalwire/guides/tree/main/Video/Room%20Preview%20Demo).