Fishjam TS Client

TypeScript client library for Fishjam.

Installation

You can install this package using npm:

npm install @fishjam-dev/ts-client

Documentation

Documentation is available here.

For a more comprehensive tutorial on Fishjam, its capabilities and usage in production, refer to the Fishjam docs.

Usage

Prerequisites:

• A running Fishjam server.
• A created room and a peer's token in that room. You can use the dashboard example to create a room and a peer token.

The following code snippet is based on the minimal example.

import { FishjamClient, WebRTCEndpoint } from '@fishjam-dev/ts-client';

const SCREEN_SHARING_MEDIA_CONSTRAINTS = {
  video: {
    frameRate: { ideal: 20, max: 25 },
    width: { max: 1920, ideal: 1920 },
    height: { max: 1080, ideal: 1080 },
  },
};

// Example metadata types for peer and track
// You can define your own metadata types, just make sure they are serializable
type PeerMetadata = {
  name: string;
};

type TrackMetadata = {
  type: 'camera' | 'screen';
};

// Create a new FishjamClient object to interact with Fishjam
const client = new FishjamClient<PeerMetadata, TrackMetadata>();

const peerToken = prompt('Enter peer token') ?? 'YOUR_PEER_TOKEN';

// Start the peer connection
client.connect({
  peerMetadata: { name: 'peer' },
  token: peerToken,
  // if the 'signaling' field is missing, the client will connect to ws://localhost:5002/socket/peer/websocket
});

// You can listen to events emitted by the client
client.on('joined', (peerId, peersInRoom) => {
  // Check if webrtc is initialized
  if (!client.webrtc) return console.error('webrtc is not initialized');

  // To start broadcasting your media, you will need a source of MediaStream like a camera, microphone, or screen
  // In this example, we will use screen sharing
  startScreenSharing(client.webrtc);
});

// To receive media from other peers, you need to listen to the onTrackReady event
client.on('trackReady', (ctx) => {
  const peerId = ctx.peer.id;

  document.getElementById(peerId)?.remove(); // remove previous video element if it exists

  // Create a new video element to display the media
  const videoPlayer = document.createElement('video');
  videoPlayer.id = peerId;
  videoPlayer.oncanplaythrough = function () {
    // Chrome blocks autoplay of unmuted video
    videoPlayer.muted = true;
    videoPlayer.play();
  };
  document.body.appendChild(videoPlayer);

  videoPlayer.srcObject = ctx.stream; // assign MediaStream to video element
});

// Cleanup video element when track is removed
client.on('trackRemoved', (ctx) => {
  const peerId = ctx.peer.id;
  document.getElementById(peerId)?.remove(); // remove video element
});

async function startScreenSharing(webrtc: WebRTCEndpoint) {
  // Get screen sharing MediaStream
  const screenStream = await navigator.mediaDevices.getDisplayMedia(
    SCREEN_SHARING_MEDIA_CONSTRAINTS,
  );

  // Add local MediaStream to webrtc
  screenStream
    .getTracks()
    .forEach((track) => webrtc.addTrack(track, { type: 'screen' }));
}

Examples

For more examples, see the examples folder.

Contributing

We welcome contributions to the Fishjam TS Client. Please report any bugs or issues that you find, or feel free to make a pull request with your own bug fixes and/or features.

More detailed information about contributing can be found in CONTRIBUTING.md.

Fishjam Ecosystem

📱 Client SDKs	TypeScript React iOS Android React Native
⚙️ Server SDKs	JavaScript Python Elixir
📚 Resources	Fishjam Docs Membrane Framework Join Membrane Discord!
🫙 Services	Videoroom A videoconferencing app built on top of Fishjam Dashboard An all-around development tool for Fishjam

Copyright and License

Copyright 2024, Software Mansion

Licensed under the Apache License, Version 2.0