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

萌新小秃头

已于 2024-02-03 18:25:19 修改

阅读量1.3k

点赞数 4

文章标签：前端

于 2024-02-02 18:22:58 首次发布

本文链接：https://blog.csdn.net/S_3405008677/article/details/135998965

版权

前言：

前端是不能直接播放 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,
    });
  }
}