发布：2024/11/18 22:45:07作者：管理员 来源：本站 浏览次数：234
前言：
前端是不能直接播放 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就行
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4