mirror of https://github.com/mifi/lossless-cut
Use MediaSource for unsupported formats
Mikael Finstad
2 years ago
parent
83c910a0fd
commit
7f32cdca8a
@ -1,67 +1,102 @@
|
||||
const strtok3 = require('strtok3');
|
||||
const logger = require('./logger');
|
||||
const { createMediaSourceProcess, readOneJpegFrame } = require('./ffmpeg');
|
||||
|
||||
const { getOneRawFrame, encodeLiveRawStream } = require('./ffmpeg');
|
||||
|
||||
function createMediaSourceStream({ path, videoStreamIndex, audioStreamIndex, seekTo, size, fps }) {
|
||||
const abortController = new AbortController();
|
||||
logger.info('Starting preview process', { videoStreamIndex, audioStreamIndex, seekTo });
|
||||
const process = createMediaSourceProcess({ path, videoStreamIndex, audioStreamIndex, seekTo, size, fps });
|
||||
|
||||
let aborters = [];
|
||||
abortController.signal.onabort = () => {
|
||||
logger.info('Aborting preview process', { videoStreamIndex, audioStreamIndex, seekTo });
|
||||
process.kill('SIGKILL');
|
||||
};
|
||||
|
||||
async function command({ path, inWidth, inHeight, streamIndex, seekTo: commandedTime, onRawFrame, onJpegFrame, playing }) {
|
||||
let process;
|
||||
let aborted = false;
|
||||
process.stdout.pause();
|
||||
|
||||
function killProcess() {
|
||||
if (process) {
|
||||
process.kill();
|
||||
process = undefined;
|
||||
}
|
||||
async function readChunk() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let cleanup;
|
||||
|
||||
const onClose = () => {
|
||||
cleanup();
|
||||
resolve(null);
|
||||
};
|
||||
const onData = (chunk) => {
|
||||
process.stdout.pause();
|
||||
cleanup();
|
||||
resolve(chunk);
|
||||
};
|
||||
const onError = (err) => {
|
||||
cleanup();
|
||||
reject(err);
|
||||
};
|
||||
cleanup = () => {
|
||||
process.stdout.off('data', onData);
|
||||
process.stdout.off('error', onError);
|
||||
process.stdout.off('close', onClose);
|
||||
};
|
||||
|
||||
process.stdout.once('data', onData);
|
||||
process.stdout.once('error', onError);
|
||||
process.stdout.once('close', onClose);
|
||||
|
||||
process.stdout.resume();
|
||||
});
|
||||
}
|
||||
|
||||
function abort() {
|
||||
aborted = true;
|
||||
killProcess();
|
||||
aborters = aborters.filter(((aborter) => aborter !== abort));
|
||||
abortController.abort();
|
||||
}
|
||||
aborters.push(abort);
|
||||
|
||||
try {
|
||||
if (playing) {
|
||||
const { process: processIn, channels, width, height } = encodeLiveRawStream({ path, inWidth, inHeight, streamIndex, seekTo: commandedTime });
|
||||
process = processIn;
|
||||
|
||||
// process.stderr.on('data', data => console.log(data.toString('utf-8')));
|
||||
let stderr = Buffer.alloc(0);
|
||||
process.stderr?.on('data', (chunk) => {
|
||||
stderr = Buffer.concat([stderr, chunk]);
|
||||
});
|
||||
|
||||
const tokenizer = await strtok3.fromStream(process.stdout);
|
||||
if (aborted) return;
|
||||
|
||||
const size = width * height * channels;
|
||||
const rgbaImage = Buffer.allocUnsafe(size);
|
||||
(async () => {
|
||||
try {
|
||||
await process;
|
||||
} catch (err) {
|
||||
if (err instanceof Error && err.name === 'AbortError') {
|
||||
return;
|
||||
}
|
||||
|
||||
while (!aborted) {
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await tokenizer.readBuffer(rgbaImage, { length: size });
|
||||
if (aborted) return;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await onRawFrame(rgbaImage, width, height);
|
||||
if (!err.killed) {
|
||||
console.warn(err.message);
|
||||
console.warn(stderr.toString('utf-8'));
|
||||
}
|
||||
} else {
|
||||
const { process: processIn, width, height } = getOneRawFrame({ path, inWidth, inHeight, streamIndex, seekTo: commandedTime, outSize: 1000 });
|
||||
process = processIn;
|
||||
const { stdout: jpegImage } = await process;
|
||||
if (aborted) return;
|
||||
onJpegFrame(jpegImage, width, height);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!err.killed) console.warn(err.message);
|
||||
} finally {
|
||||
killProcess();
|
||||
}
|
||||
})();
|
||||
|
||||
return { abort, readChunk };
|
||||
}
|
||||
|
||||
function abortAll() {
|
||||
aborters.forEach((aborter) => aborter());
|
||||
function readOneJpegFrameWrapper({ path, seekTo, videoStreamIndex }) {
|
||||
const abortController = new AbortController();
|
||||
const process = readOneJpegFrame({ path, seekTo, videoStreamIndex });
|
||||
|
||||
abortController.signal.onabort = () => process.kill('SIGKILL');
|
||||
|
||||
function abort() {
|
||||
abortController.abort();
|
||||
}
|
||||
|
||||
const promise = (async () => {
|
||||
try {
|
||||
const { stdout } = await process;
|
||||
return stdout;
|
||||
} catch (err) {
|
||||
logger.error('renderOneJpegFrame', err.shortMessage);
|
||||
throw new Error('Failed to render JPEG frame');
|
||||
}
|
||||
})();
|
||||
|
||||
return { promise, abort };
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
command,
|
||||
abortAll,
|
||||
createMediaSourceStream,
|
||||
readOneJpegFrame: readOneJpegFrameWrapper,
|
||||
};
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import React, { memo, useEffect, useRef, useMemo } from 'react';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
|
||||
import CanvasPlayer from './CanvasPlayer';
|
||||
|
||||
const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing, eventId }) => {
|
||||
const canvasRef = useRef();
|
||||
|
||||
const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height, streamIndex, getCanvas: () => canvasRef.current }), [filePath, width, height, streamIndex]);
|
||||
|
||||
useEffect(() => () => {
|
||||
canvasPlayer.terminate();
|
||||
}, [canvasPlayer]);
|
||||
|
||||
const state = useMemo(() => {
|
||||
if (playing) {
|
||||
return { startTime: commandedTime, playing, eventId };
|
||||
}
|
||||
return { startTime: playerTime, playing, eventId };
|
||||
}, [commandedTime, eventId, playerTime, playing]);
|
||||
|
||||
const [debouncedState, { cancel }] = useDebounce(state, 200, {
|
||||
equalityFn: (a, b) => a.startTime === b.startTime && a.playing === b.playing && a.eventId === b.eventId,
|
||||
});
|
||||
|
||||
/* useEffect(() => {
|
||||
console.log('state', state);
|
||||
}, [state]); */
|
||||
|
||||
useEffect(() => () => {
|
||||
cancel();
|
||||
}, [cancel]);
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('debouncedState', debouncedState);
|
||||
|
||||
if (debouncedState.startTime == null) return;
|
||||
|
||||
if (debouncedState.playing) {
|
||||
canvasPlayer.play(debouncedState.startTime);
|
||||
} else {
|
||||
canvasPlayer.pause(debouncedState.startTime);
|
||||
}
|
||||
}, [debouncedState, canvasPlayer]);
|
||||
|
||||
const canvasStyle = useMemo(() => ({ display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: rotate ? `rotate(${rotate}deg)` : undefined }), [rotate]);
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100%', left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', overflow: 'hidden', background: 'black' }}>
|
||||
<canvas ref={canvasRef} style={canvasStyle} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default Canvas;
|
||||
@ -1,59 +0,0 @@
|
||||
const remote = window.require('@electron/remote');
|
||||
|
||||
const { command, abortAll } = remote.require('./canvasPlayer');
|
||||
|
||||
export default ({ path, width: inWidth, height: inHeight, streamIndex, getCanvas }) => {
|
||||
let terminated;
|
||||
|
||||
async function drawRawFrame(rgbaImage, width, height) {
|
||||
const canvas = getCanvas();
|
||||
if (!canvas || rgbaImage.length === 0) return;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
|
||||
ctx.putImageData(new ImageData(Uint8ClampedArray.from(rgbaImage), width, height), 0, 0);
|
||||
}
|
||||
|
||||
function drawJpegFrame(jpegImage, width, height) {
|
||||
const canvas = getCanvas();
|
||||
if (!canvas) return;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
img.onerror = (error) => console.error('Canvas JPEG image error', error);
|
||||
img.src = `data:image/jpeg;base64,${jpegImage.toString('base64')}`;
|
||||
}
|
||||
|
||||
function pause(seekTo) {
|
||||
if (terminated) return;
|
||||
abortAll();
|
||||
command({ path, inWidth, inHeight, streamIndex, seekTo, onJpegFrame: drawJpegFrame, onRawFrame: drawRawFrame, playing: false });
|
||||
}
|
||||
|
||||
function play(playFrom) {
|
||||
if (terminated) return;
|
||||
abortAll();
|
||||
command({ path, inWidth, inHeight, streamIndex, seekTo: playFrom, onJpegFrame: drawJpegFrame, onRawFrame: drawRawFrame, playing: true });
|
||||
}
|
||||
|
||||
function terminate() {
|
||||
if (terminated) return;
|
||||
terminated = true;
|
||||
abortAll();
|
||||
}
|
||||
|
||||
return {
|
||||
play,
|
||||
pause,
|
||||
terminate,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,357 @@
|
||||
import { useEffect, useRef, useState, useCallback, useMemo, memo, CSSProperties } from 'react';
|
||||
import { Spinner } from 'evergreen-ui';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
|
||||
import isDev from './isDev';
|
||||
|
||||
const remote = window.require('@electron/remote');
|
||||
const { createMediaSourceStream, readOneJpegFrame } = remote.require('./canvasPlayer');
|
||||
|
||||
|
||||
async function startPlayback({ path, video, videoStreamIndex, audioStreamIndex, seekTo, signal, playSafe, onCanPlay, getTargetTime, size, fps }: {
|
||||
path: string,
|
||||
video: HTMLVideoElement,
|
||||
videoStreamIndex?: number,
|
||||
audioStreamIndex?: number,
|
||||
seekTo: number,
|
||||
signal: AbortSignal,
|
||||
playSafe: () => void,
|
||||
onCanPlay: () => void,
|
||||
getTargetTime: () => number,
|
||||
size?: number,
|
||||
fps?: number,
|
||||
}) {
|
||||
let canPlay = false;
|
||||
let bufferEndTime: number | undefined;
|
||||
let bufferStartTime = 0;
|
||||
let stream;
|
||||
let done = false;
|
||||
let interval: NodeJS.Timeout | undefined;
|
||||
let objectUrl: string | undefined;
|
||||
let processChunkTimeout: NodeJS.Timeout;
|
||||
|
||||
function cleanup() {
|
||||
console.log('Cleanup');
|
||||
done = true;
|
||||
video.pause();
|
||||
if (interval != null) clearInterval(interval);
|
||||
if (processChunkTimeout != null) clearInterval(processChunkTimeout);
|
||||
stream?.abort();
|
||||
if (objectUrl != null) URL.revokeObjectURL(objectUrl);
|
||||
video.removeAttribute('src');
|
||||
}
|
||||
|
||||
signal.addEventListener('abort', cleanup);
|
||||
|
||||
// See chrome://media-internals
|
||||
|
||||
const mediaSource = new MediaSource();
|
||||
|
||||
let streamTimestamp;
|
||||
let lastRemoveTimestamp = 0;
|
||||
|
||||
function setStandardPlaybackRate() {
|
||||
// set it a bit faster, so that we don't easily fall behind (better too fast than too slow)
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
video.playbackRate = 1.05;
|
||||
}
|
||||
|
||||
setStandardPlaybackRate();
|
||||
|
||||
const codecs: string[] = [];
|
||||
if (videoStreamIndex != null) codecs.push('avc1.42C01F');
|
||||
if (audioStreamIndex != null) codecs.push('mp4a.40.2');
|
||||
const codecTag = codecs.join(', ');
|
||||
|
||||
const mimeCodec = `video/mp4; codecs="${codecTag}"`;
|
||||
|
||||
// mp4info sample-file.mp4 | grep Codec
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API/Transcoding_assets_for_MSE
|
||||
// https://stackoverflow.com/questions/16363167/html5-video-tag-codecs-attribute
|
||||
// https://cconcolato.github.io/media-mime-support/
|
||||
// https://github.com/cconcolato/media-mime-support
|
||||
// const mimeCodec = 'video/mp4; codecs="avc1.42C01E"'; // Video only
|
||||
// const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; // Video+audio
|
||||
|
||||
if (!MediaSource.isTypeSupported(mimeCodec)) {
|
||||
throw new Error(`Unsupported MIME type or codec: ${mimeCodec}`);
|
||||
}
|
||||
|
||||
// console.log(mediaSource.readyState); // closed
|
||||
objectUrl = URL.createObjectURL(mediaSource);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
video.src = objectUrl;
|
||||
|
||||
await new Promise((resolve) => mediaSource.addEventListener('sourceopen', resolve, { once: true }));
|
||||
// console.log(mediaSource.readyState); // open
|
||||
|
||||
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
|
||||
|
||||
const getBufferEndTime = () => {
|
||||
if (mediaSource.readyState !== 'open') {
|
||||
console.log('mediaSource.readyState was not open, but:', mediaSource.readyState);
|
||||
// else we will get: Uncaught DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (sourceBuffer.buffered.length < 1) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges/start
|
||||
return sourceBuffer.buffered.end(0);
|
||||
};
|
||||
|
||||
sourceBuffer.addEventListener('updateend', () => {
|
||||
playSafe();
|
||||
}, { once: true });
|
||||
|
||||
let firstChunkReceived = false;
|
||||
|
||||
const processChunk = async () => {
|
||||
try {
|
||||
const chunk = await stream.readChunk();
|
||||
if (chunk == null) {
|
||||
console.log('End of stream');
|
||||
return;
|
||||
}
|
||||
if (done) return;
|
||||
|
||||
if (!firstChunkReceived) {
|
||||
firstChunkReceived = true;
|
||||
console.log('First chunk received');
|
||||
}
|
||||
|
||||
sourceBuffer.appendBuffer(chunk);
|
||||
} catch (err) {
|
||||
console.error('processChunk failed', err);
|
||||
processChunkTimeout = setTimeout(processChunk, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
sourceBuffer.addEventListener('error', (err) => console.error('sourceBuffer error, check DevTools ▶ More Tools ▶ Media', err));
|
||||
|
||||
// video.addEventListener('loadeddata', () => console.log('loadeddata'));
|
||||
// video.addEventListener('play', () => console.log('play'));
|
||||
video.addEventListener('canplay', () => {
|
||||
console.log('canplay');
|
||||
if (!canPlay) {
|
||||
canPlay = true;
|
||||
onCanPlay();
|
||||
}
|
||||
}, { once: true });
|
||||
|
||||
sourceBuffer.addEventListener('updateend', ({ timeStamp }) => {
|
||||
if (done) return;
|
||||
|
||||
streamTimestamp = timeStamp; // apparently this timestamp cannot be trusted much
|
||||
|
||||
const bufferThrottleSec = isDev ? 5 : 10; // how many seconds ahead of playback we want to buffer
|
||||
const bufferMaxSec = bufferThrottleSec + (isDev ? 5 : 60); // how many seconds we want to buffer in total (ahead of playback and behind)
|
||||
|
||||
bufferEndTime = getBufferEndTime();
|
||||
|
||||
// console.log('updateend', { bufferEndTime })
|
||||
if (bufferEndTime != null) {
|
||||
const targetTime = getTargetTime();
|
||||
|
||||
const bufferedTime = bufferEndTime - lastRemoveTimestamp;
|
||||
|
||||
if (bufferedTime > bufferMaxSec && !sourceBuffer.updating) {
|
||||
try {
|
||||
lastRemoveTimestamp = bufferEndTime;
|
||||
const removeTo = bufferEndTime - bufferMaxSec;
|
||||
bufferStartTime = removeTo;
|
||||
console.log('sourceBuffer remove', 0, removeTo);
|
||||
sourceBuffer.remove(0, removeTo); // updateend will be emitted again when this is done
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('sourceBuffer remove failed', err);
|
||||
}
|
||||
}
|
||||
|
||||
const bufferAheadSec = bufferEndTime - targetTime;
|
||||
if (bufferAheadSec > bufferThrottleSec) {
|
||||
console.debug(`buffer ahead by ${bufferAheadSec}, throttling stream read`);
|
||||
processChunkTimeout = setTimeout(processChunk, 1000);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// make sure we always process the next chunk
|
||||
processChunk();
|
||||
});
|
||||
|
||||
stream = createMediaSourceStream({ path, videoStreamIndex, audioStreamIndex, seekTo, size, fps });
|
||||
|
||||
interval = setInterval(() => {
|
||||
if (mediaSource.readyState !== 'open') {
|
||||
console.warn('mediaSource.readyState was not open, but:', mediaSource.readyState);
|
||||
// else we will get: Uncaught DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).
|
||||
return;
|
||||
}
|
||||
|
||||
const targetTime = getTargetTime();
|
||||
const playbackDiff = targetTime != null ? targetTime - video.currentTime : undefined;
|
||||
|
||||
const streamTimestampDiff = streamTimestamp != null && bufferEndTime != null ? (streamTimestamp / 1000) - bufferEndTime : undefined; // not really needed, but log for curiosity
|
||||
console.debug('bufferStartTime', bufferStartTime, 'bufferEndTime', bufferEndTime, 'targetTime', targetTime, 'playback:', video.currentTime, 'playbackDiff:', playbackDiff, 'streamTimestamp diff:', streamTimestampDiff);
|
||||
|
||||
if (!canPlay || targetTime == null) return;
|
||||
|
||||
if (sourceBuffer.buffered.length !== 1) {
|
||||
// not sure why this would happen or how to handle this
|
||||
console.warn('sourceBuffer.buffered.length was', sourceBuffer.buffered.length);
|
||||
}
|
||||
|
||||
if ((video.paused || video.ended) && !done) {
|
||||
console.warn('Resuming unexpectedly paused video');
|
||||
playSafe();
|
||||
}
|
||||
|
||||
// make sure the playback keeps up
|
||||
// https://stackoverflow.com/questions/23301496/how-to-keep-a-live-mediasource-video-stream-in-sync
|
||||
if (playbackDiff != null && playbackDiff > 1) {
|
||||
console.warn(`playback severely behind by ${playbackDiff}s, seeking to desired time`);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
video.currentTime = targetTime;
|
||||
setStandardPlaybackRate();
|
||||
} else if (playbackDiff != null && playbackDiff > 0.3) {
|
||||
console.warn(`playback behind by ${playbackDiff}s, speeding up playback`);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
video.playbackRate = 1.5;
|
||||
} else {
|
||||
setStandardPlaybackRate();
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// OK, everything initialized and ready to stream!
|
||||
processChunk();
|
||||
}
|
||||
|
||||
function drawJpegFrame(canvas: HTMLCanvasElement, jpegImage: Buffer) {
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const img = new Image();
|
||||
if (ctx == null) {
|
||||
console.error('Canvas context is null');
|
||||
return;
|
||||
}
|
||||
img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
img.onerror = (error) => console.error('Canvas JPEG image error', error);
|
||||
img.src = `data:image/jpeg;base64,${jpegImage.toString('base64')}`;
|
||||
}
|
||||
|
||||
async function createPauseImage({ path, seekTo, videoStreamIndex, canvas, signal }) {
|
||||
const { promise, abort } = readOneJpegFrame({ path, seekTo, videoStreamIndex });
|
||||
signal.addEventListener('abort', () => abort());
|
||||
const jpegImage = await promise;
|
||||
drawJpegFrame(canvas, jpegImage);
|
||||
}
|
||||
|
||||
function MediaSourcePlayer({ rotate, filePath, playerTime, videoStream, audioStream, commandedTime, playing, eventId, masterVideoRef, mediaSourceQuality }) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const onVideoError = useCallback((error) => {
|
||||
console.error('video error', error);
|
||||
}, []);
|
||||
|
||||
const state = useMemo(() => (playing
|
||||
? { startTime: commandedTime, playing, eventId }
|
||||
: { startTime: playerTime, playing, eventId }
|
||||
), [commandedTime, eventId, playerTime, playing]);
|
||||
|
||||
const [debouncedState] = useDebounce(state, 200, {
|
||||
equalityFn: (a, b) => a.startTime === b.startTime && a.playing === b.playing && a.eventId === b.eventId,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('debouncedState', debouncedState);
|
||||
}, [debouncedState]);
|
||||
|
||||
const playSafe = useCallback(async () => {
|
||||
try {
|
||||
await videoRef.current?.play();
|
||||
} catch (err) {
|
||||
console.error('play failed', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
|
||||
if (debouncedState.startTime == null) {
|
||||
return () => undefined;
|
||||
}
|
||||
|
||||
const onCanPlay = () => setLoading(false);
|
||||
const getTargetTime = () => masterVideoRef.current.currentTime - debouncedState.startTime;
|
||||
|
||||
const abortController = new AbortController();
|
||||
|
||||
const video = videoRef.current;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
// When playing, we use a secondary video element, but when paused we use a canvas
|
||||
if (debouncedState.playing) {
|
||||
if (video == null) throw new Error('No video ref');
|
||||
|
||||
let size: number | undefined;
|
||||
if (videoStream != null) {
|
||||
if (mediaSourceQuality === 0) size = 800;
|
||||
else if (mediaSourceQuality === 1) size = 420;
|
||||
}
|
||||
|
||||
let fps: number | undefined;
|
||||
if (mediaSourceQuality === 0) fps = 30;
|
||||
else if (mediaSourceQuality === 1) fps = 15;
|
||||
|
||||
await startPlayback({ path: filePath, video, videoStreamIndex: videoStream?.index, audioStreamIndex: audioStream?.index, seekTo: debouncedState.startTime, signal: abortController.signal, playSafe, onCanPlay, getTargetTime, size, fps });
|
||||
} else { // paused
|
||||
if (videoStream != null) {
|
||||
await createPauseImage({ path: filePath, seekTo: debouncedState.startTime, videoStreamIndex: videoStream.index, canvas: canvasRef.current, signal: abortController.signal });
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Preview failed', err);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => abortController.abort();
|
||||
// Important that we also have eventId in the deps, so that we can restart the preview when the eventId changes
|
||||
}, [debouncedState.startTime, debouncedState.eventId, filePath, masterVideoRef, playSafe, debouncedState.playing, videoStream, mediaSourceQuality, audioStream?.index]);
|
||||
|
||||
const onFocus = useCallback((e) => {
|
||||
// prevent video element from stealing focus in fullscreen mode https://github.com/mifi/lossless-cut/issues/543#issuecomment-1868167775
|
||||
e.target.blur();
|
||||
}, []);
|
||||
|
||||
const { videoStyle, canvasStyle } = useMemo(() => {
|
||||
const sharedStyle: CSSProperties = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: rotate ? `rotate(${rotate}deg)` : undefined };
|
||||
|
||||
return {
|
||||
videoStyle: { ...sharedStyle, visibility: loading || !debouncedState.playing ? 'hidden' : undefined },
|
||||
canvasStyle: { ...sharedStyle, visibility: loading || debouncedState.playing ? 'hidden' : undefined },
|
||||
} as { videoStyle: CSSProperties, canvasStyle: CSSProperties };
|
||||
}, [loading, debouncedState.playing, rotate]);
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100%', left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', overflow: 'hidden', background: 'black', pointerEvents: 'none' }}>
|
||||
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
|
||||
<video style={videoStyle} ref={videoRef} playsInline onError={onVideoError} tabIndex={-1} onFocusCapture={onFocus} />
|
||||
{videoStream != null && <canvas width={videoStream.width} height={videoStream.height} ref={canvasRef} style={canvasStyle} tabIndex={-1} onFocusCapture={onFocus} />}
|
||||
|
||||
{loading && (
|
||||
<div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Spinner /></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(MediaSourcePlayer);
|
||||
Loading…
Reference in New Issue