Skip to main content
Version: 0.1.x

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

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>
) : (
hlsThumbnailImage && (
<p>Error In Capturing HLS Thumbnail</p>


API Reference

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

Got a Question? Ask us on discord