import React, { useEffect, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { useMediaStream } from 'use-media-stream';
const VideoStream = () => {
const videoRef = useRef();
const mediaSourceRef = useRef();
useEffect(() => {
const mediaSource = new MediaSource();
mediaSourceRef.current = mediaSource;
const handleSourceOpen = () => {
const mediaSource = mediaSourceRef.current;
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
const socket = new WebSocket('ws://example.com/video-stream'); // WebSocket server address
socket.addEventListener('message', (event) => {
sourceBuffer.appendBuffer(event.data);
});
sourceBuffer.addEventListener('error', (event) => {
console.error('Error occurred while appending video: ', event);
});
videoRef.current.src = URL.createObjectURL(mediaSource);
};
mediaSource.addEventListener('sourceopen', handleSourceOpen);
return () => {
// Clean up resources
const mediaSource = mediaSourceRef.current;
mediaSource.removeEventListener('sourceopen', handleSourceOpen);
mediaSource.endOfStream();
};
}, []);
return (
<div>
<video ref={videoRef} width="640" height="480" controls></video>
<Canvas>
{/* Your 3D scene components go here */}
</Canvas>
</div>
);
};
export default VideoStream;