Build video calls

// <button id="mute" type="button" disabled>Mute</button>
// <button id="camera" type="button" disabled>Stop video</button>
import { switchMap } from "rxjs";
const muteButton = document.querySelector("#mute");
const cameraButton = document.querySelector("#camera");
// Inside joinButton.onclick, after dial() resolves:
muteButton.onclick = () => void call.self?.toggleMute();
cameraButton.onclick = () => void call.self?.toggleMuteVideo();
call.self$.pipe(switchMap((self) => self.audioMuted$)).subscribe((muted) => {
  muteButton.disabled = false;
  muteButton.textContent = muted ? "Unmute" : "Mute";
});
call.self$.pipe(switchMap((self) => self.videoMuted$)).subscribe((muted) => {
  cameraButton.disabled = false;
  cameraButton.textContent = muted ? "Start video" : "Stop video";
});

// <select id="cameras"></select>
const cameraPicker = document.querySelector("#cameras");
// Inside the if (!client) block, after the client is created:
client.videoInputDevices$.subscribe((cameras) => {
  cameraPicker.replaceChildren(
    ...cameras.map((camera) => new Option(camera.label || "Camera", camera.deviceId)),
  );
});
cameraPicker.onchange = () => {
  const camera = client?.videoInputDevices.find((device) => device.deviceId === cameraPicker.value);
  if (camera) client?.selectVideoInputDevice(camera);
};

// <button id="share" type="button" disabled>Share screen</button>
import { switchMap } from "rxjs";
const shareButton = document.querySelector("#share");
// Inside joinButton.onclick, after dial() resolves:
shareButton.onclick = async () => {
  const self = call.self;
  if (!self) return;
  try {
    if (self.screenShareStatus === "started") await self.stopScreenShare();
    else if (self.screenShareStatus === "none") await self.startScreenShare();
  } catch (error) {
    // Closing the screen picker rejects with NotAllowedError. The call keeps running.
    if (!(error instanceof DOMException && error.name === "NotAllowedError")) {
      console.error(error);
    }
  }
};
call.self$.pipe(switchMap((self) => self.screenShareStatus$)).subscribe((status) => {
  shareButton.disabled = status === "starting" || status === "stopping";
  shareButton.textContent = status === "started" ? "Stop sharing" : "Share screen";
});

// <select id="layouts"></select>
const layoutPicker = document.querySelector("#layouts");
// Inside joinButton.onclick, after dial() resolves:
call.layouts$.subscribe((names) => {
  layoutPicker.replaceChildren(...names.map((name) => new Option(name, name)));
  layoutPicker.value = call.layout ?? "";
});
call.layout$.subscribe((name) => (layoutPicker.value = name));
layoutPicker.onchange = () => {
  void call.setLayout(layoutPicker.value, {}).catch(console.error);
};

// <ul id="participants"></ul>
const participantList = document.querySelector("#participants");
// Inside joinButton.onclick, after dial() resolves:
call.participants$.subscribe((participants) => {
  participantList.replaceChildren(
    ...participants.map((participant) => {
      const item = document.createElement("li");
      const muted = participant.audioMuted ? " (muted)" : "";
      const videoOff = participant.videoMuted ? " (video off)" : "";
      item.textContent = `${participant.name ?? "Guest"}${muted}${videoOff}`;
      return item;
    }),
  );
});

const statusLine = document.querySelector("#status");
// Inside joinButton.onclick, after dial() resolves:
call.status$.subscribe((status) => {
  statusLine.textContent = `Call: ${status}`;
  if (status === "disconnected" || status === "failed" || status === "destroyed") {
    localVideo.srcObject = null;
    roomVideo.srcObject = null;
    leaveButton.disabled = true;
    joinButton.disabled = false;
  }
});

// Install: npm install @signalwire/js@4.0.0-rc.5 rxjs@7.8.2
// Load as a module script on an HTTPS or localhost page with these elements:
// <input id="token" type="password" placeholder="Guest token">
// <button id="join" type="button">Join</button>
// <button id="leave" type="button" disabled>Leave</button>
// <button id="mute" type="button" disabled>Mute</button>
// <button id="camera" type="button" disabled>Stop video</button>
// <button id="share" type="button" disabled>Share screen</button>
// <select id="cameras"></select>
// <select id="layouts"></select>
// <p id="status">Idle</p>
// <video id="local-video" autoplay playsinline muted></video>
// <video id="room-video" autoplay playsinline></video>
// <ul id="participants"></ul>
// Paste a guest token issued by your server for this room.
import { SignalWire, StaticCredentialProvider } from "@signalwire/js";
import { switchMap } from "rxjs";
const tokenInput = document.querySelector("#token");
const joinButton = document.querySelector("#join");
const leaveButton = document.querySelector("#leave");
const muteButton = document.querySelector("#mute");
const cameraButton = document.querySelector("#camera");
const shareButton = document.querySelector("#share");
const cameraPicker = document.querySelector("#cameras");
const layoutPicker = document.querySelector("#layouts");
const statusLine = document.querySelector("#status");
const localVideo = document.querySelector("#local-video");
const roomVideo = document.querySelector("#room-video");
const participantList = document.querySelector("#participants");
const callButtons = [leaveButton, muteButton, cameraButton, shareButton];
let client;
joinButton.onclick = async () => {
  joinButton.disabled = true;
  try {
    if (!client) {
      client = new SignalWire(new StaticCredentialProvider({
        token: tokenInput.value.trim(),
      }));
      client.videoInputDevices$.subscribe((cameras) => {
        cameraPicker.replaceChildren(
          ...cameras.map((camera) => new Option(camera.label || "Camera", camera.deviceId)),
        );
      });
      cameraPicker.onchange = () => {
        const camera = client?.videoInputDevices.find((device) => device.deviceId === cameraPicker.value);
        if (camera) client?.selectVideoInputDevice(camera);
      };
    }
    const call = await client.dial("<YOUR_ROOM_ADDRESS>", {
      audio: true,
      video: true,
      receiveVideo: true,
    });
    call.localStream$.subscribe((stream) => (localVideo.srcObject = stream));
    call.remoteStream$.subscribe((stream) => (roomVideo.srcObject = stream));
    leaveButton.disabled = false;
    leaveButton.onclick = () => {
      void call.hangup().catch(console.error);
    };
    // Microphone and camera
    muteButton.onclick = () => void call.self?.toggleMute();
    cameraButton.onclick = () => void call.self?.toggleMuteVideo();
    call.self$.pipe(switchMap((self) => self.audioMuted$)).subscribe((muted) => {
      muteButton.disabled = false;
      muteButton.textContent = muted ? "Unmute" : "Mute";
    });
    call.self$.pipe(switchMap((self) => self.videoMuted$)).subscribe((muted) => {
      cameraButton.disabled = false;
      cameraButton.textContent = muted ? "Start video" : "Stop video";
    });
    // Screen sharing
    shareButton.onclick = async () => {
      const self = call.self;
      if (!self) return;
      try {
        if (self.screenShareStatus === "started") await self.stopScreenShare();
        else if (self.screenShareStatus === "none") await self.startScreenShare();
      } catch (error) {
        // Closing the screen picker rejects with NotAllowedError. The call keeps running.
        if (!(error instanceof DOMException && error.name === "NotAllowedError")) {
          console.error(error);
        }
      }
    };
    call.self$.pipe(switchMap((self) => self.screenShareStatus$)).subscribe((status) => {
      shareButton.disabled = status === "starting" || status === "stopping";
      shareButton.textContent = status === "started" ? "Stop sharing" : "Share screen";
    });
    // Layout
    call.layouts$.subscribe((names) => {
      layoutPicker.replaceChildren(...names.map((name) => new Option(name, name)));
      layoutPicker.value = call.layout ?? "";
    });
    call.layout$.subscribe((name) => (layoutPicker.value = name));
    layoutPicker.onchange = () => {
      void call.setLayout(layoutPicker.value, {}).catch(console.error);
    };
    // Participants
    call.participants$.subscribe((participants) => {
      participantList.replaceChildren(
        ...participants.map((participant) => {
          const item = document.createElement("li");
          const muted = participant.audioMuted ? " (muted)" : "";
          const videoOff = participant.videoMuted ? " (video off)" : "";
          item.textContent = `${participant.name ?? "Guest"}${muted}${videoOff}`;
          return item;
        }),
      );
    });
    // Status and cleanup
    call.status$.subscribe((status) => {
      statusLine.textContent = `Call: ${status}`;
      if (status === "disconnected" || status === "failed" || status === "destroyed") {
        localVideo.srcObject = null;
        roomVideo.srcObject = null;
        participantList.replaceChildren();
        for (const button of callButtons) button.disabled = true;
        joinButton.disabled = false;
      }
    });
  } catch (error) {
    joinButton.disabled = false;
    console.error(error);
  }
};