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

const cameraUrl = "https://camera.gsecure.kz/live/stream2.m3u8";

export function DemoCameraView() {
	const videoRef = useRef<HTMLVideoElement>(null);

	useEffect(() => {
		const video = videoRef.current!;
		if (Hls.isSupported()) {
			const hls = new Hls();
			hls.loadSource(cameraUrl);
			hls.attachMedia(video);
		} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
			video.src = cameraUrl;
		} else {
			alert("Ваш браузер не поддерживает HLS");
		}
	}, []);

	return (
		<div className="border border-[var(--black-200)] rounded bg-[var(--white)] p-4 shadow-[0_0_10px_0_rgba(0,0,0,0.1)]">
			<video
				id="video"
				ref={videoRef}
				controls
				autoPlay
				width="640"
			></video>
		</div>
	);
}
