Upload an asset

Learn how to upload and play back an asset

Uploading and watching an asset is easy! The example below uses the Create asset API to create an upload link to upload a video.

Pro Tip: Livepeer supports resumable uploads through the TUS protocol, ensuring reliability and efficiency when transferring your asset.

For rapid processing of assets that will also be archived on IPFS or Arweave, we strongly encourage either (1) uploading to Livepeer with the IPFS 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.

Livepeer provides versatile options for uploading and managing your assets:

• Single Asset Upload: Upload individual assets for processing and play back.
• Bulk Asset Upload: Explore an efficient method for uploading multiple assets simultaneously, simplifying content management.
• Resumable Upload: Discover the power of resumable uploads, ensuring reliability and efficiency when transferring your media files.

Using Livepeer SDK

We can use the Livepeer SDK to create a Tus-compatible upload endpoint.

Node.js

import { Livepeer } from "livepeer";

const apiKey = 'YOUR_API_KEY';
const fileName = 'filename.mp4';

const livepeer = new Livepeer(apiKey);

const assetData = {
  name: fileName
};

livepeer
  .requestAssetUpload(assetData)
  .then((response) => {
    console.log("Asset upload request:", response);
  })
  .catch((error) => {
    console.error("Error requesting asset upload:", error);
  });

Python

from livepeer import Livepeer

# Initialize the Livepeer client with your API key
api_key = "YOUR_API_KEY"
livepeer = Livepeer(api_key)

file_name = "filename.mp4"  # Replace with the desired file name

asset_data = {
    "name": file_name
}

try:
    # Request asset upload
    response = livepeer.request_asset_upload(asset_data)
    print("Asset upload request:", response)
except Exception as e:
    print("Error requesting asset upload:", e)

Ruby

require 'livepeer'

# Initialize the Livepeer client with your API key
api_key = 'YOUR_API_KEY'
client = Livepeer::Client.new(api_key: api_key)

file_name = 'filename.mp4'  # Replace with the desired file name

asset_data = {
  "name": file_name
}

begin
  # Request asset upload
  response = client.request_asset_upload(asset_data)
  puts 'Asset upload request:', response
rescue StandardError => e
  puts 'Error requesting asset upload:', e.message
end

PHP

<?php

require 'vendor/autoload.php';

use Livepeer\Livepeer;
use Livepeer\LivepeerException;

// Initialize the Livepeer client with your API key
$api_key = 'YOUR_API_KEY';
$livepeer = new Livepeer($api_key);

$file_name = 'filename.mp4';

$asset_data = [
  "name" => $file_name
];

try {
    // Request asset upload
    $response = $livepeer->requestAssetUpload($asset_data);
    echo 'Asset upload request: ' . json_encode($response) . PHP_EOL;
} catch (LivepeerException $e) {
    echo 'Error requesting asset upload: ' . $e->getMessage() . PHP_EOL;
}

Go

package main

import (
  "fmt"
  "os"

  "github.com/livepeer/go-sdk"
)

func main() {
  // Initialize the Livepeer client with your API key
  apiKey := "YOUR_API_KEY"
  client := livepeer.NewLivepeerClient(apiKey)

  fileName := "filename.mp4"

  assetData := map[string]interface{}{
    "name": fileName,
  }

  // Request asset upload
  response, err := client.RequestAssetUpload(assetData)
  if err != nil {
    fmt.Printf("Error requesting asset upload: %v\n", err)
    os.Exit(1)
  }

  fmt.Printf("Asset upload request: %+v\n", response)
}

Once an upload endpoint is created, you can use it to upload your video file to Livepeer. The upload endpoint is tus compatible, so you can use any tus-compatible client (like tus-js-client) to upload your video file from the frontend.

Using React Hooks

We create a new React client and wrap the app with LivepeerConfig.

Now that our providers are set up, we set up file uploads with React Dropzone, a library for easily creating HTML5-compliant drag and drop zones for files (you can use another solution for file uploads):

import { useCreateAsset } from "@livepeer/react";

import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

export const CreateAndViewAsset = () => {
  const [video, setVideo] = useState<File | undefined>();
  const {
    mutate: createAsset,
    data: asset,
    status,
    progress,
    error,
  } = useCreateAsset(
    video
      ? {
          sources: [{ name: video.name, file: video }] as const,
        }
      : null
  );

  const onDrop = useCallback(async (acceptedFiles: File[]) => {
    if (acceptedFiles && acceptedFiles.length > 0 && acceptedFiles?.[0]) {
      setVideo(acceptedFiles[0]);
    }
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      "video/*": ["*.mp4"],
    },
    maxFiles: 1,
    onDrop,
  });

  const progressFormatted = useMemo(
    () =>
      progress?.[0].phase === "failed"
        ? "Failed to process video."
        : progress?.[0].phase === "waiting"
        ? "Waiting"
        : progress?.[0].phase === "uploading"
        ? `Uploading: ${Math.round(progress?.[0]?.progress * 100)}%`
        : progress?.[0].phase === "processing"
        ? `Processing: ${Math.round(progress?.[0].progress * 100)}%`
        : null,
    [progress]
  );

  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag and drop or browse files</p>
      </div>

      {createError?.message && <p>{createError.message}</p>}

      {video ? <p>{video.name}</p> : <p>Select a video file to upload.</p>}
      {progressFormatted && <p>{progressFormatted}</p>}

      <button
        onClick={() => {
          createAsset?.();
        }}
        disabled={!createAsset || createStatus === "loading"}
      >
        Upload
      </button>
    </>
  );
};

Play an Asset

To learn how to play an asset, see the Play an Asset guide.