Cannot read properties of null (reading 'abort')

[jaynguyen2309]

Describe the bug
I have setup the jsmpeg-player library to stream a video source from websocket. I did exactly the same as the demo showed in jsmpeg-player-demo, but it came up with this error

JsmpegPlayer.tsx

Live stream page

`
/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react';
import { AppPageContainer } from '../components/layout/AppPageContainer';
import { PageContent } from '../sharedComponents/layout/PageContent';
import JsmpegPlayer from './liveStreamPage/JsmpegPlayer';

const videoOptions = {
poster: 'https://cycjimmy.github.io/staticFiles/images/screenshot/big_buck_bunny_640x360.jpg',
};

const videoOverlayOptions = {};

const LiveStreamPage = () => {
let jsmpegPlayer: any = null;

return (
    <div>
        <AppPageContainer title="Live stream">
            <PageContent title="Live stream page">
                <JsmpegPlayer
                    wrapperClassName="video-wrapper"
                    videoUrl="https://cycjimmy.github.io/staticFiles/media/big_buck_bunny_640x360.ts"
                    options={videoOptions}
                    overlayOptions={videoOverlayOptions}
                    onRef={(ref) => (jsmpegPlayer = ref)}
                />
                <div className="buttons-wrapper">
                    <button onClick={() => jsmpegPlayer.play()}>Play</button>
                    <button onClick={() => jsmpegPlayer.pause()}>Pause</button>
                    <button onClick={() => jsmpegPlayer.stop()}>Stop</button>
                </div>
            </PageContent>
        </AppPageContainer>
    </div>
);

};

export default LiveStreamPage;
`

• Device: Laptop
• OS: MacOS Sonoma 14.5
• Browser Chrome

[lszhn]

Any update? same issue under React Strict Mode