轻松实现在web页面中直接播放rtsp视频流

写在前面
实现
介绍
如何使用
- 准备ffmpeg
- 运行rtsp2web
- - 参数说明（在 `new RTSP2web` 时，可配置的参数如下）：
- 前端代码
- - 参数说明
课外知识

写在前面

我之前研究在 web 中直接播放 rtsp 视频流时，写过一篇文章：【前端】rtsp 与 rtmp 视频流的播放方法。阅读这篇文章对你的学习有很大帮助。在文章中我有过详细的分析和解读，并给出了结论：

【要想在 web 中实时播放 rtsp 视频流：借助服务端拉流转码将是必要的操作。】

实现

我用 node.js 实现了拉流转码的功能，并将其打包成 rtsp2web 发布到了 npm 上。

rtsp2web 使用方便、快捷、高效，对前端开发人员来说，非常的友好。

介绍

rtsp2web 是一个依赖 ffmpeg，能实时将传入的 rtsp 视频流转码成图像数据并通过 ws 推送到前端的智能工具包。

前端页面借助 jsmpeg.js 就可以很轻松的实现播放啦~

而且 rtsp2web 还有以下特点：

高性能，配置丰富。
并发，支持同时播放多路视频。
合并同源，多个视频窗口同时播放同一个rtsp视频源时，只会创建一个转码进程，不会创建多个。
智能释放资源，智能检测当前没有在使用的转码进程，将其关闭，并释放电脑资源。

如何使用

使用 rtsp2web 是简单的；你只需：

准备ffmpeg

首先，你得确保你的电脑上安装了 ffmpeg。我已经将我的 windows 64位电脑上使用的 ffmpeg 上传到了资源库中，如果你的电脑上没有，你可以点击下载并解压安装。（不会可以找我）

【最新】windows电脑FFmpeg安装教程手把手详解

安装成功以后，你重新打开一个命令行终端，输入：ffmpeg -h，如果能输出 ffmpeg 的相关信息出来，则证明你的电脑安装 ffmpeg 成功。

运行rtsp2web

创建一个空的目录（目录名不能是rtsp2web），进入目录后，依次运行下面的命令：

npm init --yes
npm i rtsp2web

创建 index.js，内容如下：

// index.jsconst RTSP2web = require('rtsp2web')// 服务端长连接占据的端口号；端口号可以自定义
let port = 9999new RTSP2web({port
})

运行命令： node index.js 启动视频流转码服务，即可。

当然，你也可以选择你习惯的进程管理工具来启动它。如：pm2 之类的工具。

到此，你的视频转码服务就已经运行起来了。

参数说明（在 `new RTSP2web` 时，可配置的参数如下）：

参数	解释说明
port	转码推流服务占用的端口号；（type：Number）可以不传；默认值：9999
path	FFmpeg 命令在你机器上的启动名称，(type: String) 一般情况下不传；默认值：‘ffmpeg’
audio	默认可以不传，有声音；默认值：true；即：输出音频。 audio: false - 禁止输出音频
freeTime	任一视频流空闲(未被使用)时间超过这个值，就会停止该视频流的转码，释放机器资源（type: Number；单位：秒）一般情况下不传；默认值：60
checkTime	检测视频空闲的时间间隔（type: Number；单位：秒）一般情况下不传；默认值：10
q	视频质量；取值范围：0-1000；数字越小，视频越清晰，带宽消耗越大默认值：1；
transportType	设置 RTSP 传输协议、默认值：tcp 可选值：[‘tcp’, ‘udp’, ‘udp_multicast’, ‘http’, ‘https’]

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover"><script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script><title>播放rtsp</title>
</head>
<body><!-- canvas 宽高比例尽量与视频比例保持一致。 --><canvas id="canvas-1" style="width: 600px;"></canvas>
</body>
<script>var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'window.onload = () => {// 将rtsp视频流地址进行btoa处理一下new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {canvas: document.getElementById("canvas-1")})}
</script>
</html>

不管你的前端是用原生的 html 还是在 React、Vue 等框架中使用，操作起来都非常简单。

1、你需要先在全局的模板 html 文件头部引入 jsmpeg.js 或者 jsmpeg.min.js；
2、创建一个 canvas 容器，用来播放视频的；
3、创建视频源播放实例：

var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
// 将rtsp视频流地址进行btoa处理一下
new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {canvas: document.getElementById("canvas")
})

【说明】：JSMpeg.Player 第一个参数是拼接转码链接 'ws://localhost:9999/rtsp?url=' + btoa(rtsp)；第二个参数是一个对象，对象里面属性包含 canvas。

参数说明

如上面的例子所示：在调用 new JSMpeg.Player() 时，第一个参数是接口地址拼接上rtsp地址，其实我们还可以使用 url 传参的方式传递更多的高阶参数。

参数	解释说明
-s	视频分辨率大小，不传即表示与源视频大小一致传值示例： 1920x1080、1280x720、640x360 降低分辨率会降低清晰度
-b:v	释义：码率，默认可以不设置，那就是使用源码率传值示例：2000k、100k、1k 码率调小，这样其实也间接让文件变小了码率调小，画质有可能会降低
scale	缩放；间接的，也能调整视频的分辨率；默认值： -1:-1；即与视频源大小保持一致；功能与 -s 参数相似；但是可以只传一个宽度或者高度，另一个参数用 -1 表示如： 1280:-1、-1:360，视频将会自适应现实降低分辨率会降低清晰度
vcodec	释义：视频编解码方式；请确保你了解该参数的意义，默认可以不传
contrast	释义：对比度，亮的地方更亮，暗的地方更暗。取值范围[-100.0, 100.0]，默认值为0。建议不调整，或者在[-2.0, 2.0]范围内进行小的调整
brightness	释义：亮度，如果觉得视频有点暗，可以进行小的调整。取值范围： [-1.0, 1.0]，默认值为0。
saturation	释义：饱和度，也就是说色彩更鲜艳，绿色更绿，蓝色更蓝…；取值范围：[0, 3.0]，默认值为1。
gamma	释义：关于显示器/视频的一个专业参数；取值范围：0.1-10.0，默认值为1。这个参数很专业，建议不传，不修改。

【详细参考例子：https://github.com/Neveryu/rtsp2web/tree/master/example】

课外知识

一、node install –unsafe-perm 是什么作用？

就是说 npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果你脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉了。
为了避免这种情况，要么按照 npm 的规矩来，专门建一个用于运行 npm 的高权限用户；要么加 –unsafe-perm 参数，这样就不会切换到 nobody 上，运行时是哪个用户就是哪个用户，即使是 root。

经常是安装 node-sass 的时候会很容易出现因为权限不够无法创建目录的问题
官网文档： https://docs.npmjs.com/misc/config#unsafe-perm 。

二、在 nodejs 中，注意：最好不要使用 var 定义变量以避免引入全局变量，因为全局变量会污染命名空间，提高代码的耦合风险。

—————————— 【正文完】——————————

前端学习交流群，想进来面基的，可以加群： 832485817，685486827；

写在最后：约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的新浪微博…好吗

轻松实现在web页面中直接播放rtsp视频流相关推荐

html调用rpst 源码_在web页面中播放rtsp直播数据流方法
WEB播放RTSP直播数据流方法附录一些RTSP测试地址: 1.rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov 一段动画片 2.rtsp: ...
html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标实现: html禁用右键:利用oncontextmenu <!doctype htm ...
从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
[置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
在html页面中怎么打印区域,javascript打印web页面中指定区域的方法
要实现打印web页面中的指定区域,要做到: 将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 核心代码: 复制代码代码示例: ...
音乐在html中连续播放,怎么让PPT中背景音乐在多个页面中连续播放
使用PPT幻灯片,有时我们给幻灯片添加了背景音乐,使PPT的效果更好,更能渲染会场的气氛.以下是学习啦小编为您带来的关于PPT中背景音乐在多个页面中连续播放,希望对您有所帮助. PPT中背景音乐在多个 ...
html:歌曲在新打开的页面中继续播放演示
今天有一个同学问我如何用html实现新打开的页面继续播放上一个页面的歌曲,现在将演示代码写下来,希望可以帮到更多的朋友. index.html(注:比较frameset,普通html文件头的dtd文件 ...

轻松实现在web页面中直接播放rtsp视频流

轻松实现在web页面中直接播放rtsp视频流

写在前面

实现

介绍

如何使用

准备ffmpeg

运行rtsp2web

参数说明（在 `new RTSP2web` 时，可配置的参数如下）：

前端代码

参数说明

课外知识

轻松实现在web页面中直接播放rtsp视频流相关推荐

最新文章

热门文章

轻松实现在web页面中直接播放rtsp视频流

轻松实现在web页面中直接播放rtsp视频流

写在前面

实现

介绍

如何使用

准备ffmpeg

运行rtsp2web

参数说明（在 new RTSP2web 时，可配置的参数如下）：

前端代码

参数说明

课外知识

轻松实现在web页面中直接播放rtsp视频流相关推荐

最新文章

热门文章

参数说明（在 `new RTSP2web` 时，可配置的参数如下）：