Skip to main content

Room Previews

  • Updated

- product:video - language:javascript - language:react - sdk:relaybrowser3 - sdk:relayrealtime3 - sdk:relayrealtime4 # Room Previews Once 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.

A
Room previews.
## Introducing Video Previews Video 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 On Depending 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](/rest/signalwire-rest/endpoints/video/create-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.
A
Turning room previews on from the UI.
## Obtaining the actual previews SignalWire makes the video previews accessible as animated .webp images. There are a few ways to get their URL: some might be easier or better suited based on your application. In the following sections we review the different methods, namely REST APIs, JavaScript SDKs, and Programmable Video Conferences. ### REST API If 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](/rest/signalwire-rest/endpoints/video/list-room-sessions) endpoint. Or if you have the id of your current room session, you can [GET /api/video/room_sessions/{id}](/rest/signalwire-rest/endpoints/video/get-room-session). 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 SDK #### RELAY v3 For Realtime API (Relay v3), you can add an event listener for [room.started](docs/sdks/reference/realtime-sdk/relay-v3/video/video-client.mdx#roomstarted) event to get new room sessions as they are created. #### RELAY v4 For Realtime API (Relay v4), you can add an event listener for [onRoomStarted](/sdks/reference/realtime-sdk/relay-v4/video/video-roomsession#onroomstarted) 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 Conferences If 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/JavaScript The previews of the room are regenerated a few times every minute. The content changes, 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 ### React If 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 just need 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/react import { RoomPreview } from @signalwire-community/react; export default function App() { // const previewUrl = ... return ( ); } ### React Native If 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 like for the React component, you just need to provide the URL, and the component will take care of refreshing, caching, loading indicators, and so on. For example: jsx import React from react; import { SafeAreaView } from react-native; import { RoomPreview } from @signalwire-community/react-native-room-preview; export default function App() { return ( ); } ### Demo If 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).