Sharing Screen

Just like the other actions in the preceding sections, allowing users to share screen is as simple as calling a method from the SignalWire Video SDK. In this part, we will create a component , which will enable the user's screen to be shared in the video stream.

To start sharing the screen, you need to call the RoomSession.startScreenShare() method. This will make the browser prompt your user with the browser's screen share dialog like the one shown below.

After the user selects which screen or tab to share, SignalWire Video SDK will automatically add a new video feed with your screen's contents to the video call.

RoomSession.startScreenShare() asynchronously returns a RoomSessionScreenShare object.
To stop the video feed, simply call the RoomSessionScreenShare.leave() method.

Toggle screen share in React

To put it all together, this is how you would toggle screen share with a button:

import React, { useState } from "react";
import Button from "react-bootstrap/Button";

export default function ScreenShareButton({ room }) {
  let [screenShareObj, setScreenShareObj] = useState();
  return (
    <Button
      onClick={async () => {
        if (room === undefined || room === null) {
          setScreenShareObj(undefined);
          return;
        }
        if (screenShareObj === undefined) {
          let sc;
          try {
            sc = await room.startScreenShare();
          } catch (e) {
            setScreenShareObj(undefined);
            console.log(e);
            return;
          }
          setScreenShareObj(sc);
        } else {
          try {
            screenShareObj.leave();
          } catch (e) {
            console.log(e);
          }
          setScreenShareObj(undefined);
        }
      }}
    >
      {screenShareObj === undefined
        ? "Share Screen"
        : "Turn off Screen Sharing"}
    </Button>
  );
}

This button will be contained in the component we created in the previous section. The room prop it requires will be given is the instance of the room that is currently being used. To add to the previous part:

import React, { useCallback, useState } from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import Video from "../components/Video";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import NavBar from "react-bootstrap/Navbar";
import ScreenShareButton from "../components/ShareScreenButton";

export default function InCall({ roomDetails }) {
  let [cameras, setCameras] = useState([]);
  let [microphones, setMicrophones] = useState([]);
  let [speakers, setSpeakers] = useState([]);
  let [layouts, setLayouts] = useState([]);
  let [curLayout, setCurLayout] = useState();

  let [room, setRoom] = useState({});

  let logEvent = useCallback((msg, title, variant) => {
    // a simple event logger that we will later replace
    // for a bootstrap toast
    console.log(msg, title, variant);
  }, []);

  let onRoomInit = useCallback(
    (room, layouts, cameras, microphones, speakers) => {
      setCameras(cameras);
      setMicrophones(microphones);
      setSpeakers(speakers);
      setRoom(room);
      setLayouts(layouts);
    },
    []
  );

  let onRoomUpdate = useCallback((updatedValues) => {
    if (updatedValues.cameras !== undefined) setCameras(updatedValues.cameras);
    if (updatedValues.speakers !== undefined)
      setSpeakers(updatedValues.speakers);
    if (updatedValues.microphones !== undefined)
      setMicrophones(updatedValues.microphones);
    if (updatedValues.layout !== undefined)
      setCurLayout(updatedValues.layout);
  }, []);

  function DeviceSelect({
    devices = [],
    onChange = (value) => {},
    deviceName = "device",
  }) {
    return (
      <select
        onChange={async (e) => {
          if (e.target.value !== "") onChange(e.target.value);
        }}
        defaultValue=""
      >
        <option value="" disabled hidden>
          Change {deviceName}
        </option>
        {devices.map((device) => (
          <option key={device.deviceId} value={device.deviceId}>
            {device.label}
          </option>
        ))}
      </select>
    );
  }

  return (
    <>
      <Container fluid>
        <Row className="mt-3">
          <Col
            style={{ backgroundColor: "black" }}
            className="justify-content-md-center"
          >
            {roomDetails.mod ? "Moderator" : "normal uwer"}
            <Video
              onRoomInit={onRoomInit}
              onRoomUpdate={onRoomUpdate}
              joinDetails={roomDetails}
              width={800}
              eventLogger={logEvent}
            />
          </Col>
        </Row>
      </Container>

      <NavBar fixed="bottom">
        <Container fluid className="justify-content-md-center">
          <Row>
          
           <Col md="auto">
              <select
                value={curLayout}
                onChange={(e) => room.setLayout({ name: e.target.value })}
              >
                <option value="" disabled hidden>
                  Select Layout
                </option>
                {layouts !== undefined &&
                  layouts.map((l) => (
                    <option key={l} value={l}>
                      {l}
                    </option>
                  ))}
              </select>
            </Col>

            <Col md="auto">
              <DeviceSelect
                onChange={(id) => {
                  room.updateCamera({ deviceId: id });
                }}
                deviceName="Camera"
                devices={cameras}
              />
            </Col>

            <Col md="auto">
              <DeviceSelect
                onChange={(id) => {
                  room.updateMicrophone({ deviceId: id });
                }}
                deviceName="Microphone"
                devices={microphones}
              />
            </Col>

            <Col md="auto">
              <DeviceSelect
                onChange={(id) => {
                  room.updateSpeaker({ deviceId: id });
                }}
                deviceName="Speaker"
                devices={speakers}
              />
            </Col>
            
                        // Use the Screen Share button
            <Col md="auto">
              <ScreenShareButton room={room} />
            </Col>

            <Col md="auto">
              <Button
                onClick={async () => {
                  await room.leave();
                }}
                variant="danger"
              >
                Leave
              </Button>
            </Col>
          </Row>
        </Container>
      </NavBar>
    </>
  );
}

Did this page help you?