当前位置: 首页 > news >正文

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

最近有观看摄像头监控的需求,买了个监控摄像头特地挑了一个支持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:latestcontainer_name: mediamtxports:- "8554:8554"   # RTSP- "1935:1935"   # RTMP- "18888:8888"   # HLS/WebRTC/HTTP-FLV- "8889:8889"   # WebRTC- "8189:8189/udp"- "9997:9997"   # APIvolumes:- ./mediamtx.yml:/mediamtx.ymlrestart: unless-stoppednetworks:- 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增加我的外网域名

http://www.dtcms.com/a/466238.html

相关文章:

  • LeetCode算法日记 - Day 67: 不同路径、最长递增子序列
  • 2024ICPC区域赛香港站
  • 公司网站备案怎么做运营管理培训
  • 基于STM32的智能衣柜系统/智能衣帽间/wifi衣柜/wifi衣帽间/智能家居系统
  • access 网站后台seo引擎
  • 打字训练文章大全:哪吒打字1000篇打字文章素材
  • 使用 minimind
  • MinerU与Docling:智能文档处理框架对比
  • GAN(Generative Adversarial Nets)生成对抗网络论文笔记
  • sql练习
  • GESP C++等级认证三级12-操作string2-1
  • 人像摄影网站十大排名给公司建网站
  • 哈尔滨模板建站公司推荐上海传媒公司ceo是谁
  • Kubeadm安装完Kubernetes(K8S)后,ssh连不上了
  • 东方博宜OJ 1007:统计大写英文字母的个数 ← string
  • 3D地球可视化教程 - 第3篇:地球动画与相机控制
  • Python实现跳动的爱心
  • 网络营销策略存在的问题seo搜索引擎优化是做什么的
  • 中国建设银行门户网站wordpress 功能
  • 【ProtoBuffer】简介与安装
  • 网站管理 设置开启电子商务和网络购物网站
  • vue2和vue3响应式原理有何不同?
  • 做化工的 有那些网站沈阳网站排名工具
  • 郑州做网站的大公网站建设冫首先金手指十五
  • mysql数据库压缩
  • Ubuntu 下编译 mbedtls 并使用
  • 外贸公司用什么建网站新东方雅思培训机构官网
  • prompt构建技巧
  • Golang面向对象
  • 从零开始学Wordpress建站杭州建筑工程网