• 售前

  • 售后

热门帖子
入门百科

html5播放rtsp方案

[复制链接]
紫罗兰的叶栏 显示全部楼层 发表于 2022-8-7 23:00:01 |阅读模式 打印 上一主题 下一主题
html5播放rtsp方案,网上很多教程是利用rtsp转rtmp,不外rtmp须要falsh的支持,但是在chrome已经默认禁用、包罗将来也会渐渐镌汰,全部终极这种方案被镌汰。一种叫jsmpeg的插件,它紧张是通过webSocket发送MPEG,前端通过js剖析MPEG不绝绘制canvas,包罗音频。终极测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右,性能蛮高的。
下面说一下怎么安装
准备工具
1 . Ffmpeg,设置情况添加到path变量中
2 . Node.js),设置情况添加到path变量中
3 . jsmpeg,运行主步伐
4 . 运行jsmpeg
解压jsmpeg压缩文件到某个盘符,内里出现有一个websocket-relay.js,我们紧张运行这个js文件

在运行websocket-relay.js之前node须要安装webSocket模块
终端: npm install ws
运行jsmpeg文件夹内里的websocket-relay.js
终端: node websocket-relay.js supersecret 8081 8082
阐明: Supersecret是暗码 8081是ffmpeg推送端口8082是前端webSocket端口
运行解码步伐
终端:ffmpeg -i "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret


上述方案想要真正投入利用至少要办理同时播放多个rtsp流的题目,官方提供websocket-relay.js只能播放一个源,以是须要重写内里的代码,思量到性能题目,最幸亏有GPU的客户端利用,否则性能会是一个瓶颈,网络带宽也是一个值得思量的题目
现在已有 RTSP 播放方案的对比

既然是做直播,就须要耽误较低。当摄像头掉线时,也应当有肯定的变乱提示。处于这两点,对现在已有的已经实现、无需购买允许证的 RTSP 播放方案举行对比(处于原理阶段的暂时不分析)。

基于 flv.js 的 RTSP 播放方案
flv.js是 Bilibili 开源的一款 HTML5 欣赏器。依靠于 Media Source Extension 举行视频播放,视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输,视频格式须要为 FLV 格式。
   本文福利, C++音视频学习资料包、技能视频,内容包罗(音视频开辟,口试题,FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,srs)↓↓↓↓↓↓见下面↓↓文章底部↓↓
  服务器端(主历程)
服务器端接纳 express + express-ws 框架举行编写,当有 HTTP 哀求发送到指定的地点时,启动 ffmpeg 串流步伐,直接将 RTSP 流封装成 FLV 格式的视频流,推送到指定的 WebSocket 相应流中。
  1. import * as express from "express";
  2. import * as expressWebSocket from "express-ws";
  3. import ffmpeg from "fluent-ffmpeg";
  4. import webSocketStream from "websocket-stream/stream";
  5. import WebSocket from "websocket-stream";
  6. import * as http from "http";
  7. function localServer() {
  8.     let app = express();
  9.     app.use(express.static(__dirname));
  10.     expressWebSocket(app, null, {
  11.         perMessageDeflate: true
  12.     });
  13.     app.ws("/rtsp/:id/", rtspRequestHandle)
  14.     app.listen(8888);
  15.     console.log("express listened")
  16. }
  17. function rtspRequestHandle(ws, req) {
  18.     console.log("rtsp request handle");
  19.     const stream = webSocketStream(ws, {
  20.         binary: true,
  21.         browserBufferTimeout: 1000000
  22.     }, {
  23.         browserBufferTimeout: 1000000
  24.     });
  25.     let url = req.query.url;
  26.     console.log("rtsp url:", url);
  27.     console.log("rtsp params:", req.params);
  28.     try {
  29.         ffmpeg(url)
  30.             .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
  31.             .on("start", function () {
  32.                 console.log(url, "Stream started.");
  33.             })
  34.             .on("codecData", function () {
  35.                 console.log(url, "Stream codecData.")
  36.                                   // 摄像机在线处理
  37.             })
  38.             .on("error", function (err) {
  39.                 console.log(url, "An error occured: ", err.message);
  40.             })
  41.             .on("end", function () {
  42.                 console.log(url, "Stream end!");
  43.                                   // 摄像机断线的处理
  44.             })
  45.             .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
  46.     } catch (error) {
  47.         console.log(error);
  48.     }
  49. }
复制代码
为了实现较低的加载时间,可以为 ffmpeg 添加如下参数:
analyzeduration 可以低落剖析码流所须要的时间
max_delay 资料上写的具体作用不太记得了,结果没有 analyzeduration 显着
固然这个实现还比力粗糙。当有多个雷同地点的哀求时,应当增长 ffmpeg 的输出,而不是启动一个新的 ffmpeg 历程串流。

欣赏器端(渲染历程)
示例利用 Vue 框架举行页面计划。
  1. <template>
  2.    
  3.         <video ref="player"></video>
  4.    
  5. </template>
复制代码
原文链接:html5播放rtsp方案 - 资料 - 我爱音视频网 - 构建天下最权势巨子的音视频技能交换分享论坛 
   本文福利, C++音视频学习资料包、技能视频,内容包罗(音视频开辟,口试题,FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,srs)↓↓↓↓↓↓见下面↓↓文章底部↓↓ 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作