74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
// @ts-ignore we know this doesn't have types
|
|
import JSMpeg from "@cycjimmy/jsmpeg-player";
|
|
import { Flex } from "@mantine/core";
|
|
import { useViewportSize } from "@mantine/hooks";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { strings } from "../../strings/strings";
|
|
|
|
type JSMpegPlayerProps = {
|
|
wsUrl: string;
|
|
cameraHeight?: number,
|
|
cameraWidth?: number,
|
|
};
|
|
|
|
const JSMpegPlayer = (
|
|
{
|
|
wsUrl,
|
|
cameraWidth = 1200,
|
|
cameraHeight = 800,
|
|
}: JSMpegPlayerProps
|
|
) => {
|
|
const playerRef = useRef<HTMLDivElement>(null);
|
|
const [playerInitialized, setPlayerInitialized] = useState(false)
|
|
|
|
const { height: maxHeight, width: maxWidth } = useViewportSize()
|
|
|
|
useEffect(() => {
|
|
const video = new JSMpeg.VideoElement(
|
|
playerRef.current,
|
|
wsUrl,
|
|
{},
|
|
{protocols: [], audio: false, videoBufferSize: 1024*1024*4}
|
|
);
|
|
|
|
const toggleFullscreen = () => {
|
|
const canvas = video.els.canvas;
|
|
if (!document.fullscreenElement && !(document as any).webkitFullscreenElement) { // Use bracket notation for webkit
|
|
// Enter fullscreen
|
|
if (canvas.requestFullscreen) {
|
|
canvas.requestFullscreen();
|
|
} else if ((canvas as any).webkitRequestFullScreen) { // Use bracket notation for webkit
|
|
(canvas as any).webkitRequestFullScreen();
|
|
} else if (canvas.mozRequestFullScreen) {
|
|
canvas.mozRequestFullScreen();
|
|
}
|
|
} else {
|
|
// Exit fullscreen
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if ((document as any).webkitExitFullscreen) { // Use bracket notation for webkit
|
|
(document as any).webkitExitFullscreen();
|
|
} else if ((document as any).mozCancelFullScreen) {
|
|
(document as any).mozCancelFullScreen();
|
|
}
|
|
}
|
|
};
|
|
|
|
video.els.canvas.addEventListener('dblclick',toggleFullscreen);
|
|
|
|
return () => {
|
|
video.destroy();
|
|
video.els.canvas.removeEventListener('dblclick', toggleFullscreen);
|
|
};
|
|
}, [wsUrl]);
|
|
|
|
return (
|
|
<div
|
|
ref={playerRef}
|
|
key={wsUrl}
|
|
title={strings.player.doubleClickToFullHint}
|
|
style={{width:cameraWidth, height:cameraHeight, maxWidth:maxWidth, maxHeight: maxHeight-100, }} />
|
|
)
|
|
};
|
|
|
|
export default JSMpegPlayer |