Private vs Public Livestreams

info

This explanation only applies to Fishjam rooms with type livestream.

When livestreaming with Fishjam, you can chose to make your livestream private or public. By default, created livestreams are private, to prevent possible bugs.

Typescript

import { FishjamClient } from '@fishjam-cloud/js-server-sdk';

const fishjamClient = new FishjamClient({
  fishjamId,
  managementToken,
});

const privateRoom = await fishjamClient.createRoom({ roomType: 'livestream' });
const publicRoom = await fishjamClient.createRoom({ roomType: 'livestream', public: true });

Python

from fishjam import FishjamClient

fishjam_client = FishjamClient(
  fishjam_id=fishjam_id,
  management_token=management_token,
);

private_room = await fishjam_client.create_room(room_type="livestream")
public_room = await fishjam_client.create_room(room_type="livestream", public=True)

The choice you make affects how viewers connect to the livestream and has no effect on streamers.

Private livestreams

When you create a private livestream, viewers are required to provide a viewer token when connecting to the livestream.

This aims to provide control over who can view a livestream, but requires you to distribute tokens from your backend application to your frontend applications.

Creating a viewer token

Below we show how you would create a livestream viewer token in a production scenario, with your own backend. Note that for development purposes, you can use the Sandbox API to generate a viewer token.

Typescript

import { FishjamClient } from '@fishjam-cloud/js-server-sdk';

const fishjamClient = new FishjamClient({
  fishjamId,
  managementToken,
});


const privateRoom = await fishjamClient.createRoom({ roomType: 'livestream' });
const { token: viewerToken } = await fishjamClient.createLivestreamViewerToken(privateRoom.id);

Python

from fishjam import FishjamClient

fishjam_client = FishjamClient(
  fishjam_id=fishjam_id,
  management_token=management_token,
);

private_room = await fishjam_client.create_room(room_type="livestream")
viewer_token = await fishjam_client.create_livestream_viewer_token(private_room.id)

Connecting to a private room

Once you've created a viewer token, you can connect to a room using the Fishjam client SDKs (examples below), or alternatively you can use WHEP.

React

import { useLivestreamViewer } from '@fishjam-cloud/react-client';

// ...

const { connect, stream } = useLivestreamViewer();

// ...

await connect({ token: viewerToken });
// after connecting stream will be available

React Native

import {
  LivestreamViewer,
  useLivestreamViewer,
} from '@fishjam-cloud/react-native-client';

// ...

const { connect } = useLivestreamViewer();

// ...

await connect({ token: viewerToken });

// Use `LivestreamViewer` to render the stream
<LivestreamViewer />

Public livestreams

Public livestreams simplify the viewing process by omitting the viewer token. All a viewer needs to view a public livestream is the ID of the room, so your backend doesn't need to manage the creation and distribution of viewer tokens.

Note however, that public livestreams are not suitable for all use-cases.

For example, if you are developing an app, which includes exclusive live content that requires a subscription to view, then you will want to authorize viewers before allowing them to view a livestream. Failing to do so may result in extra costs, as livestreams are billed per-viewer. Such an application will benefit from the token-based authorization in private livestreams.

Connecting to a public room

Once you've created a room of type livestream with the public flag enabled, you may start connecting viewers to the stream via the Fishjam client SDKs or WHEP.

React

import { useLivestreamViewer } from '@fishjam-cloud/react-client';

// ...

const { connect, stream } = useLivestreamViewer();

// ...

await connect({ streamId: roomId });
// after connecting `stream` will be available

React Native

import {
  LivestreamViewer,
  useLivestreamViewer,
} from '@fishjam-cloud/react-native-client';

// ...

const { connect } = useLivestreamViewer();

// ...

await connect({ streamId: roomId });

// Use `LivestreamViewer` to render the stream
<LivestreamViewer />