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

浏览器WEB播放RTSP

注意:浏览器不能直接播放RTSP,必须转换后都能播放。这一点所有的播放都是如此。

  • 参考

https://github.com/kyriesent/node-rtsp-stream

GitHub - phoboslab/jsmpeg: MPEG1 Video Decoder in JavaScript

  • 相关文件方便下载

https://download.csdn.net/download/quantum7/90459890

  • 安装node/npm
  • 安装ffmpeg
sudo apt install -y ffmpeg
  • 服务器:安装node-rtsp-stream
npm install node-rtsp-stream
  • 服务器:启动

如果没有RTSP流或访问不到,可以自己模拟一个。具体参考:

文件app.js

Stream = require('node-rtsp-stream')
stream = new Stream({
  name: 'name',
  streamUrl: 'rtsp://10.0.2.15:8554/test.264',
  wsPort: 9999,
  ffmpegOptions: { // options ffmpeg flags
    '-stats': '', // an option with no neccessary value uses a blank string
    '-r': 30 // options with required values specify the value after the key
  }
})
    

启动

node app.js
  • 新建index.html
<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<canvas id="video-canvas"></canvas>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://localhost:9999/';
		var player = new JSMpeg.Player(url, {canvas: canvas});
	</script>
</body>
</html>
  • 直接打开index.html,就能播放。

========================================================================

下面是前端方案。

  • 前端:搭建服务器

Ubuntu搭建最简单WEB服务器-CSDN博客

  • 复制jsmpeg.min.js/index.html

默认工作目录是/var/www/html

  • 测试

如果发现不能播放:

检查流是否正常,能否访问(比如在虚拟机中可能就无法访问外部流)。

流是否已结束(此时可以重启服务器,赶紧刷新)。

  • 其他方案

node-rtsp-stream

node-media-server

rtsp-streaming-server

fluent-ffmpeg

相关文章:

  • 键值对(C++实现)
  • 鸿蒙应用开发深度解析:API 14核心特性与实战指南
  • C++ Primer Plus 编程练习题 第三章 处理数据
  • 某得物 - WebView App H5调试
  • dataframe能否把列表里所有的NaN换成列表上一位的数字?
  • 蓝桥杯备考:动态规划路径类dp之迷雾森林
  • ubuntu 20.04下ZEDmini安装使用
  • 【 <一> 炼丹初探:JavaWeb 的起源与基础】之 JSP 中的内置对象:request、response、session 的使用示例
  • C++11新特性:auto遇上const时的推导规则
  • blender看不到导入的模型
  • YOLOv12本地部署教程——42%速度提升,让高效目标检测触手可及
  • 要查看 SQLite 数据库中的所有表,可以通过查询 SQLite 的系统表 sqlite_master
  • 从0到1搭建315答题抽奖小程序:技术踩坑与运营真相
  • 【Vue CLI脚手架开发】——6.scoped样式
  • javascript字符串截取有哪些
  • RabbitMQ知识点
  • 二叉树-验证二叉搜索树
  • 计算机网络开发(2)TCP\UDP区别、TCP通信框架、服务端客户端通信实例
  • RV1126采集VI视频数据流
  • 【QWEN】机器人控制器的控制周期越短精度越高吗
  • 上海英文网站建设/企业培训方案
  • 专业的网站制作专业公司/百度网站ip地址
  • 哪里有手机网站制作公司/官网制作公司
  • 网站建设找哪家好/怎么快速优化网站
  • 奉节做网站/最吸引人的营销广告文案
  • 网站制作费/营销型网站建设的重要原则