Skip to main content

Getting Started with Video API in React

  • Updated

---slug: /guides/video/getting-started-video-api-with-reactsidebar_label: Getting Started - Reactsidebar_position: 1next: using-hooks-to-track-ui---import Tabs from @theme/Tabs;import TabItem from @theme/TabItem;# Getting Started with Video API in ReactSignalWire 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 inthe [@signalwire-community/react](https://www.npmjs.com/package/@signalwire-community/react) npm package.## Setting up the ProjectFirst, to set up the codebase, we need to initialize an empty React project and install the @signalwire-community/react package.bash npm2yarnnpx create-react-app videoappcd videoappnpm install @signalwire-community/reactnpm run start## Getting a Video Conference GoingIt is exceedingly simple to situate a fully functional video call within your React app. Simply useeither 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.jsimport { 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 (
);}
The Video Conference element and its controls. Result of the code example above.
## Wrapping upIn this guide, we created a simple video conference for the web. This will be a great starting pointfor 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.