USB摄像头转rtsp推流，并转websocket流，在浏览器中播放

Killua4396

已于 2024-04-15 14:33:34 修改

阅读量2.8k

点赞数 31

文章标签： websocket

于 2024-04-15 11:27:08 首次发布

本文链接：https://blog.csdn.net/weixin_44111751/article/details/137773775

版权

本文详细介绍了如何下载并配置RTSP服务器、ffmpeg，进行USB摄像头推流，以及通过VLC拉流和使用node-rtsp-stream将RSTP流转换为WebSocket在浏览器中播放的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章

下载RTSP服务器

下载rtsp-simple-server，现在叫做mediamtx,我用了和博文一样的版本，所以下载的还是rtsp-simle-server而不是现在的mediamtx

下载ffmpeg

参考文章

然后将下载好的ffmpeg和rtsp放到同一个文件夹下

如图

在这里插入图片描述

推流

首先cd进入安装目录

E:
cd E:\Project\LabCockpit\USB摄像头推流测试

打开rtsp服务器

rtsp-simple-server.exe
#或者在linux服务器上运行在后台
nohup mediamtx &

在这里插入图片描述

再打开一个新的终端，同样cd进入安装目录

E:
cd E:\Project\LabCockpit\USB摄像头推流测试

查看自己的摄像头驱动名称

ffmpeg -list_devices true -f dshow -i dummy

在这里插入图片描述

查询到自己的摄像头设备名称为“H65 USB CAMERA”

输入指令开始推流，在指令最后可以修改url，在video处修改为你的摄像头设备

ffmpeg -f dshow -i video="H65 USB CAMERA" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video

在这里插入图片描述

推流成功

拉流

下载并安装VLC，选中左上角媒体>打开网络串流，输入URL

在这里插入图片描述

点击播放，获取到摄像头影像

在这里插入图片描述

多摄像头

当连接入两个摄像头时

再次输入查看摄像头设备

ffmpeg -list_devices true -f dshow -i dummy

在这里插入图片描述

发现有两个H65 USB CAMERA，这个时候推流就要用摄像头的别名，下面的Alternative name

ffmpeg -f dshow -i video="@device_pnp_\\?\usb#vid_0c45&pid_6368&mi_00#6&ba256cb&0&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video1
ffmpeg -f dshow -i video="@device_pnp_\\?\usb#vid_0c45&pid_6368&mi_00#6&3483702d&0&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video2

将video改成摄像头别名，然后将最后的URL改成video1和video2即可

rstp流在浏览器播放

现在的浏览器不支持rstp格式的视频流，在网上查询解决方式，最终方案是经转码后视频流通过websocket传送给客户端，再将视频流解码成图片通过canvas渲染出来，参考文章

首先在ubuntu服务器上安装node和npm

sudo apt install node
sudo apt install npm

然后新建一个文件夹rtsp-to-web

mkdir rtsp-to-web
cd rtsp-to-web

在里面安装node-rtsp-stream

npm install node-rtsp-stream -S

随后创建app.js并写入内容

touch app.js

const stream = require('node-rtsp-stream')
 new stream({
  name: 'video-stream',
  streamUrl: 'rtsp://114.214.236.207:8554/video1',//rtsp地址
  wsPort: 9999,//端口号
  ffmpegOptions: { 
    '-stats': '', 
    '-r': 30 ,//视频帧数
    '-s': '1920*1080' //视频分辨率
  }
})

随后启动服务

node app.js

服务启动成功

在这里插入图片描述

随后在本地任意处通过git命令下载jsmpeg.min.js

git clone https://github.com/phoboslab/jsmpeg.git

编写测试界面，并把jsmpeg.min.js复制到同一目录下

<!DOCTYPE >
<html>
  <head>
    <script src="./jsmpeg.min.js"></script>
    <style>
      #video{
        width: 1000px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <canvas id="video"></canvas>
    <button onclick="onPlay()">播放</button>
    <button onclick="onPause()">暂停</button>
    <button onclick="onStop()">停止</button>
  </body>
  <script>
    var canvas = document.getElementById("video");
    var url = "ws://114.214.236.207:9999";//node服务ip+端口号，本机node服务默认127.0.0.1
    var player = new JSMpeg.Player(url, { canvas });

    //开始播放
    function onPlay() {
      player.play();
    }

    //暂停播放
    function onPause() {
      player.pause();
    }

    //停止播放
    function onStop() {
      player.stop();
    }
  </script>
</html>