全国服务热线:4008-888-888

技术知识

HTML5 播发 RTSP 视頻的案例编码

现阶段大多数数互联网摄像头全是根据 RTSP 协议书传送视頻流的,可是 HTML 其实不规范适用 RTSP 流。除 Firefox 访问器能够立即播发 RTSP 流以外,基本上沒有别的访问器能够立即播发 RTSP 流。Electron 运用是根据 Chromium 核心的,因而也不可以立即播发 RTSP 流。

在依靠1定专用工具的状况下,能够完成在 Web 网页页面上播发 RTSP 流。本文详细介绍的方式能够运用于传统式 Web 运用和 Electron 运用中,唯1的差别是将 Electron 运用的主过程作为传统式 Web 运用的服务器。

现阶段已有 RTSP 播发计划方案的比照

既然是做直播间,就必须延迟时间较低。当摄像头掉线时,也理应有1定的恶性事件提醒。处在这两点,对现阶段已有的早已完成、不用选购批准证的 RTSP 播发计划方案开展比照(处在基本原理环节的临时分不清析)。

我对这4种方法都开展了完成,总体实际效果最好是的還是第4种计划方案,占有端口号少,延迟时间低,3D渲染速率快,并且线下恶性事件易于解决。

根据 flv.js 的 RTSP 播发计划方案

flv.js 是 Bilibili 开源系统的1款 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")  // 这里能够加上1些 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 的輸出,而并不是起动1个新的 ffmpeg 过程串流。

访问器端(3D渲染过程)

示例应用 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 的视頻《白鹿原》,能够看1下这个实际效果。

播发实际效果十分好,彻底沒有卡顿和花屏,CPU 占有率也不高。

示例编码库房: WhuRS-FGis/html5-rtsp 示例编码库房:

总结

以上所述是网编给大伙儿详细介绍的HTML5 播发 RTSP 视頻的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服