目 录CONTENT

文章目录

在浏览器上播放摄像头rtsp视频流的实现方案

成培培
2025-10-10 / 0 评论 / 0 点赞 / 2 阅读 / 0 字

最近有观看摄像头监控的需求,买了个监控摄像头特地挑了一个支持rtsp推流的,我就可以自己拉取视频流观看,绕过厂家提供的app在电脑等其他设备观看,本来是准备用VLC这款软件观看的,但是还是不太方便,准备自己开发一个页面,打开页面直接观看。

浏览器播放问题

首先是因为主流浏览器(Chrome、Safari、Firefox)本身 不支持 RTSP 协议,无法使用浏览器直接观看,一般都一个中间服务负责转码为HLS、WebRTC等

MediamTX

我这里选择了一个开源的轻量级、开源的流媒体服务器,专门用来处理 实时视频流。它非常适合将 IP 摄像头的RTSP 流、RTMP 流等推送到浏览器或者其他设备播放,特别是它自带了播放页面,我可以直接使用它的页面不需要自己开发播放页面了

服务部署

我这里采用的docker部署,docker-compose.yml文件如下:

version: '3.8'
services:
  mediamtx:
    image: bluenviron/mediamtx:latest
    container_name: mediamtx
    ports:
      - "8554:8554"   # RTSP
      - "1935:1935"   # RTMP
      - "18888:8888"   # HLS/WebRTC/HTTP-FLV
      - "8889:8889"   # WebRTC
      - "8189:8189/udp"
      - "9997:9997"   # API
    volumes:
      - ./mediamtx.yml:/mediamtx.yml
    restart: unless-stopped
    networks:
      - mediamtx-net
networks:
  mediamtx-net:
    driver: bridge

映射了一些常用的端口,其中配置文件mediamtx.yml也挂载出来了,方便后面修改,主要是把我需要转码的rtsp配置进去了,当然通过API也可以动态增加,但是我这里摄像头就一个固定,直接写在配置文件里即可:

paths:
  stream1:
    source: rtsp://username:password@192.168.5.233/stream1

配置文件的最后几行添加了以上的配置,增加了一个名称为stream1的视频流,修改好后,运行docker compose up -d启动服务,查看日志启动正常:

mediamtx  | 2025/10/10 03:09:39 INF waiting for running hooks
mediamtx  | 2025/10/10 03:09:42 INF MediaMTX v1.15.1
mediamtx  | 2025/10/10 03:09:42 INF configuration loaded from /mediamtx.yml
mediamtx  | 2025/10/10 03:09:42 INF [path stream1] [RTSP source] started
mediamtx  | 2025/10/10 03:09:42 INF [RTSP] listener opened on :8554 (TCP), :8000 (UDP/RTP), :8001 (UDP/RTCP)
mediamtx  | 2025/10/10 03:09:42 INF [RTMP] listener opened on :1935
mediamtx  | 2025/10/10 03:09:42 INF [HLS] listener opened on :8888
mediamtx  | 2025/10/10 03:09:42 INF [WebRTC] listener opened on :8889 (HTTP), :8189 (ICE/UDP)
mediamtx  | 2025/10/10 03:09:42 INF [SRT] listener opened on :8890 (UDP)
mediamtx  | 2025/10/10 03:09:42 INF [path stream1] [RTSP source] ready: 3 tracks (H265, G711, Generic)
mediamtx  | 2025/10/10 03:09:45 WAR [path stream1] [RTSP source] no UDP packets received, switching to TCP

端口都打开了,配置文件里增加的stream1视频流也被加载到了

使用方法

使用方法很简单,MediamTX本身自带了播放页面,直接访问服务器的8889端口即可:
http://{MediamTX服务器IP}:8889/stream1
其中8889是WebRTC的端口,stream1就是配置文件里定义的视频流
也可以使用:http://{MediamTX服务器IP}:8888/stream1
这个是使用的HLS协议,但是延迟比较高,监控我用的是WebRTC

鉴权访问

由于我可能会在外网看监控视频,所以最好加一个鉴权访问的功能,直接修改配置文件可以解决:

# Internal authentication.
# list of users.
authInternalUsers:
  # Default unprivileged user.
  # Username. 'any' means any user, including anonymous ones.
- user: myusername
  # Password. Not used in case of 'any' user.
  pass: mypassword
  # IPs or networks allowed to use this user. An empty list means any IP.
  ips: []

user配置的访问用户名,pass配置的访问密码,这样访问视频页面就会要求输入名用户密码了,其中ips也可以配置允许访问的IP

遇到的问题

1、一开始我使用WebRTC是播放不了的,只能播放HLS,排查后发现是WebRTC还需要8189端口并且是UDP协议,需要开放该端口
2、我外网访问有问题,后来发现需要参数webrtcAdditionalHosts增加我的外网域名

0

评论区