Add h264 player stream for unsupported codecs (experimental)

src/misc/Player/videojs.js

@@ -14,6 +14,15 @@ export default function VideoJS(props) {
 	const playerRef = React.useRef(null);
 	const { options, onReady } = props;
 
+	const retryVideo = () => {
+		const player = playerRef.current;
+		if (player) {
+			player.error(null); // Clear the error
+			player.src(options.sources); // Reload the source
+			player.play(); // Attempt to play again
+		}
+	};
+
 	React.useEffect(() => {
 		// make sure Video.js player is only initialized once
 		if (!playerRef.current) {
@@ -32,6 +41,17 @@ export default function VideoJS(props) {
 			}
 			player.addClass('video-js');
 			player.addClass('vjs-16-9');
+
+			// retry on MEDIA_ERR_NETWORK = 2
+			let retry_count = 0;
+			player.on('error', () => {
+				const error = player.error();
+				console.log(error);
+				if (error && (error.code === 2 || error.code === 4) && retry_count < 10) {
+					retry_count += 1;
+					setTimeout(retryVideo, 2000);
+				}
+			});
 		} else {
 			// you can update player here [update player through props]
 			// const player = playerRef.current;

src/misc/controls/Preview.js

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Grid from '@mui/material/Grid';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+
+import Checkbox from '../Checkbox';
+import Select from '../Select';
+
+function init(settings) {
+	const initSettings = {
+		enable: true,
+		video_encoder: 'libx264',
+		audio_encoder: 'aac',
+		...settings,
+	};
+
+	return initSettings;
+}
+
+export default function Control(props) {
+	const settings = init(props.settings);
+	const encoders = props.encoders;
+
+	// Set the defaults
+	React.useEffect(() => {
+		props.onChange(settings, true);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleChange = (what) => (event) => {
+		const value = event.target.value;
+
+		if (['enable'].includes(what)) {
+			settings[what] = !settings[what];
+		} else {
+			settings[what] = value;
+		}
+
+		props.onChange(settings, false);
+	};
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12}>
+				<Checkbox label={<Trans>Enable browser-compatible H.264 stream</Trans>} checked={settings.enable} onChange={handleChange('enable')} />
+			</Grid>
+			<Grid item xs={12} md={6}>
+				<Select label={<Trans>Video Codec</Trans>} value={settings.video_codec} onChange={handleChange('video_encoder')}>
+					<MenuItem value="libx264" disabled={!encoders.includes('libx264')}>
+						H.264 (libx264)
+					</MenuItem>
+					<MenuItem value="h264_nvenc" disabled={!encoders.includes('h264_nvenc')}>
+						<Trans>H.264 (NVENC)</Trans>
+					</MenuItem>
+					<MenuItem value="h264_omx" disabled={!encoders.includes('h264_omx')}>
+						<Trans>H.264 (OpenMAX IL)</Trans>
+					</MenuItem>
+					<MenuItem value="h264_v4l2m2m" disabled={!encoders.includes('h264_v4l2m2m')}>
+						<Trans>H.264 (V4L2 Memory to Memory)</Trans>
+					</MenuItem>
+					<MenuItem value="h264_vaapi" disabled={!encoders.includes('h264_vaapi')}>
+						<Trans>H.264 (Intel VAAPI)</Trans>
+					</MenuItem>
+					<MenuItem value="h264_videotoolbox" disabled={!encoders.includes('h264_videotoolbox')}>
+						<Trans>H.264 (VideoToolbox)</Trans>
+					</MenuItem>
+				</Select>
+				<Typography variant="caption">
+					<Trans>The H.264 encoder used.</Trans>
+				</Typography>
+			</Grid>
+		</Grid>
+	);
+}
+
+Control.defaulProps = {
+	settings: {},
+	onChange: function (settings, automatic) {},
+};

src/utils/metadata.js

@@ -285,6 +285,11 @@ const defaultIngestMetadata = {
 			enable: true,
 			interval: 60,
 		},
+		preview: {
+			enable: false,
+			video_encoder: 'libx264',
+			audio_encoder: 'aac',
+		},
 		limits: {
 			cpu_usage: 0,
 			memory_mbytes: 0,
@@ -472,6 +477,11 @@ const mergeIngestMetadata = (metadata, base) => {
 		...metadata.control.snapshot,
 	};
 
+	metadata.control.preview = {
+		...base.control.preview,
+		...metadata.control.preview,
+	};
+
 	if (!Array.isArray(metadata.sources)) {
 		metadata.sources = [];
 	} else {