Streams sometimes have a difficult time reconnecting to the feed and stop.

Diagnose: Reconnection: If a stream is down, attempt to retry for that stream from other nodes nearby until there is a connection(using Livepeer player) Workaround: Implement a retry logic or switch over to the Livepeer player with the SDK or iframe embeded player.

Is there a way we could update the viewerId and video watch event to livestream / asset through Livepeer API?

Diagnose: We do not support pagination yet but it is a pending feature. You can use the playbackId as a workaround. Workaround: A short term workaround could be to “paginate” by playbackId instead.

  • First list all playback ids with: /api/data/views/query?breakdownBy[]=playbackId
  • then viewers by playbackId with /api/data/views/query?playbackId=<pid>&breakdownBy[]=viewerId

Is there a way to update width and height of iframe embeded player

Diagnose: Yes, you can use the iframe embeded player and set the width and height in the iframe tag, however the best way to do this is to use the aspect ratio.

How to enforce webrtc playback, to ensure it is always low latency otherwise fail?

There are two solutions to accomplish this:

  1. If you are using react component, you can pass lowLatency="force" to the player component. You can
function PlayerComponent() {
  return (
    <Player
      title="My Livestream"
      playbackId="wwl88k4g8f5eese9"
      lowLatency="force"
    />
  );
}
  1. If you are using the iframe embeded player, you can add lowLatency=true to the query string. lvpr.tv/?v={playbackid}&lowLatency=true

When creating a thumbnail from a live stream, it needs to wait for the first thumbnail to be available. this generally takes less than a min. Then before a dynamic thumbnail is accessable, what is used to show on the player?

You can use a poster image by default for a player, then, when playback info API returns the thumbnail url, you can start to use dynamic thumbnail for preview. Here is how to set up a poster image in Player: You can set the poster image for a video by utilizing the poster property in Livepeer’s Player component. This property can take either an image URL or a React component as its value. To set the poster image with a URL, you can use the following code example:

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

function PlayerComponent() {
  return (
    <Player
      title="Agent 327: Operation Barbershop"
      playbackId="YOUR_PLAYBACK_ID"
      poster="YOUR_IMAGE_URL"
    />
  );
};

If you prefer using a React component, then you can create an image component and pass it as a value to the poster property. Here is a code example that illustrates how you can do this:

=
import { Player } from "@livepeer/react";
import Image from "next/image";
import yourPosterImage from "./images/your-image-file.png";

const PosterImageComponent = () => {
  return (
    <Image
      src={yourPosterImage}
      layout="fill"
      objectFit="cover"
      priority
      placeholder="blur"
    />
  );
};

function PlayerComponent() {
  return (
    <Player
      title="Agent 327: Operation Barbershop"
      playbackId="YOUR_PLAYBACK_ID"
      poster={<PosterImageComponent />}
    />
  );
};