摄像头 rtsp 流转成 ws 使前端播放

前言：

前端是不能直接播放 rtsp 流的，必须通过后端转成前端支持的形式，这里是转成Websocket

1、使用 Node.js 开启一个新进程 把 rtsp 转成 MPEG1 形式 再通过Websocket传输

使用node-rtsp-stream                                                                链接：node-rtsp-stream - npm

const Stream = require("node-rtsp-stream")new Stream({  name: "测试",  streamUrl: "rtsp://rtsp流地址",  wsPort: 8080,//端口号  // ffmpeg 的一些配置参数，比如转换分辨率等，大家可以去 ffmpeg 官网自行查询  ffmpegOptions: {    "-stats": "",    "-r": 20,    "-s": "1280 720", // 分辨率  },})

注意：必须在服务器机器上（开启node.js的电脑）安装ffmpeg 

2、客户端使用 @cycjimmy/jsmpeg-player 来实现获取流，也可以自己连Websocket

这里我简单的封装了一下使用的方法                              链接：@cycjimmy/jsmpeg-player - npm

import JSMpeg from '@cycjimmy/jsmpeg-player';import { PlayerWebsocket } from "./下面的Class"// 第一个参数是 Div 的ID或者类名  第二个参数是 Ws 的地址new PlayerWebsocket('#WebpackDom', 'ws的地址');

PlayerWebsocket 类

class PlayerWebsocket {  /**********************************   * 变量s   ***********************************/  private m_VideoParentDom: Element | null;  private m_VideoDom!: HTMLCanvasElement;  private m_VideoSrc: string;  private m_JSMpeg: any;  /**********************************   * 方法s   ***********************************/  constructor(videoParentDom: Element | string, src: string) {    super();    if (videoParentDom instanceof Element) {      this.m_VideoParentDom = videoParentDom;    } else if (typeof videoParentDom === 'string') {      let dom = document.querySelector(videoParentDom);      dom ? (this.m_VideoParentDom = dom) : (this.m_VideoParentDom = null);    } else {      this.m_VideoParentDom = null;    }    this.m_VideoSrc = src;    this.init();  }  play() {    this.m_JSMpeg.play();  }  pause() {    this.m_JSMpeg.pause();  }  stop() {    this.m_JSMpeg.stop();  }  destroy() {    this.m_JSMpeg.destroy();    this.m_VideoDom?.remove();  }  upDataSrc(src: string) {    this.destroy();    this.m_VideoSrc = src;    this.init();  }  protected init() {    if (!this.m_VideoParentDom) return;    this.m_VideoDom = document.createElement('canvas');    this.m_VideoParentDom.appendChild(this.m_VideoDom);    this.m_VideoDom.style.width = '100%';    this.m_VideoDom.style.height = '100%';    this.m_JSMpeg = new JSMpeg.Player(this.m_VideoSrc, {      canvas: this.m_VideoDom,    });  }}

3、好吧其实已经好了 兄弟们直接CV就行