LogoLogo
WherebyStatusCommunity
  • 📹Whereby 101
    • Create Your Video Experience
      • Get started in 3 steps
      • Embedding Whereby in a web app
        • Using Whereby's Web Component & Pre-built UI
          • Script Tags
          • With Low Code
            • Embedding in Squarespace or Wordpress
            • No code video conferencing in Bubble
        • Using Whereby's Browser SDK with React Hooks for a fully custom UI
      • Embedding Whereby in a mobile app
        • Embedding Whereby in iOS
          • Using Whereby's Native iOS SDK
        • Embedding Whereby in Android
          • Using Whereby's Native SDK
        • Using Flutter
        • Using React Native
      • Github SDK Examples
      • Meeting scheduling with Cronofy
    • Generating Room URLs
      • Name prefixes
      • Using “Create a room”
      • Using Postman
    • Customize Your Video Experience
      • During room creation
      • Using Attributes/URL Params
      • Global preferences
      • Branding elements
      • Dial-In
      • File sharing
      • Breakout Groups with Embedded
      • Waiting Rooms
    • User roles & Meeting Permissions
    • FAQ
      • Accessibility
      • Whereby Words
      • Firewall & Security
      • HIPAA compliant setup
      • Allowed Domains & Localhost
      • Whereby Embedded Feature Comparison
  • 🔍Meeting Content & Quality
    • Recording
      • Cloud Recording
      • Local Recording
    • Transcribing
      • Session Transcription
      • Recording Transcription
    • Live Captions
    • Session summaries
    • Live streaming RTMP
    • Quality Insights
      • Real-time troubleshooting
      • Using the Insights dashboard
      • Improving call quality
      • Tracking room events with Webhooks
  • 🤷End User
    • End User Support Guides
      • Supported Browsers & Devices
      • Screen Sharing Setup & Usage
      • Using Breakout Groups
      • Troubleshooting & Basics
  • 🚚Developer Guides
    • Quickly deploy Whereby to your domain
    • Tracking Customer Usage
    • Migrating from Twilio
      • Twilio JS SDK Quick Migration
      • Twilio JS SDK Direct Migration
  • 🖥️Reference
    • REST API Reference
      • /meetings
      • /insights
      • /recordings
      • /transcriptions
      • /summaries
      • /rooms
    • Web Component Reference
    • React Hooks Reference
      • Quick Start
        • Getting started with the Browser SDK
      • Guides & Tutorials
        • Migrate from version 2.x to 3
        • Grid logic
        • Custom Video Tiles with React
        • Usage with Next.js
        • How to customize the toolbar
      • API Reference
        • WherebyProvider
        • VideoView
        • VideoGrid
        • useLocalMedia
        • useRoomConnection
      • Types
    • React Native Reference
      • Quick Start
      • WherebyEmbed
    • Webhooks Reference
Powered by GitBook
On this page
  • Intro and getting started
  • What we're creating
  • Create a Participant component
  • Managing the video tile's dimensions
  • Rounding the corner
  • Same component, different look

Was this helpful?

Edit on GitHub
  1. Reference
  2. React Hooks Reference
  3. Guides & Tutorials

Custom Video Tiles with React

Discover how to customize the video tiles in a Whereby call using the Browser SDK with React hooks.

Last updated 9 months ago

Was this helpful?

Intro and getting started

One advantage of the Whereby Browser SDK is ease of customization. You can customize your video calling UI right down to the video tiles using what you already know: CSS, JavaScript, and React.

In this tutorial, you'll create a pair of video tiles. Before starting, you'll need a account. Once you have your account, create a meeting room using your account dashboard or Whereby's . You can leave the room unlocked for development purposes.

You can get started on Whereby for free with 2,000 participant minutes each month — perfect for trying our features.

This tutorial assumes:

  • You're familiar with React, Node, and either or .

  • You've already set up a React project. If not, or can get you up-and-running quickly.

  • You've read our earlier post, .

You'll need this background to understand some of the code examples here.

What we're creating

Whereby is well-suited to coaching, telehealth, remote classrooms, and virtual meetings. We'll use the Whereby Browser SDK and CSS to create video tiles for a remote 1-to-1 coaching business, BreatheCoaching. The image below illustrates what we're going to build.

Create a Participant component

Start by adding a Participant component to your project. This is the component we'll use to display each participant's video.

import React from "react";

const Participant = (props) => {

  /*
   * In the parent component: 
   * <Participant {...localParticipant} {...components} />
   */
  const {
    VideoView,
    stream
  } = props;

  return (
    <div>
      {stream && 
        <VideoView mirror stream={stream} />
      }
    </div>
  )
}

export default Participant;

At this point, the video tile should fill your entire browser, as in Figure 2. By default, the VideoView component expands to fit the width of its container. Let's constrain its width with some CSS.

Managing the video tile's dimensions

Add a Participant.css file to your project. Import it into the Participant component file as shown below.

import React from "react";
import 'Participant.css';

Add a className attribute with a value of participant to the containing div element. You'll use this attribute value as the selector in your CSS.

//…

return (
  <div className="participant">
    {stream && 
      <VideoView stream={stream} />
     }
  </div>
)
:root {
  --localParticipantWidth: 200px;
}

.participant {
  aspect-ratio: 1;
  width: var(--localParticipantWidth);
}

Now our video tile is 200 pixels wide by 200 pixels tall. Our video source however, is only 112.5 pixels tall (Figure 3).

.participant > video {
  object-fit: cover;
}

Using object-fit: cover causes the browser to scale the video source so that it fills the container, but maintains its aspect ratio. Your video tile should now resemble Figure 4.

Rounding the corner

Our design also calls for rounded video tile corners. Add a border-radius declaration to the .participant rule set, along with overflow: hidden. The latter rule ensures that the corners of the video don't extend past its container.

.participant {
  aspect-ratio: 1;
  width: var(--localParticipantWidth);
  border-radius: 25%;
  overflow: hidden;
}

Your video tile should now resemble Figure 5.

Although the local and remote participant tiles are different sizes, there's a lot of overlap in their appearance. Instead of creating a separate component, let's add some code to support a remote participant variation.

Same component, different look

Each participant object contains a property named isLocalParticipant. For remote participants, the value of this property is always false. Use this property to conditionally add a remote class to the remote participant tile. First, update the destructuring assignment to extract isLocalParticipant from props.

 const {
  VideoView,
  stream,
  isLocalParticipant
} = props;

Then conditionally add a remote class to the containing div.

return (
  <div className={`participant ${ !isLocalParticipant ? '' : 'remote'}`>
    {stream && 
      <VideoView stream={stream} />
     }
  </div>
)
:root {
  --localParticipantWidth: 200px;
  --remoteParticipantWidth: 400px; /* Add a --remoteParticipantWidth custom property */
}

//…

.remote {
  width: var(--remoteParticipantWidth);
  border: 1.2rem solid transparent;
  box-shadow: 0 0 2rem 0.5rem #fff;
}

Your remote participant tile should look a bit like Figure 6.

Put it together with the rest of our UI design, and you can launch BreatheCoaching in no time.

Participant expects a VideoView component prop from its parent. VideoView requires also a stream prop value — the stream property of either a or object. Pass the stream prop of Participant along to VideoView, as shown above.

Since the design specs for BreatheCoaching require square video tiles with rounded corners, set the width property for the .participant class. Use the CSS property to enforce square dimensions.

Videos maintain their aspect ratio regardless of the dimensions of the video element or its containing ancestors. To resolve this, use the CSS property and the cover value.

Note: Using the ternary operator is fine for tutorials. For production-ready projects, consider the package instead.

Finally, add a .remote rule set to Participants.css. Override the width property value from .participant and add a transparent border. Use the to add the halo.

Note: You can also use the property and the drop-shadow() filter to create the halo effect.

Written by

🖥️
LocalParticipant
RemoteParticipant
aspect-ratio
object-fit
classnames
box-shadow property
filter
Tiffany Brown
Whereby Embedded
REST API
npm
Yarn
Vite
Parcel
How To Add Video Conferencing to Your Web App Using the Whereby Browser SDK
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6