javascript - NextJS 不适用于 jsmpeg/node-rtsp-stream。尝试显示 RTSP 流

Question

关注:https://github.com/kyriesent/node-rtsp-stream和 How to display IP camera feed from an RTSP url onto reactjs app page?我试图显示来自闭路电视的 RTSP 流，但它给了我一个错误。 ReferenceError: document is not defined在 scripts\jsmpeg.min.js (1:701) @ eval我还没有在 NextJS 中找到这个模块的单个实现，所以我可能做错了什么，但我不知道是什么。而且我没有为 NextJS 找到更好的解决方案。
没有什么可以让我出去的:https://github.com/phoboslab/jsmpeg但我可能在这里用错了。
兔子洞由此开始:How can I display an RTSP video stream in a web page?但事情要么已经过时，要么不适用，要么我无法弄清楚。
实际问题:
如何解决我得到的错误？ NextJS 中是否有替代方法？我不在乎我只需要从 CCTV 流式传输 RTSP 提要。
文件夹结构:

components
   -layout
      -Stream.js
pages
   -api
   -stream
       -[streamId].js
       -app.js
   -index.js
scripts
    -jsmpeg.min.js

Stream.js是 stream/app.js 中的一个组件和 stream/app.js用于 stream/[streamId].js客户端: Stream.js

import JSMpeg from "../../scripts/jsmpeg.min.js";

const Stream = (props) => {
  const player = new JSMpeg.Player("ws://localhost:9999", {
    canvas: document.getElementById("video-canvas"), // Canvas should be a canvas DOM element
  });

 return (
    <Fragment>
        <canvas
          id="video-canvas"
          className={classes.canvas}
          onMouseDown={onMouseDownHandler}
        ></canvas>
    </Fragment>
  );
};

服务器端: [streamId.js]

export async function getStaticProps(context) {
const StreamCCTV = require("node-rtsp-stream");
  const streamCCTV = new StreamCCTV({
    ffmpegPath: "C:\\Program Files\\ffmpeg\\bin\\ffmpeg.exe", //! remove on Ubuntu
    name: "name",
    streamUrl: "rtsp://someuser:somepassword@1.1.1.1",
    wsPort: 9999,
    ffmpegOptions: {
      // options ffmpeg flags
      "-stats": "", // an option with no neccessary value uses a blank string
      "-r": 30, // options with required values specify the value after the key
    },
  });

编辑:
我也试过 https://www.npmjs.com/package/jsmpeg
我改变的地方 Stream.js至:

import jsmpeg from 'jsmpeg';

const Stream = (props) => {
  const client = new WebSocket("ws://localhost:9999")
  const player = new jsmpeg(client, {
    canvas: document.getElementById("video-canvas"), // Canvas should be a canvas DOM element
  });

 return (
    <Fragment>
        <canvas
          id="video-canvas"
          className={classes.canvas}
          onMouseDown={onMouseDownHandler}
        ></canvas>
    </Fragment>
  );
};

现在错误是: ReferenceError: window is not defined

Answer 1

jsmpeg 只能播放 mpeg1。请使用带有 mpegts 格式流的 ffmpeg