Generate HLS Thumbnail - React

After initiating the HLS stream, you can effortlessly capture a thumbnail from the ongoing stream in various formats.

The use cases of HLS thumbnail include:

1. Content Preview: HLS Thumbnails provide a quick preview of the content being streamed, helping users decide whether to join or continue watching.

2. Enhanced User Experience: HLS Thumbnails offer a visual cue about the content, improving the overall user experience by making it more interactive and engaging.

3. Adaptive Thumbnails: HLS Thumbnails can dynamically update to reflect changes in the live stream, offering users real-time snapshots of the ongoing content.

The following are the steps involved in generating an HLS Thumbnail.

Step 1: Implement captureHLSThumbnail() to Call API

Initiate a call to the HLS capture API by providing the roomId parameter. Refer to the guide for detailed explanations.

const captureHLSThumbnail = async ({ roomId }) => {
  try {
    const response = await fetch(`https://api.videosdk.live/v2/hls/capture`, {
      method: "POST",
      headers: {
        authorization: `YOUR_TOKEN`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ roomId: roomId }),
    });

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error capturing HLS thumbnail:", error);
    throw error;
  }
};

Step 2: Create a Button to Capture Thumbnail

To capture an HLS thumbnail while the stream is active, incorporate a condition based on the hlsState. Utilize the useState hook to manage and store the captured image along with any error messages.

function Controls(props) {
  const { hlsState } = useMeeting();
  const [hlsThumbnailImage, setHlsThumbnailImage] = useState(null);

  return (
    <div>
      {(hlsState === "HLS_STARTED" || hlsState === "HLS_PLAYABLE") && (
        <button
          onClick={async () => {
            try {
              const { filePath, message } = await captureHLSThumbnail({
                roomId: props.meetingId,
              });
              setHlsThumbnailImage({
                imageLink: filePath,
                message: message,
              });
            } catch (error) {
              // Handle error gracefully
              console.error("Error capturing HLS thumbnail:", error);
            }
          }}
        >
          Capture HLS Thumbnail
        </button>
      )}
    </div>
  );
}

Step 3: Display Captured Image

Subsequently, showcase the image obtained from the captureHlsThumbnail API call. In the event of a capture failure, present the error message retrieved from the API response, providing users with relevant feedback on the thumbnail capture process.

function Controls(props) {
  // ... (existing code)

  return (
      {/* ... (existing code) */}
      {hlsThumbnailImage && hlsThumbnailImage?.imageLink ? (
        <>
          <p>Captured HLS Thumbnail</p>
          <img
            src={hlsThumbnailImage?.imageLink}
            alt={"capture_image"}
            height={200}
            width={300}
          />
        </>
      ) : (
        hlsThumbnailImage && (
          <>
            <p>Error In Capturing HLS Thumbnail</p>
            <p>{hlsThumbnailImage?.message}</p>
          </>
        )
      )}
  );
}

Output

API Reference

Refer to the following API references for detailed information on the methods used in this guide:

• hlsState
• HLS Thumbnail API