h5中如何播放rtsp视频流-插件版本rtsp rtp 简介 RTSP（Real-Time Streaming Prot

rtsp rtp 简介

RTSP（Real-Time Streaming Protocol）

RTSP 是一种应用层协议，用于控制音视频流的传输。它类似于 HTTP，但专注于流媒体服务，可实现播放、暂停、停止等操作。RTSP 本身不传输数据，而是控制流媒体会话，通常配合 RTP 使用。

RTP（Real-Time Transport Protocol）

RTP 是一种传输层协议，专用于音视频流数据的传输。它在实时通信中提供时间戳和序列号以保证数据同步和正确顺序，常搭配 UDP 以降低延迟。

关系

RTSP 负责控制（信令），RTP 负责数据传输。
典型使用场景：RTSP 指挥 RTP 流媒体数据的传输，比如 IP 摄像头。

js中如何播放

思路很简单，你这个玩意html的媒体元素video 肯定不能直接播放。先用ffmpeg试一下。OK可以播放。那就把这种方式用node实现，最后打包。优点rtsp传输不会断，流健壮，基本不会出现卡顿异常现象。缺点需要下载插件麻烦。

node写个插件/服务

把ffmpeg指令node化


const WebSocket = require("ws");
const { spawn } = require("child_process");

const PORT = 8008;
const wss = new WebSocket.Server({ port: PORT });

console.log(`WebSocket server is running on ws://localhost:${PORT}`);

wss.on("connection", (ws) => {
    const rtspUrl = "rtsp://"; 
    const ffmpegProcess = startStream(rtspUrl, ws);

    ws.on("close", () => {
        console.log("WebSocket client disconnected");
        if (ffmpegProcess) {
            console.log("Stopping FFmpeg process...");
            ffmpegProcess.kill(); 
        }
    });

    ws.on("error", (err) => {
        console.error("WebSocket error:", err);
    });
});

function startStream(rtspUrl, ws) {
    console.log(`Starting FFmpeg for RTSP stream: ${rtspUrl}`);

    const ffmpeg = spawn("ffmpeg", [
        "-rtsp_transport", "tcp",  
        "-i", rtspUrl,             
        "-f", "flv",              
        "-vcodec", "copy",         
        "-an",                     
        "pipe:1",                 
    ]);

    ffmpeg.stdout.on("data", (data) => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(data);
        }
    });

    ffmpeg.stderr.on("data", (data) => {
        console.error(`FFmpeg stderr: ${data}`);
    });

    ffmpeg.on("close", (code) => {
        console.log(`FFmpeg process exited with code ${code}`);
    });

    ffmpeg.on("error", (err) => {
        console.error("FFmpeg process failed:", err);
    });

    return ffmpeg;
}

html播放

在服务器中已转为flv，也可转为MP4


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLV Player</title>
    <script src="https://cdn.jsdelivr.net/npm/flv.js@latest"></script>
</head>
<body>
    <h1>rtsp ffmpeg Player</h1>
    <video id="videoElement" controls autoplay style="width: 100%; max-width: 600px;"></video>

    <script>
        if (flvjs.isSupported()) {
            const videoElement = document.getElementById("videoElement");
            const flvPlayer = flvjs.createPlayer({
                type: "flv",
                url: "ws://localhost:8008/live.flv" 
            });

            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        } else {
            console.error("FLV.js is not supported in this browser.");
        }
    </script>
</body>
</html>

打包

将node打包为插件需要ffmpeg.exe，使用pkg打包。插件版本注意ffmpeg位置以及引用。

总结

插件版本比较简单，健壮，但是使用麻烦。后面会更新一版服务端配合通过websocket传送rtp包前端播放。