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') })