title: NextJS not working with jsmpeg/node-rtsp-stream. Trying to display RTSP stream
body: <p>Following: <a href="https://github.com/kyriesent/node-rtsp-stream" rel="nofollow noreferrer">https://github.com/kyriesent/node-rtsp-stream</a> and <a href="https://stackoverflow.com/questions/57290637/how-to-display-ip-camera-feed-from-an-rtsp-url-onto-reactjs-app-page">How to display IP camera feed from an RTSP url onto reactjs app page?</a> I was trying to display the RTSP stream from a CCTV but it gives me an error. <code>ReferenceError: document is not defined</code> at <code>scripts\jsmpeg.min.js (1:701) @ eval</code></p>
  <p>I haven't found a single implementation of this module in NextJS so I might be doing something wrong but I can't tell what. And I didn't find any better solution for NextJS.</p>
  <p>There wasn't anything to get me out in: <a href="https://github.com/phoboslab/jsmpeg" rel="nofollow noreferrer">https://github.com/phoboslab/jsmpeg</a> but I might be using it wrong in here.</p>
  <p>The rabbit hole started from this: <a href="https://stackoverflow.com/questions/2245040/how-can-i-display-an-rtsp-video-stream-in-a-web-page">How can I display an RTSP video stream in a web page?</a> but things are either outdated, do not apply or I couldn't figure them out.</p>
  <h4>The actual question:</h4>
  <p>How can I fix the error I get? Is there an alternative to this in NextJS? I don't care how all I need is to stream the RTSP feed from a CCTV.</p>
  <h3>Folder Structure:</h3>
  <pre><code>components
     -layout
        -Stream.js
  pages
     -api
     -stream
         -[streamId].js
         -app.js
     -index.js
  scripts
      -jsmpeg.min.js
  </code></pre>
  <p><code>Stream.js</code> is a component in <code>stream/app.js</code> and <code>stream/app.js</code> is used in <code>stream/[streamId].js</code></p>
  <h3>Client-side : <code>Stream.js</code></h3>
  <pre class="lang-js prettyprint-override"><code>import JSMpeg from &quot;../../scripts/jsmpeg.min.js&quot;;
  
  const Stream = (props) =&gt; {
    const player = new JSMpeg.Player(&quot;ws://localhost:9999&quot;, {
      canvas: document.getElementById(&quot;video-canvas&quot;), // Canvas should be a canvas DOM element
    });
  
   return (
      &lt;Fragment&gt;
          &lt;canvas
            id=&quot;video-canvas&quot;
            className={classes.canvas}
            onMouseDown={onMouseDownHandler}
          &gt;&lt;/canvas&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  <h3>Server-side : <code>[streamId.js]</code></h3>
  <pre class="lang-js prettyprint-override"><code>export async function getStaticProps(context) {
  const StreamCCTV = require(&quot;node-rtsp-stream&quot;);
    const streamCCTV = new StreamCCTV({
      ffmpegPath: &quot;C:\\Program Files\\ffmpeg\\bin\\ffmpeg.exe&quot;, //! remove on Ubuntu
      name: &quot;name&quot;,
      streamUrl: &quot;rtsp://someuser:somepassword@1.1.1.1&quot;,
      wsPort: 9999,
      ffmpegOptions: {
        // options ffmpeg flags
        &quot;-stats&quot;: &quot;&quot;, // an option with no neccessary value uses a blank string
        &quot;-r&quot;: 30, // options with required values specify the value after the key
      },
    });
  
  </code></pre>
  <h6>Edit:</h6>
  <p>I have also tried with <a href="https://www.npmjs.com/package/jsmpeg" rel="nofollow noreferrer">https://www.npmjs.com/package/jsmpeg</a>
  Where i changed <code>Stream.js</code> to:</p>
  <pre class="lang-js prettyprint-override"><code>import jsmpeg from 'jsmpeg';
  
  const Stream = (props) =&gt; {
    const client = new WebSocket(&quot;ws://localhost:9999&quot;)
    const player = new jsmpeg(client, {
      canvas: document.getElementById(&quot;video-canvas&quot;), // Canvas should be a canvas DOM element
    });
  
   return (
      &lt;Fragment&gt;
          &lt;canvas
            id=&quot;video-canvas&quot;
            className={classes.canvas}
            onMouseDown={onMouseDownHandler}
          &gt;&lt;/canvas&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  <p>Now the error is: <code>ReferenceError: window is not defined</code></p>