• Examples
• React
• Play a Video from IPFS or Arweave

Play a Video from IPFS or Arweave

Playing back transcoded video from IPFS or Arweave is easy with livepeer.js! The example below uses the Player's built-in capabilities to transcode IPFS/Arweave content without any additional configuration.

IPFS is a network of nodes that allow you to read content from the network using a content identifier unique to the data you’re requesting, ensuring you are able to securely and verifiably get exactly what you are asking for, regardless of where the data is physically stored. Arweave is a set of nodes that are incentivized to store data permanently; content stored on the network is pulled through an Arweave gateway.

Step 1: Configuring Providers

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

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}>
      <DecentralizedStoragePlayback />
    </LivepeerConfig>
  );
}

Step 2: Automatic Playback

Now that our providers are set up, we can add a text input for an IPFS CID or an IPFS/Arweave HTTP gateway URL.

The raw input is passed to the Player, which automatically detects if it is a valid CID and attempts to fetch the playback info for that CID. If the provider does not have an Asset with that CID, the Player will automatically attempt to upload the CID from IPFS, and then play the transcoded content back, without any additional code on the frontend. As mentioned above, to ensure that there is no delay in playback, we recommend uploading via useCreateAsset before displaying it in the player.

import { Player } from '@livepeer/react';
import { parseArweaveTxId, parseCid } from 'livepeer/media';
 
import { useMemo, useState } from 'react';
 
export const DecentralizedStoragePlayback = () => {
  const [url, setUrl] = useState<string>('');
 
  const idParsed = useMemo(() => parseCid(url) ?? parseArweaveTxId(url), [url]);
 
  return (
    <>
      <Box>
        <Text>IPFS or Arweave URL</Text>
        <TextField
          type="text"
          placeholder="ipfs://... or ar://"
          onChange={(e) => setUrl(e.target.value)}
        />
 
        {url && !idParsed && (
          <Text>Provided value is not a valid identifier.</Text>
        )}
      </Box>
 
      {idParsed && (
        <Player
          title={idParsed.id}
          src={url}
          autoPlay
          muted
          autoUrlUpload={{ fallback: true, ipfsGateway: 'https://w3s.link' }}
        />
      )}
    </>
  );
};

Wrap Up

That's it! You just configured a caching & transcoding layer on top of IPFS and Arweave with a few lines of code!