Play video from IPFS/Arweave
Playing back transcoded video from IPFS or Arweave is easy with Livepeer! The example below uses the Player’s built-in capabilities to transcode IPFS/Arweave content without any additional configuration.
This guide is written for developers using @livepeer/react
in a React
application.
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.
This example illustrates how Livepeer can be used as a video processing and
caching layer on top of content available on IPFS or the Arweave gateway for
optimized video playback. We recommend uploading via useCreateAsset
or the
API before displaying it in the player for best performance. For comprehensive
IPFS / Arweave support we offer a fallback option to play directly from
IPFS/Arweave while the video is being uploaded to Livepeer, but do not
recommend it for typical usage because it may result in long load times for
viewers.
For rapid processing of assets that will also be archived on IPFS or Arweave, we
strongly encourage either (1) uploading to Livepeer with the storage option
enabled, or (2) uploading the raw file to Livepeer via useCreateAsset
or the
API prior to archiving on dStorage, rather than passing the IPFS / Arweave
gateway URL. The gateway URL will work, but may incur longer-than-usual
processing time.
To see a complete example of using dStorage playback in React, see our example app on Github.
Configuring Providers
We
create a new React client and wrap the app with LivepeerConfig
.
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.
For IPFS HTTP gateway URLs, the Studio provider currently only supports “path style” URLs and does not support “subdomain style” URLs. The Studio provider will support both styles of URLs in a future update.
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. 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/core-web/utils";
import { useMemo, useState } from "react";
export const DecentralizedStoragePlayback = () => {
const [url, setUrl] = useState<string>("");
const idParsed = useMemo(() => parseCid(url) ?? parseArweaveTxId(url), [url]);
return (
<div>
<p>IPFS or Arweave URL</p>
<input
type="text"
placeholder="ipfs://... or ar://"
onChange={(e) => setUrl(e.target.value)}
/>
{url && !idParsed && <p>Provided value is not a valid identifier.</p>}
{idParsed && (
<Player
title={idParsed.id}
src={url}
autoPlay
muted
autoUrlUpload={{ fallback: true, ipfsGateway: "https://w3s.link" }}
/>
)}
</div>
);
};
Was this page helpful?