Screen Sharing and Camera Feed

Runway Characters can take a live webcam or screen share from your app. The Character sees that feed over the Session, understands what is visible, and responds in real time through the Runway API — useful for demos, tutoring, games, and design feedback.

The overview below shows how Runway Characters work in real time, including seeing the user’s webcam and shared screen.

If you build with the React SDK (@runwayml/avatars-react), webcam and screen sharing are built into AvatarCall, ControlBar, and related components. For the full list of props, hooks (such as useLocalMedia), and edge cases, see Webcam & screen sharing in the React SDK README.

Sharing video opens up visual workflows: identify objects on a desk, run trivia with physical cards (example), get guidance while you play (example), walk through slides, or ask for reactions to a layout in your design tool.

Webcam

The webcam is on by default when you use the default UI. The video prop controls whether the camera starts when the Session connects; <UserVideo> renders the local preview.

<AvatarCall avatarId="music-superstar" connectUrl="/api/avatar/connect">
  <AvatarVideo />
  <UserVideo />
  <ControlBar />
</AvatarCall>

To join without sending camera video, set video={false}:

<AvatarCall avatarId="music-superstar" connectUrl="/api/avatar/connect" video={false} />

Pass showScreenShare to ControlBar so users can start sharing from the built-in controls, and add <ScreenShareVideo> to show the shared content in your layout.

<AvatarCall avatarId="music-superstar" connectUrl="/api/avatar/connect">
  <AvatarVideo />
  <ScreenShareVideo />
  <ControlBar showScreenShare />
</AvatarCall>

While sharing, the default ControlBar shows a banner with a quick Stop action.

If you want the browser’s screen-share permission prompt before the call connects, capture a MediaStream first and pass it as initialScreenStream:

import { useState } from 'react';
import { AvatarCall, AvatarVideo, ControlBar, ScreenShareVideo } from '@runwayml/avatars-react';

function ScreenShareCall() {
  const [stream, setStream] = useState<MediaStream | null>(null);

  async function startWithScreenShare() {
    const mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    setStream(mediaStream);
  }

  if (!stream) {
    return <button onClick={startWithScreenShare}>Share screen and start call</button>;
  }

  return (
    <AvatarCall
      avatarId="music-superstar"
      connectUrl="/api/avatar/connect"
      initialScreenStream={stream}
    >
      <AvatarVideo />
      <ScreenShareVideo />
      <ControlBar showScreenShare />
    </AvatarCall>
  );
}

For programmatic toggles (camera, mic, screen share) inside a Session, use the useLocalMedia hook — documented in the same README section.

Next steps

Building your integration Session creation, server routes, and wiring AvatarCall in a real app.

React SDK on GitHub Examples, hooks reference, and changelog for @runwayml/avatars-react.

Screen Sharing and Camera Feed

Webcam and screen sharing

Webcam

Screen sharing

Start sharing before the Session connects

Next steps