entrypoint.tsx

const ownMediaStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
}).catch(console.error);
const ownVideo = <video autoplay src={ownMediaStream} /> as HTMLVideoElement;
const remoteVideo = <video autoplay /> as HTMLVideoElement;

const remoteEndpoint = eternal ?? $(""); // store the remote endpoint persistently

@endpoint
class CallManager {
  /**
   * This function is called remotely from one endpoint to initiate a video call
   * @param mediaStream the media stream of the caller endpoint
   * @returns the media stream of the called endpoint
   */
  @property
  static call(mediaStream: MediaStream | null) {
    remoteEndpoint.val = datex.meta.caller.main.toString();
    remoteVideo.srcObject = mediaStream;
    return ownMediaStream!;
  }
}

export default (
  <main>
    <h1>Video Call</h1>
    <div class="callView">
      <div>
        {ownVideo}
        <div>
          Your Endpoint: <b>{localEndpoint.main.toString()}</b>
        </div>
      </div>
      <div>
        {remoteVideo}
        <div>
          Remote Endpoint: <input value={remoteEndpoint} />
          <button
            onclick={async () => {
              remoteVideo.srcObject = await CallManager.call.to(
                remoteEndpoint.val,
              )(ownMediaStream!);
            }}
          >
            <i class="fa-solid fa-video" /> Call
          </button>
        </div>
      </div>
    </div>
  </main>
);