Skip to main content

Getting Started with Video API in React

  • Updated

# Getting Started with Video API in React SignalWire hosts community supported tools and libraries, including the [@signalwire-community/react](https://signalwire-community.github.io/docs/react/) package, which has a lot of React components and hooks to simplify your UI programming. In this article, we will create a simple, dynamic UI for the SignalWire Video conference using the tools provided in the [@signalwire-community/react](https://www.npmjs.com/package/@signalwire-community/react) npm package. ## Setting up the Project First, to set up the codebase, we need to initialize an empty React project and install the @signalwire-community/react package. bash npm2yarn npx create-react-app videoapp cd videoapp npm install @signalwire-community/react npm run start ## Getting a Video Conference Going It is exceedingly simple to situate a fully functional video call within your React app. Simply use either the

onRoomReady={onRoomReady} /> {/* Populating controls for self */} {[audio, video, speaker].map((io) => ( ))} {/* Populating members */}
Members:
    {members.map((member) => (
  • {member.name} {member.talking && 🗣}
    • ))}
); } jsx title=App.js import { useCallback, useState } from react; import { Video, useMembers, useStatus } from @signalwire-community/react; export default function DemoVideo() { const [roomSession, setRoomSession] = useState(null); const onRoomReady = useCallback((rs) => setRoomSession(rs), []); const { self, members } = useMembers(roomSession); const { active } = useStatus(roomSession); return (
); }
A
The Video Conference element and its controls. Result of the code example above.
## Wrapping up In this guide, we created a simple video conference for the web. This will be a great starting point for later explorations. But for now this is as far as well go. Check out the Github Repo for this project [here](https://github.com/signalwire-community/examples/tree/main/react/hooks_basic). If you need to, you can also take a look at the [technical reference for @signalwire-community/react](https://signalwire-community.github.io/docs/react/). The natural continuation from here would be to follow the [Using Hooks to Track Call State](../using-hooks-to-track-call-state/index.mdx) guide. Also, we invite you to explore and consider contributing to the [SignalWire Community Repository](https://github.com/signalwire-community/react). These components, and more, come from the community.