Rtsp转Flv在浏览器中播放

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。

[toc]

概述

众所周知,rtsp的流是无法在浏览器中播放的,这就导致海康摄像头、海康ISC等平台的视频流无法直接在浏览器中播放。

当下是web最盛行的时代,恨不得所有功能、系统、平台。。。都装在浏览器中。

本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。

大致流程为:

  • 准备一个rtsp流,可以通过直连摄像头、vlc自己推流等
  • 使用node技术栈搭建一个基于express的应用
  • 在express应用中通过 fluent-ffmpeg(可以简单认为是ffmpeg的包装器) 和ffmpeg进行交互
  • 使用ffmpeg解码rtsp为flv视频格式,并返回数据流
  • 在express应用中通过 express-ws 创建一个WebsocketServer服务,此服务接收ffmpeg返回的数据流,并发送到连接此服务的WebsocketClient上
  • 使用flvjs(b站开源)播放flv格式的视频,即充当WebsocketClient
    ,实际是通过接收WebsocketServer发送的数据并渲染到video标签上面

环境

本文示例代码是在如下环境下调试的

  • IDE:VsCode
  • node:16.15.0
  • npm:8.5.5
  • 脚手架:未使用express脚手架工具
  • ffmpeg:6.1.0

项目目录清单


¦   package-lock.json
¦   package.json
¦   
+---client
¦       client.html
¦       flv-1.6.2.js           
+---public
¦       index.html
¦       yikepingguo.png
¦       
+---server
        server.js
        websocket.js
  • package.json :npm包管理器配置文件
  • client:WebsocketClient
    • client.html:一个单独的html页面,用来播放视频。独立于express,需要从windows资源管理器中访问,并在浏览器中打开
    • flv.js:当前最新版本1.6.2
  • public:express应用静态资源存放目录,当前有一个helloWorld的html页面和一张示例图片。仅作用验证express应用是否启动。
  • server:WebsocketServer
    • server.js:实例化express应用
    • websocker.js:实例化一个WebsockerServer;借助ffmpeg将rtsp转换为flv

项目搭建步骤

新建一个文件夹,假设取名 RtspToFlv,并在VsCode中打开此文件夹,后续所有操作均在此文件夹操作。

在RtspToFlv中创建server文件夹。

在RtspToFlv中创建client文件夹。

引入相关npm依赖

新建一个文件 package.json ,并填入如下内容:



{
   
   
    "name": "RtspToWebsocket",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
   
   
        "start": "nodemon ./server/server.js"
    },
    "keywords": [],
    "author": {
   
   
        "email": "liangchen_beijing@163.com",
        "name": "一颗苹果",
        "url": ""
    },
    "license": "Apache-2.0",
    "dependencies": {
   
   
        "express": "4.18.3",
        "express-ws": "5.0.2",
        "nodemon": "3.1.0",
        "ws": "8.16.0",
        "websocket-stream": "5.5.2",       
        "fluent-ffmpeg": "2.1.2"
    }
}
  • script.start:配置启动脚本,执行server/server.js
  • nodemon:nodemon 是一种工具,可在检测到目录中的文件更改时通过自动重新启动 node 应用程序来帮助开发基于 node.js 的应用程序
  • dependencies:依赖包,均使用当前最新版本
  • fluent-ffmpeg:该库提供了一组函数和实用程序来抽象 ffmpeg 的命令行用法。简单来说就是包装了一层使用ffmpeg的胶水代码。要使用此库,需要已经安装了 ffmpeg。也就是说本机必须安装了ffmpeg并已经添加到了系统环境变量。

使用 npm install 安装所有的依赖。

实例化一个express应用

在server文件夹中新建一个server.js 文件,并填入如下内容:



const express = require('express')

const app = express()

const expressWs = require('express-ws')
const websocket = require('./websocket')


expressWs(app);
app.use(express.static('public'))
app.use('/websocket', websocket)
app.get('*', (req, res) => {})
app.listen(8009, () => {
  console.log('server is listening on port 8009')
})
  • app.use('/websocket', websocket):将后面创建的websocker.js模块加载进来

创建WebsocketServer并解析rtsp

在server文件夹中新建一个 websocket.js 文件,并填入如下内容:



const express = require('express');
const expressWs = require('express-ws')
var webSocketStream = require("websocket-stream/stream");
var ffmpeg = require("fluent-ffmpeg");


const router = express.Router()
expressWs(router);
router.ws('/test', (ws, req) => {
  ws.send('连接成功')
  //推视频流
  const stream = webSocketStream(ws, {
    binary: true,
    browserBufferTimeout: 1000000
  }, {
    browserBufferTimeout: 1000000
  });
   var url = "rtsp://xxx:xxx@192.168.1.xxx:xxx/ch1/main/av_stream";
  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);
  }
  //接收到消息
  ws.on('message', msg => {
    console.log("收到消息");
    ws.send(msg)
  })
})
module.exports = router
  • 创建了一个Websocket端点(/websocket/test),提供给客户端连接
  • webSocketStream:创建了一个stream对象,将ffmpeg解析出来的数据流存入stream中,并实时发送到了WebsocketClient
  • ffmpeg有丰富的配置参数,可以通过参照官方文档进行调优

至此,WebsocketServer已经搭建好了,使用 npm start 命令尝试启动express应用。

使用flv播放

从flvjs官网下载flv.js文件,并放到client文件夹下面。

在client文件夹中新建一个文件 client.html ,并填入如下内容:




<html>
<head>
    <meta charset="UTF-8">
    <title>websocket客户端,使用flvjs播放视频</title>
    <style>
        .websocket {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 10px auto 0 auto;
            text-align: center;
        }
        #receive-box {
            width: 300px;
            height: 200px;
            overflow: auto;
            margin: 0 auto 10px auto;
            border: 1px solid #25d1ff;
        }
        #msg-need-send {
            width: 300px;
            height: 100px;
            resize: none;
            border-radius: 5px;
        }
        #send-btn {
            border: none;
            border-radius: 5px;
            background: #25d1ff;
            padding: 5px 10px;
            color: #fff;
            cursor: pointer;
        }
        #exit {
            border: 1px solid #ccc;
            border-radius: 5px;
            background: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h5>socket-client</h5>
    <div class="websocket">
        <div class="receive">
            <p>服务端返回的消息:</p>
            <div id="receive-box"></div>
        </div>
        <div class="send">
            <p>给服务端发送消息:</p>
            <textarea type="text" id="msg-need-send"></textarea>
            <p>
                <button id="send-btn">点击发消息给服务端</button>
            </p>
        </div>
        <button id="exit">关闭连接</button>
    </div>
    <h5>播放器</h5>
    <div>
        <video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
            <source src="">
        </video>
    </div>

    <script src="./flv-1.6.2.js"></script>
    <script>
        window.onload = function () {
            // test();
            play();

        };
        //测试websocket收发消息
        function test() {
            const ws = new WebSocket('ws://127.0.0.1:8009/websocket/test')
            ws.onopen = e => {
                console.log(`WebSocket 连接状态: ${ws.readyState}`)
            }
            ws.onmessage = data => {
                console.log("接收到消息");
                const receiveBox = document.getElementById('receive-box')
                receiveBox.innerHTML += `<p>${data.data}</p>`
                receiveBox.scrollTo({
                    top: receiveBox.scrollHeight,
                    behavior: "smooth"
                })
            }
            ws.onclose = data => {
                console.log('WebSocket连接已关闭')
                console.log(data);
            }
            //发送msg
            var sendBtn = document.getElementById("send-btn");
            sendBtn.onclick = () => {
                ws.send(document.getElementById('msg-need-send').value)
            }
            //关闭websocket连接
            var exitBtn = document.getElementById("exit");
            exitBtn.onclick = () => {
                ws.close()
            }
        }
        //播放视频
        function play() {
            videoElement = document.getElementById('my-player');
            if (flvjs.isSupported()) {
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',                    //媒体类型
                    //flv格式媒体URL,即ws-server地址
                    url: 'ws://127.0.0.1:8009/websocket/test',
                    isLive: true,                   //数据源是否为直播流
                    hasAudio: false,                //数据源是否包含有音频
                    hasVideo: true,                 //数据源是否包含有视频
                    enableStashBuffer: false        //是否启用缓存区
                }, {
                    enableWorker: false,            //不启用分离线程
                    enableStashBuffer: false,       //关闭IO隐藏缓冲区
                    autoCleanupSourceBuffer: true   //自动清除缓存
                });
                flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点
                flvPlayer.load();                   //加载数据流
                flvPlayer.play();                   //播放数据流
            } else {
                alert("not support flvjs");
            }
        }

    </script>
</body>
  • html文件中分两部分,第一部分是一个简单的Websocket功能测试,第二部分放了一个video的标签,flvjs将把视频流渲染到video中
  • js代码中有两个方法,test用于测试Websocket连接和通信,play方法用于播放flv视频流
  • url:注意url中path为/websocket/test,在服务的使用了
    express.Router,实际WebsocketServer对外提供服务的端点就是/websocket/test
  • flvjs参数:flvjs有丰富的各种参数和回调,可以参照官方文档做调优

浏览器中测试

进入windows的文件资源管理器并使用edge打开client.html,将可以看到rtsp视频流的画面已经渲染到了浏览器中,并且网络连接的地方不停的接收这WebSocketServer发送的flv视频流数据。

ws请求地址为:ws://127.0.0.1:8009/websocket/test

代码

引用

目录
相关文章
|
Web App开发 编解码 安全
在高版本谷歌Chrome浏览器中用VLC播放海康、大华RTSP实时视频完全方案
随着互联网基础设施的完善以及4G、5G等技术的大规模商用,在Chrome、Firefox、Edge等浏览器播放RTSP视频流也慢慢成为了信息化系统的行业标准。早些年还可用VLC播放器在网页中播放RTSP视频流,好景不长,2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,导致在高版本的Chrome等网页中播放海康威视、大华等摄像头RTSP视频流也成了奢望。
2063 0
|
8月前
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
320 0
|
7月前
|
编解码 Cloud Native 前端开发
H.265 视频在浏览器中的播放问题探究
H.265 视频在浏览器中的播放问题探究
127 0
|
8月前
|
编解码 网络协议 开发工具
IE浏览器下如何低延迟播放RTSP或RTMP流
首先,虽然本文是介绍IE浏览器下OCX控件播放RTSP或RTMP,但这种方式并不推荐,毕竟它只能用于IE浏览器环境下,局限太大,而且随着微软IE浏览器的更新,不确定后续支持情况。当然,话说回来,如果是在特定的使用场景下,只需要某些版本IE浏览器支持,但对延迟和稳定性要求非常高,OCX控件方式也不失为一个好的选择。
104 1
|
8月前
|
编解码 网络协议 开发工具
如何在IE浏览器播放RTSP或RTMP流
好多开发者一直苦恼于如何在IE浏览器环境下,构建低延迟的RTSP或RTMP播放,对于RTSP流来说,好多公司通常的做法是把RTSP转RTMP,然后分发到RTMP服务器,然后服务器转http-flv出来,浏览器直接播放http-flv流,亦或通过flash控件直接播放RTMP流,还有就是,转hls流出来,缺点是hls流延迟更大。
302 0
|
编解码 应用服务中间件 nginx
几种将设备视频流转码成浏览器能够播放的协议的方法
将rtsp转换成浏览器能访问的hls协议和http-flv协议的方法
482 0
|
Web App开发
有的浏览器可以直接打开rtsp,有的不能
有的浏览器可以直接打开rtsp,有的不能
133 0
|
Web App开发 编解码 监控
海康威视、浙江大华RTSP在Chrome、Firefox等浏览器低延迟(300ms)播放解决方案
在遍地都是摄像头的今天,往往需要在各种B/S信息化系统中集成视频播放功能,海康、大华、华为等大厂摄像头遵循监控行业标准,一般只支持RTSP传输协议,而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放!
747 0
海康威视、浙江大华RTSP在Chrome、Firefox等浏览器低延迟(300ms)播放解决方案
|
12天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
31 0
|
12天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
70 1