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

Question

Following: https://github.com/kyriesent/node-rtsp-stream and How to display IP camera feed from an RTSP url onto reactjs app page? 我试图从闭路电视显示 RTSP stream 但它给了我一个错误。 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 中是否有替代方法？ 我不在乎我需要的只是 stream 来自闭路电视的 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/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 stream

Answer 2

我设法使用两种解决方案来完成这项工作：

1. 从此处下载jsmpeg.min.js并将其添加到与您的组件相同的目录（或任何其他所需目录）。

2. 将文件的第一部分从var JSMpeg...更改为export const JSMpeg...

3. 添加具有以下内容的组件：

import { useRef } from 'react'

const StreamPlayer = () => {
    
    const streamRef = useRef(null)

    useEffect(() => {
        const { JSMpeg } = require('./jsmpeg.min.js')
        const player = new JSMpeg.Player('ws://localhost:9999', {
            canvas: streamRef.current
        })
    }, [])

return <canvas ref={streamRef} id="stream-canvas"></canvas>
}

笔记

我不确定在useEffect中使用require是否可以，但由于JSMpeg使用的是document和window对象，因此它们必须在加载后导入。\

第二种方式

这样做是一种模块化程度较低的方式，但不包括这种潜在的不良做法：

1. 从这里下载jsmpeg.min.js并将其添加到 Nextjs 项目的/public目录中。

2. 添加具有以下内容的组件：

player = new JSMpeg.Player('ws://localhost:9999', {
    canvas: document.getElementById('stream-canvas')
})

3. 然后，在jsmpeg.min.js的末尾我添加了：

 player = new JSMpeg.Player('ws://localhost:9999', { canvas: document.getElementById('stream-canvas') })