dCDN Setup

Integrating a CDN

CDN's allow many viewers to stream your transcoded video simultaneously while protecting your broadcaster node from being inundated with requests. Any requests that come into your site or DApp for video streaming through Livepeer will pull the video from the network, but will be served off of a CDN.

Pre-requisites

• Make sure you have livepeer installed.
• Make sure your Livepeer broadcaster is running on ports 8935 and 1935.
• Make sure your stream is playing when directly requesting it from the Livepeer Broadcaster.
• Make sure you have a compatible wallet with enough MEDIA to use the CDN service. MEDIA is currently available to buy in the following markets.

Adding your Livepeer broadcaster to Media Network

Access the Media App, connect your wallet and add a new CDN resource. Specify IP, port and approve the transaction.

info

In this specific case, our Livepeer broadcaster node is running at http://173.230.134.18:8935

Finalizing the process

If everything went smoothly and the transaction was approved and confirmed, you'll see your new resource ID and which origin it points to. Congrats! Your Livepeer broadcaster is now powered and scaled by Media Network's dCDN. End-users accessing the new link will load the streams from their closest Media Edge node instead of your original server.

Testing the stream

Theo Player is a great tool to check out our stream's health.

Playback in HTML

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="my-player" controls style="width: 100%; max-width: 500px" />

<script>
  const videoEl = document.querySelector("#my-player");
  const src = "http://ResourceID.medianetwork.cloud/stream/stream.m3u8";
  if (videoEl.canPlayType("application/vnd.apple.mpegurl")) {
    // Some browers (safari and ie edge) support HLS natively
    videoEl.src = src;
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(videoEl);
  } else {
    console.error("This is a legacy browser that doesn't support MSE");
  }
</script>

Playback in React

import React, { useEffect, useRef } from "react";
import Hls from "hls.js";

export default function VideoPlayer() {
  const videoRef = useRef(null);
  const src = "http://ResourceID.medianetwork.cloud/stream/stream.m3u8";

  useEffect(() => {
    let hls;
    if (videoRef.current) {
      const video = videoRef.current;

      if (video.canPlayType("application/vnd.apple.mpegurl")) {
        // Some browers (safari and ie edge) support HLS natively
        video.src = src;
      } else if (Hls.isSupported()) {
        // This will run in all other modern browsers
        hls = new Hls();
        hls.loadSource(src);
        hls.attachMedia(video);
      } else {
        console.error("This is a legacy browser that doesn't support MSE");
      }
    }

    return () => {
      if (hls) {
        hls.destroy();
      }
    };
  }, [videoRef]);

  return (
    <video
      controls
      ref={videoRef}
      style={{ width: "100%", maxWidth: "500px" }}
    />
  );
}

Playback in Swift

import SwiftUI
import AVKit

struct ContentView: View {
    private let player = AVPlayer(url: URL(string: "http://ResourceID.medianetwork.cloud/stream/stream.m3u8")!)

    var body: some View {
        //  VideoPlayer comes from SwiftUI
        //  Alternatively, you can use AVPlayerLayer or AVPlayerViewController
        VideoPlayer(player: player)
            .onAppear() {
                player.play()
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Playback in Android

implementation 'com.google.android.exoplayer:exoplayer-hls:2.X.X'

// Create a player instance.
SimpleExoPlayer player = new SimpleExoPlayer.Builder(context).build();
// Set the media item to be played.
player.setMediaItem(MediaItem.fromUri("http://ResourceID.medianetwork.cloud/stream/stream.m3u8"));
// Prepare the player.
player.prepare();