I am using Javascript, however the possibly important caveat is in a WebView. I have a stream of data which is an mp4 that I can retrieve like so
window.runtime.EventsOn('playback-continue', (chunk) => {
console.log("chunk ", chunk)
queue.push(new Uint8Array(chunk));
appendToBuffer(sourceBuffer);
});
I have no issues retrieving the bytes this way (if i print the chunk
i can see the data albeit its printed in base64).
However I can’t seem to be able to use this to stream a video into a player.
My component looks like
const VideoPlayer = () => {
const videoRef = useRef(null);
const mimeCodec = 'video/mp4; codecs="avc1.4D401F"';
let queue = [];
const mediaSource = new MediaSource();
useEffect(() => {
if (!('MediaSource' in window) || !MediaSource.isTypeSupported(mimeCodec)) {
console.error('Unsupported MIME type or codec: ', mimeCodec);
return;
}
const video = videoRef.current;
video.srcObject = mediaSource;
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
window.runtime.EventsOn('playback-continue', (chunk) => {
console.log("chunk ", chunk)
queue.push(new Uint8Array(chunk));
appendToBuffer(sourceBuffer);
});
window.runtime.EventsOn('playback-end', () => {
mediaSource.endOfStream();
});
function appendToBuffer(sourceBuffer) {
if (queue.length > 0 && !sourceBuffer.updating && mediaSource.readyState === 'open') {
sourceBuffer.appendBuffer(queue.shift());
}
}
sourceBuffer.addEventListener('updateend', () => appendToBuffer(sourceBuffer));
sourceBuffer.addEventListener('error', (e) => console.error('SourceBuffer error:', e));
});
return () => {
window.runtime.EventsOff('playback-continue');
window.runtime.EventsOff('playback-end');
};
}, []);
const startStreaming = () => {
const videoPath = '/Users/username/Desktop/video.mp4'; // Change to your actual video file path
OpenVideoFile(videoPath);
};
const stopStreaming = () => {
mediaSource.endOfStream();
};
return (
<div>
<button onClick={startStreaming}>Start Streaming</button>
<button onClick={stopStreaming}>Stop Streaming</button>
<video ref={videoRef} controls />
</div>
);
};
I have tried to find blogs/tutorials but I think the issue is how I am passing the stream to the player, not the player code itself.
I just don’t see anything except a continual spinner on the player
P.S OpenVideoFile
calls a backend function that begins emitting the stream