前端播放RTSP直播流、wss协议直播流在对接的过程中碰到了返回的是rtsp视频流的url，网页是不能直接播放的，所以需

参考链接：

在对接的过程中碰到了返回的是rtsp视频流的url，网页是不能直接播放的，所以需要客户端进行转码转成浏览器能够播放的格式，我使用的是参考链接1的方案3--使用现成的JavaScript库能够实现本地转码然后进行播放。

// websocket-proxy.js
const WebSocket = require('ws');
const http = require('http');
const { spawn } = require('child_process');

const server = http.createServer();
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
    console.log('客户端连接');
    console.log('客户端连接1');

    // 启动FFmpeg将RTSP流转为MPEG1视频和MP2音频
    // 这个是开启子进程运行ffmpeg服务进行转码，我本地找不到ffmpeg临时弄的所以没有设置ffmpeg的环境变量
    // 然后就直接给的地址
    const ffmpeg = spawn('C:/ProgramData/chocolatey/lib/ffmpeg/tools/ffmpeg/bin/ffmpeg.exe', [
        '-i', 'rtsp://admin:xxx@xxx:xxx/Streaming/Channels/1501',
        '-f', 'mpegts',
        '-codec:v', 'mpeg1video',
        '-b:v', '800k',
        '-r', '25',
        '-s', '640x360',
        '-bf', '0',
        '-codec:a', 'mp2',
        '-ar', '44100',
        '-ac', '1',
        '-b:a', '64k',
        '-'
    ]);
    // 监听进度信息（stderr）
    ffmpeg.stderr.on('data', (data) => {
        console.log('进度信息:', data.toString());
        ws.send(data.toString()); // 如果需要发送给 WebSocket
    });
    // 将FFmpeg输出发送到WebSocket客户端
    ffmpeg.stdout.on('data', (data) => {
        console.log(data, 'data');
        ws.send(data);
    });

    ws.on('close', () => {
        ffmpeg.kill();
        console.log('客户端断开');
    });
});

server.listen(8080, () => {
    console.log('WebSocket代理服务器运行在端口8080');
});

<!DOCTYPE html>
<html>

<head>
    <title>JSMpeg RTSP播放器</title>
    <!--用的内网这个文件有时候加载不了-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jsmpeg-player@3.0.3/build/jsmpeg-player.min.js"></script> -->
    <script src="./jsmpeg.js"></script> 
</head>

<body>
    <canvas id="video-container"></canvas>

    <script>
        // 创建JSMpeg播放器
        const player = new JSMpeg.Player(`ws://xxx:xxx/cockpit/rtspVideoPlay?rtspUrl=rtsp://xxx/Streaming/Channels/1501`, {
            canvas: document.getElementById('video-container'),
            autoplay: true,
            audio: false,
            videoBufferSize: 512 * 1024
        });
        console.log(player, 'player');
    </script>
</body>

</html>

这个代码是能够直接播放并且运行的

wss协议播放直播流

我使用的是Home | Jessibuca

demo参考：