Create and Watch a Stream

Creating and watching a stream is also easy! The example below uses useCreateStream and useStream to create and watch a livestream.

Step 1: Configuring Providers

💡

This example assumes you have chosen a component library with typical components like Button, TextField, Spinner, etc. The Player is the only visual component provided.

Same as before, we create a new livepeer.js client with the Studio provider and a CORS-protected API key:

App.tsx

import {
  LivepeerConfig,
  createReactClient,
  studioProvider,
} from '@livepeer/react';
import * as React from 'react';
 
const livepeerClient = createReactClient({
  provider: studioProvider({
    apiKey: process.env.NEXT_PUBLIC_STUDIO_API_KEY,
  }),
});
 
// Pass client to React Context Provider
function App() {
  return (
    <LivepeerConfig client={livepeerClient}>
      <CreateAndViewAsset />
    </LivepeerConfig>
  );
}

Step 2: Stream Creation

We then can create our stream, with the stream key returned once we create it (styling has been removed for simplicity):

Stream.tsx

import { useCreateStream } from '@livepeer/react';
 
import { useState } from 'react';
 
export const Stream = () => {
  const [streamName, setStreamName] = useState<string>('');
  const {
    mutate: createStream,
    data: createdStream,
    status: createStatus,
  } = useCreateStream();
 
  return (
    <>
      <TextField
        type="text"
        placeholder="Stream name"
        onChange={(e) => setStreamName(e.target.value)}
      />
 
      <Button
        onClick={() => {
          createStream?.();
        }}
        disabled={createStatus === 'loading' || !createStream}
      >
        Create Stream
      </Button>
    </>
  );
};

Step 3: Stream Content

Lastly, when the stream is created, we display the streaming content using the Player.

💡

In a production application, the viewer should not have access to the stream ID. The playbackId should be passed to the viewer instead, since this allows the viewer to watch the video without the ability to view the stream key.

Stream.tsx

import { Player, useCreateStream } from '@livepeer/react';
 
import { useMemo, useState } from 'react';
 
import { Spinner } from '../core';
 
export const Stream = () => {
  const [streamName, setStreamName] = useState<string>('');
  const {
    mutate: createStream,
    data: stream,
    status,
  } = useCreateStream(streamName ? { name: streamName } : null);
 
  const isLoading = useMemo(() => status === 'loading', [status]);
 
  return (
    <Box>
      <Box>
        <TextField
          type="text"
          placeholder="Stream name"
          onChange={(e) => setStreamName(e.target.value)}
        />
      </Box>
 
      {stream?.playbackId && (
        <Player
          title={stream?.name}
          playbackId={stream?.playbackId}
          autoPlay
          muted
        />
      )}
 
      <Flex>
        {!stream && (
          <Button
            onClick={() => {
              createStream?.();
            }}
            disabled={isLoading || !createStream}
            variant="primary"
          >
            Create Stream
          </Button>
        )}
      </Flex>
    </Box>
  );
};

Wrap Up

That's it! Streaming, complete. You now have a solution for streaming live video content.

Last updated on 11/30/2022

Player Create & Watch an Asset