I have a custom layout and in my VideoHLSView comp...
# ask-aih
helpful-angle-23502
02/16/2026, 9:45 PMI have a custom layout and in my VideoHLSView comp, if i add a video to stream for my viewer, i have latence and bug + it's not responsive, any answer ? (React)
t
tall-airline-16756
02/16/2026, 9:45 PMThanks for reaching out, Alexandre. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
tall-airline-16756
02/16/2026, 9:45 PMThanks — I hear your frustration with latency, bugs, and responsiveness when adding a video in your custom
VideoHLSViewVideoHLSViewvideo.srcObjectsrcObjectVideoHLSViewh
helpful-angle-23502
02/18/2026, 2:38 PMIn my case, i have a responsive view, it's possible to have different flux with breakpoint (3 max) ?
t
tall-airline-16756
02/18/2026, 2:38 PMThanks — that’s a great question. Yes, you can absolutely have a responsive view that shows different numbers of video streams (flux) depending on breakpoints (for example: 1 on mobile, 2 on tablet, 3 on desktop). Below I’ll briefly explain the approach, give a small React pattern you can adopt, and point out a few performance tips so the layout stays responsive.
Acknowledgement
• You asked whether it’s possible to render different numbers of streams up to 3 depending on breakpoints. That is possible and commonly done.
How to approach this (high level)
• Detect the viewport breakpoint (CSS media queries or JS with
window.matchMedia Copy code
import React, { useEffect, useRef, useState } from 'react';
import { useRoom } from '@livekit/react-core'; // or your room hook
function useMaxStreams() {
const [maxStreams, setMaxStreams] = useState(3);
useEffect(() => {
const update = () => {
if (window.innerWidth < 600) setMaxStreams(1);
else if (window.innerWidth < 1024) setMaxStreams(2);
else setMaxStreams(3);
};
update();
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
return maxStreams;
}
export default function ResponsiveVideoGrid() {
const { participants } = useRoom(); // array of participants (or tracks) from LiveKit
const max = useMaxStreams();
// Prepare an array of refs equal to max possible slots (3)
const videoRefs = [useRef<HTMLVideoElement | null>(null), useRef<HTMLVideoElement | null>(null), useRef<HTMLVideoElement | null>(null)];
// Choose which participant tracks to show (e.g., top N)
const toShow = participants.slice(0, max);
useEffect(() => {
// Attach tracks to stable video elements via refs
toShow.forEach((p, i) => {
const videoEl = videoRefs[i].current;
const track = p.getTrackPublication('video')?.track;
if (videoEl && track && track.mediaTrack) {
// If track is a MediaStreamTrack (WebRTC), attach via srcObject
const ms = new MediaStream([track.mediaTrack]);
if (videoEl.srcObject !== ms) {
videoEl.srcObject = ms;
videoEl.play().catch(() => {});
}
} else if (videoEl) {
// clear if no track
if (videoEl.srcObject) {
videoEl.srcObject = null;
}
}
});
// run when participants or max change
}, [toShow.map(p => p.sid).join(','), max]);
return (
<div style={{ display: 'grid', gap: 8, gridTemplateColumns: `repeat(${max}, 1fr)` }}>
{Array.from({ length: max }).map((_, i) => (
<video
key={i}
ref={videoRefs[i]}
style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
muted
playsInline
autoPlay
/>
))}
</div>
);
}srcObjectobject-fit: covercontainVideoHLSViewVideoHLSViewh
helpful-angle-23502
02/18/2026, 2:41 PMSo, it's mandatory to have 3 flux HLS ? It's not possible with juste one flux ?
t
tall-airline-16756
02/18/2026, 2:41 PMGood question — you do NOT have to use three HLS fluxes. A single HLS stream can work; multiple fluxes (renditions/variants) are optional and are typically used for adaptive bitrate or to show different quality/resolutions at different sizes.
A few points to help you choose:
• Single HLS stream
◦ Works fine if you only need one quality level.
◦ Simpler to implement and easier to manage.
◦ May cause higher stalls or poor quality on constrained networks or low-power devices because there’s no lower-bitrate fallback.
• Multiple HLS renditions (recommended when possible)
◦ Provide adaptive bitrate: the player can switch to a lower bitrate on slow networks or smaller screens to reduce stalls and latency.
◦ Useful for responsive layouts where desktop might use high resolution and mobile should use a lower one.
◦ Adds encoding complexity and more bandwidth on the origin side, but reduces playback issues for viewers.
What I recommend next
• Tell me what you currently have:
◦ Is your stream a single HLS manifest (.m3u8) with one variant, or does it include multiple variant streams?
◦ Are you using a player like hls.js or the native <video> tag?
◦ What’s your main goal: lowest latency, simplest implementation, or best quality across devices?
If your goal is simplicity and you can accept one fixed quality, stick with one HLS flux. If you need robust playback across varying networks and responsive breakpoints, consider providing multiple renditions (or use LiveKit/WebRTC with simulcast if you need very low-latency interactive streams).
If you share your current HLS setup or player code, I’ll recommend the exact changes for either single-flux or multi-rendition workflows.
h
helpful-angle-23502
02/18/2026, 2:45 PMI use a signel HLS but i have 3 layouts so it's not responsive when i resize my viewer screen (my presenter screen is on desktop) , i using the native video tag and best quality across devices
t
tall-airline-16756
02/18/2026, 2:45 PMThanks — that helps. You can keep a single HLS stream and still support three responsive layouts. You don’t need multiple HLS renditions to make your UI responsive; renditions only help with adaptive bitrate/quality across network/device conditions. Below are practical steps and examples to make a native <video> element responsive across your three layouts while keeping best quality.
Key ideas (short)
• Make the video element size responsive to its container (not the other way around).
• Keep the video element stable in the DOM and only change layout/CSS on resize to avoid reattaching srcObject or reloading the stream.
• Use CSS (media queries, grid/flex, aspect-ratio, object-fit) to implement your 3 breakpoint layouts.
• If network/device variability becomes an issue later, add renditions for adaptive bitrate; not required for layout.
CSS patterns for responsive video
• Use a container that defines the layout and aspect ratio.
• Use
object-fitaspect-ratio Copy code
.video-grid {
display: grid;
gap: 8px;
}
/* Mobile: single column (1 flux) */
@media (max-width: 599px) {
.video-grid {
grid-template-columns: 1fr;
}
}
/* Tablet: two columns (2 flux) */
@media (min-width: 600px) and (max-width: 1023px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: three columns (3 flux) */
@media (min-width: 1024px) {
.video-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Maintain aspect ratio & responsive video */
.video-item {
width: 100%;
aspect-ratio: 16 / 9; /* or 4/3 depending on your source */
background: black;
position: relative;
overflow: hidden;
}
.video-item video {
width: 100%;
height: 100%;
object-fit: cover; /* or contain to avoid cropping */
display: block;
}hls.attachMedia(video)video.srcobject-fit: coverVideoHLSViewVideoHLSViewh
helpful-angle-23502
02/18/2026, 2:54 PMconst RecordingStage = ({
onMediaReady,
backgroundColor,
theme = 'LIGHT',
}: {
onMediaReady: () => void;
backgroundColor?: string;
theme?: 'LIGHT' | 'DARK';
}) => {
const nameBadgeClass =
theme === 'DARK' ? 'bg-[#17805C] text-white' : 'bg-decorative-1 text-black';
const room = useRoomContext();
const participants = useParticipants();
const [layout, setLayout] = useState<{
type: string;
active: {
type: string;
url: string;
page?: number;
paused?: boolean;
muted?: boolean;
currentTime?: number;
} | null;
}>({
type: 'grid',
active: null,
});
useEffect(() => {
const sync = (metadata?: string) => {
if (!metadata) return;
try {
const data = JSON.parse(metadata);
setLayout({ type: data.layout || 'grid', active: data.activeAsset || null });
} catch (e) {
console.error('Metadata error', e);
}
};
sync(room.metadata);
room.on(RoomEvent.RoomMetadataChanged, sync);
return () => {
room.off(RoomEvent.RoomMetadataChanged, sync);
};
}, [room]);
const presenters = useMemo(
() =>
participants.filter(
(p) => !p.isLocal && (p.permissions?.canPublish || p.getTrackPublications().length > 0),
),
[participants],
);
const presenterItems = useMemo(
() =>
presenters.map((participant) => {
const pub = participant.getTrackPublication(Track.Source.Camera);
const camTrack = pub
? { participant, source: Track.Source.Camera, publication: pub }
: undefined;
const displayName = participant.name || participant.identity || '';
return { participant, camTrack, displayName };
}),
[presenters],
);
const isPres = layout.type === 'presentation' && layout.active;
const hasPresenters = presenterItems.length > 0;
const presenterGridCols =
presenterItems.length >= 4
? 'grid-cols-4 items-stretch'
: `grid-cols-${presenterItems.length} items-stretch`;
const videoRef = useRef<HTMLVideoElement>(null);
useEffect(() => {
if (
layout.type !== 'presentation' ||
layout.active?.type !== 'VIDEO' ||
!layout.active?.url ||
!videoRef.current
)
return;
const video = videoRef.current;
const handleCanPlay = () => {
publishPresentationAudioOnly(video, room).catch(console.error);
};
video.addEventListener('loadeddata', handleCanPlay);
if (video.readyState >= 2) handleCanPlay();
return () => {
video.removeEventListener('loadeddata', handleCanPlay);
unpublishPresentationAudio(room).catch(console.error);
};
}, [layout.type, layout.active?.type, layout.active?.url, room]);
useEffect(() => {
if (layout.type !== 'presentation' || layout.active?.type !== 'VIDEO' || !videoRef.current)
return;
const video = videoRef.current;
const { paused, muted, currentTime } = layout.active;
if (typeof paused === 'boolean') {
if (paused) {
video.pause();
} else {
video.play().catch(() => {});
}
}
if (typeof muted === 'boolean') {
video.muted = muted;
}
if (typeof currentTime === 'number' && !Number.isNaN(currentTime)) {
const delta = Math.abs(video.currentTime - currentTime);
if (delta > 0.5) {
video.currentTime = currentTime;
}
}
}, [
layout.type,
layout.active?.type,
layout.active?.paused,
layout.active?.muted,
layout.active?.currentTime,
]);
return (
<div
className="w-full h-full min-h-screen overflow-hidden"
style={{ backgroundColor: backgroundColor || '#FFFFFF' }}
>
{layout.type === 'presentation' && layout.active && layout.active?.type === 'VIDEO' && (
<div className="flex flex-col-reverse w-full h-full gap-2">
<div className="flex flex-row items-center justify-center gap-3">
{presenterItems.length > 0 ? (
presenterItems.map(({ participant, camTrack, displayName }) => (
<div
key={participant.identity}
className=" w-[350px] h-[250px] relative bg-black rounded overflow-hidden"
>
{camTrack ? (
<div className="w-full h-full relative">
<VideoTrack
trackRef={camTrack}
className="w-full h-full object-cover"
onPlaying={onMediaReady}
/>
{displayName && (
<div
className={
absolute bottom-0 left-0 z-60 px-4 py-1 text-[20px] md:text-[16px] lg:text-[20px] font-medium ${nameBadgeClass}absolute bottom-0 left-0 z-60 px-4 py-1 text-[20px] md:text-[16px] lg:text-[20px] font-medium ${nameBadgeClass}t
tall-airline-16756
02/18/2026, 2:55 PMThanks — this is great context. I see your RecordingStage component and that you’re using a single HLS/MP4 URL on a native <video> element. You don’t need multiple HLS fluxes to be responsive. The main issues causing your layout to feel unresponsive are the fixed width/height Tailwind classes (e.g., w-[350px] h-[250px], aspect-16/7) and potentially remounting/reassigning the video element on layout changes.
What to change (summary)
• Replace fixed pixel sizes with responsive classes (or CSS grid) so the layout adapts to breakpoints.
• Keep video DOM nodes stable (don’t unmount/remount). Attach the source once and let CSS handle resizing.
• Use
aspect-ratioobject-fit Copy code
// container for presenters
<div className="grid gap-3
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
">
{presenterItems.map(...).map(item => (
<div key={...} className="w-full aspect-[16/9] bg-black rounded overflow-hidden">
{/* video or placeholder */}
</div>
))}
</div>w-full h-full object-containobject-coveraspect-ratiosrc<video> Copy code
<div className="flex flex-col-reverse w-full h-full gap-2">
<div className="presenters grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
{/* presenter thumbnails (always render up to 3) */}
</div>
<div className="main-video w-full rounded-lg overflow-hidden aspect-[16/9] bg-black">
<video
ref={videoRef}
src={layout.active.url}
muted={layout.active.muted ?? false}
className="w-full h-full object-contain"
playsInline
autoPlay
/>
</div>
</div>hls.attachMedia(videoRef.current)hidden sm:block lg:blockcol-span3 Views