FlowRTC

FlowRTC is a lightweight JavaScript library for creating peer-to-peer WebRTC connections with minimal setup. It simplifies real-time video, audio, and data communication for web applications.

The nahdi-flowrtc package contains the core functionality to handle WebRTC peers, local/remote streams, ICE candidates, and session descriptions. It is designed to be used in modern browsers and can be integrated with frameworks like React.

Note

By default, FlowRTC provides detailed console logs for debugging and error messages. For production usage, you may want to wrap or handle errors differently.

Usage in React

import { useEffect, useRef } from "react";
import { PeerSetup } from "nahdi-flowrtc";

function VideoCall() {
  const localVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);
  const PeerConnection = useRef(null);

  const constraint = { video: true, audio: true };
  const iceConfiguration = {
    iceServers: [
      { urls: "stun:stun.l.google.com:19302" },
      { urls: "stun:stun1.l.google.com:19302" },
    ],
  };

  useEffect(() => {
    const init = async () => {
      try {
        PeerConnection.current = new PeerSetup({
          rtcConfig: iceConfiguration,
          constraint: constraint,
          localVideoRef: localVideoRef.current,
          remoteVideoRef: remoteVideoRef.current,
          autoStartCamera: true,
          autoStartRemote: true,
        });
      } catch (error) {
        console.error("Failed to initialize PeerConnection:", error);
      }
    };

    init();

    return () => {
      if (PeerConnection.current) {
        PeerConnection.current.close();
      }
    };
  }, []);

  return (
    <>
      <video ref={localVideoRef} autoPlay muted />
      <video ref={remoteVideoRef} autoPlay />
    </>
  );
}

#Usage in Vanilla JS / HTML

const localVideo = document.querySelector("#localVideo");
const remoteVideo = document.querySelector("#remoteVideo");

const constraint = { video: true, audio: true };
const iceConfiguration = {
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" },
    { urls: "stun:stun1.l.google.com:19302" },
  ],
};

const peer = new PeerSetup({
  rtcConfig: iceConfiguration,
  constraint: constraint,
  localVideoRef: localVideo,
  remoteVideoRef: remoteVideo,
  autoStartCamera: true,
  autoStartRemote: true,
});

// Example of listening to ICE candidates
peer.on("candidate", (ice) => {
  console.log("New ICE candidate:", ice);
  // Send to signaling server here
});

PeerSetup(options)

options.localVideoRef — reference to local element

options.remoteVideoRef — reference to remote element

options.constraint — media constraints {video: true, audio: true}

options.rtcConfig — RTC configuration (ICE servers)

options.autoStartCamera — start local camera automatically

options.autoStartRemote — auto-attach remote stream

Methods

peer.createOffer() → creates a WebRTC offer

peer.createAnswer(offer) → creates an answer to remote offer

peer.establishConnection(answer) → sets remote description to complete connection

peer.handleRemoteIceCandidate(candidate) → adds ICE candidate from remote peer

peer.close() → stops streams and closes peer connection

peer.on(event, callback) → listens to events: "candidate", "ConnectionState", "stream"

Helpers

code(object) → JSON stringify

uncode(string) → JSON parse

##Documentation See https://thisDecGonnabeReadtSoon.dev/

##Keywords webrtc, rtc, peer-to-peer, video, audio, live-stream, datachannel, real-time, communication, p2p, streaming, javascript, react, web