41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import Hls from "hls.js";
|
|
import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
export enum VideoStatus {
|
|
Online = "online",
|
|
Offline = "offline"
|
|
}
|
|
|
|
export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
|
|
const video = useRef<HTMLVideoElement>(null);
|
|
const streamCached = useMemo(() => props.stream, [props.stream]);
|
|
const [status, setStatus] = useState<VideoStatus>();
|
|
|
|
useEffect(() => {
|
|
if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
|
|
const hls = new Hls();
|
|
hls.loadSource(streamCached);
|
|
hls.attachMedia(video.current);
|
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
|
console.debug(event, data);
|
|
const errorType = data.type;
|
|
if (errorType === Hls.ErrorTypes.NETWORK_ERROR) {
|
|
hls.stopLoad();
|
|
hls.detachMedia();
|
|
setStatus(VideoStatus.Offline);
|
|
}
|
|
})
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
setStatus(VideoStatus.Online);
|
|
})
|
|
return () => hls.destroy();
|
|
}
|
|
}, [video, streamCached]);
|
|
return (
|
|
<div className={status}>
|
|
<div>{status}</div>
|
|
<video ref={video} {...props} controls={status === VideoStatus.Online} />
|
|
</div>
|
|
);
|
|
}
|