strange streaming at bottom

[waleedd32]

Everything seems working to me except i am getting strange picture at bottom of live streaming.

When i use vlc media player to watch live stream it looks perfect, but when using rtsp-relay to stream to my web i am getting this strange thing at bottom of video, any idea how to fix that ?

and i am using react example of yours:

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { loadPlayer } from 'rtsp-relay/browser';

function App() {
const canvas = useRef(null);

useEffect(() => {
if (!canvas.current) throw new Error('Ref is null');

loadPlayer({
url: 'ws://localhost:2000/api/stream',
canvas: canvas.current,
});
}, []);

return (
< div>
{' '}
< div style = { { border: '5px solid red ' }}>
< canvas ref ={ canvas} />
< / div>
< / div>
);
}

export default App;

[k-yle]

see https://github.com/k-yle/rtsp-relay#improving-the-video-quality