HTML5 播放 RTSP 视频的实例代码


Posted in HTML / CSS onJuly 29, 2019

目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外,几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的,因此也不能直接播放 RTSP 流。

在借助一定工具的情况下,可以实现在 Web 页面上播放 RTSP 流。本文介绍的方法可以应用于传统 Web 应用和 Electron 应用中,唯一的区别是将 Electron 应用的主进程当作传统 Web 应用的服务器。

目前已有 RTSP 播放方案的对比

既然是做直播,就需要延迟较低。当摄像头掉线时,也应当有一定的事件提示。处于这两点,对目前已有的已经实现、无需购买许可证的 RTSP 播放方案进行对比(处于原理阶段的暂时不分析)。

HTML5 播放 RTSP 视频的实例代码

我对这四种方式都进行了实现,整体效果最好的还是第4种方案,占用端口少,延迟低,渲染速度快,而且离线事件易于处理。

基于 flv.js 的 RTSP 播放方案

flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放,视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输,视频格式需要为 FLV 格式。

服务器端(主进程)

服务器端采用 express + express-ws 框架进行编写,当有 HTTP 请求发送到指定的地址时,启动 ffmpeg 串流程序,直接将 RTSP 流封装成 FLV 格式的视频流,推送到指定的 WebSocket 响应流中。

import * as express from "express";
import * as expressWebSocket from "express-ws";
import ffmpeg from "fluent-ffmpeg";
import webSocketStream from "websocket-stream/stream";
import WebSocket from "websocket-stream";
import * as http from "http";
function localServer() {
    let app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, {
        perMessageDeflate: true
    });
    app.ws("/rtsp/:id/", rtspRequestHandle)
    app.listen(8888);
    console.log("express listened")
}
function rtspRequestHandle(ws, req) {
    console.log("rtsp request handle");
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    let url = req.query.url;
    console.log("rtsp url:", url);
    console.log("rtsp params:", req.params);
    try {
        ffmpeg(url)
            .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
            .on("start", function () {
                console.log(url, "Stream started.");
            })
            .on("codecData", function () {
                console.log(url, "Stream codecData.")
             // 摄像机在线处理
            })
            .on("error", function (err) {
                console.log(url, "An error occured: ", err.message);
            })
            .on("end", function () {
                console.log(url, "Stream end!");
             // 摄像机断线的处理
            })
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
    } catch (error) {
        console.log(error);
    }
}

为了实现较低的加载时间,可以为 ffmpeg 添加如下参数:

  • analyzeduration 可以降低解析码流所需要的时间
  • max_delay 资料上写的具体作用不太记得了,效果没有 analyzeduration 明显

当然这个实现还比较粗糙。当有多个相同地址的请求时,应当增加 ffmpeg 的输出,而不是启动一个新的 ffmpeg 进程串流。

浏览器端(渲染进程)

示例使用 Vue 框架进行页面设计。

<template>
    <div>
        <video class="demo-video" ref="player"></video>
    </div>
</template>
<script>
import flvjs from "flv.js";
export default {
    props: {
        rtsp: String,
        id: String
    },
    /**
     * @returns {{player: flvjs.Player}}
     */
    data () {
        return {
            player: null
        }
    },
    mounted () {
        if (flvjs.isSupported()) {
            let video = this.$refs.player;
            if (video) {
                this.player = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
                });
                this.player.attachMediaElement(video);
                try {
                    this.player.load();
                    this.player.play();
                } catch (error) {
                    console.log(error);
                };
            }
        }
    },
    beforeDestroy () {
        this.player.destory();
    }
}
</script>
<style>
    .demo-video {
        max-width: 480px; 
        max-height: 360px;
    }
</style>

效果展示

用 Electron 页面展示了 7 个 Hikvison NVR 的摄像头,可以实现低延迟,低 CPU 占用,无花屏现象。由于涉及保密,这里就不放截图了。

同样的方法我播放了 9 个本地 1080p 的视频《白鹿原》,可以看一下这个效果。

HTML5 播放 RTSP 视频的实例代码

播放效果非常好,完全没有卡顿和花屏,CPU 占用率也不高。

示例代码仓库: WhuRS-FGis/html5-rtsp 示例代码仓库:

总结

以上所述是小编给大家介绍的HTML5 播放 RTSP 视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 #HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 #HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 #HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 #HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 #HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 #HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 #HTML / CSS
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
草船借箭教学反思
2014/02/03 职场文书
社区交通安全实施方案
2014/03/22 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
小学生操行评语
2014/04/22 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
公司租房协议书
2014/10/14 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
成本会计岗位职责
2015/02/03 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏