首页 html 正文

我要投稿

html播放视频代码-直接在网页中播放rtsp视频流

bendan520 html

2023-08-25 0 1,496 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

写在上面

我在网上研究rtsp视频流直接播放的时候，写过一篇文章：【前端】如何播放rtsp和rtmp视频流。阅读这篇文章将对你的学习有很大帮助。文章中我进行了详细的分析和分析，并给出了推论：

【在网页上实时播放rtsp视频流：使用服务器拉流和转码将是必要的操作。】

完成

我使用node.js实现了流式转码的功能，并将其封装成rtsp2web并发布到npm上。

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

介绍

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

后端页面可以使用jsmpeg.js轻松播放~

但rtsp2web还具有以下特点：

如何使用

使用 rtsp2web 很简单；你只需要：

去 ffmpeg

首先html播放视频代码，您必须确保您的笔记本电脑上安装了 ffmpeg。我已经将我的windows 64位笔记本上使用的ffmpeg上传到资源库了。如果您的笔记本电脑上没有它，您可以点击下载并解压来安装。（找不到我）

【最新】Windows笔记本FFmpeg安装教程手把手解读

安装成功后，你重新打开一个命令行终端，输入：ffmpeg -h，如果能输出ffmpeg的相关信息，就证明你的笔记本已经成功安装了ffmpeg。

运行 rtsp2web

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

npm init --yes
npm i rtsp2web

创建包含以下内容的index.js：

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

运行命令：nodeindex.js，启动视频流转码服务。

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

此时，您的视频转码服务已经运行。

o(￣▽￣)ブ

参数说明（在newRTSP2web中，可配置参数如下）：参数说明

港口

转码流媒体服务占用的终端banner；（类型：数字）

无法通过；默认值：9999

小路

您机器上 FFmpeg 命令的启动名称，（类型：String）

一般不会通过；默认值：'ffmpeg'

声音的

默认不传输，但有声音；默认值：true；即：输出音频。

如果想严格禁止音频输出，可以配置audio:false

空闲时间

如果任何视频流空闲（未使用）的时间超过此值，则该视频流的转码将停止，并释放机器资源（类型：数量；单位：秒）

正常情况下是不能通过的；默认值：20

检查时间

检查视频空闲时间间隔（类型：数量；单位：秒）

正常情况下是不能通过的；默认值：10

视频质量; 取值范围：0-1000；数字越小，视频越清晰，但占用带宽越大

默认：8；

运输类型

设置RTSP传输合约，默认值：none

可选值：['tcp'、'udp'、'udp_multicast'、'http'、'https']

ps：这里默认为none，即rtsp2web会手动选择传输合约；此外，无法保证成功。此时rtsp2web日志会复制错误信息或者等待较长时间。这时候就需要这个参数自动配置，‘tcp’和‘udp’是最常见的选择；详情请参见文档末尾【常见问题解决方案】

网络播放器

设置后端播放器（视频流转码器），默认不传输，默认值：'jsmpeg'

可选值：['jsmpeg','flv']; 如果设置为flv，请在后端页面使用flv.js播放器。具体使用方法请参考下面flv.js部分

沃斯

配置wss；配置格式如下：

wss:{key:'keyPath',cert:'certPath'}

如果是pfx证书，配置格式如下：

wss:{pfx:'pfxPath',passphrase:'passphrasePath'}

如果要使用wss，请配置该选项，否则不要使用该配置。

后端代码

<!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 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。

参数说明

如上例所示：调用newJSMpeg.Player()时，第一个参数是与rtsp地址拼接的socket地址，尽管我们也可以使用url的形式来传递更高级的参数。

参数说明

-s

视频码率的大小，如果不传输则表示与源视频大小相同

值传递示例：1920x1080、1280x720、640x360

提高帧速率可提高清晰度

-b:v

解释：分辨率，默认不可设置，即使用源码码率

值传递示例：2000k、100k、1k

分辨率降低，虽然这也间接使文件变小

如果分辨率降低，音质可能会提高

规模

飞涨; 间接还可以调整视频的帧率；

默认值：-1：-1；即与视频源的大小一致；

作用与-s参数类似；并且只能传一个长度或高度，另一个参数用-1表示

如：1280:-1、-1:360，视频会适应现实

提高帧速率可提高清晰度

视频编解码器

解释：视频编解码方法；

请确保您理解该参数的含义，默认可以省略

对比

解读：对比，亮的地方更亮，暗的地方更暗。

取值范围为[-100.0,100.0]，默认值为0。建议不要调整，或者在[-2.0,2.0]范围内小幅调整

亮度

解读：色温，如果您觉得视频有点暗，可以进行小幅调整。

取值范围：[-1.0,1.0]，默认值为0。

饱和

解读：饱和度，也就是说色相更鲜艳，红色更绿，白色更蓝……；

取值范围：[0,3.0]，默认值为1。

伽玛

解读：关于显示/视频的专业参数；

取值范围：0.1-10.0，默认值为1。

该参数非常专业，建议不要传递或更改。

【详细参考反例：github.com/Neveryu/rts...】

支持flv.js

flv.js也是时下主流播放器之一，但flv.js播放器默认具有进度条、在线播放、全屏、画中画、倍速播放等功能。如果需要，您可以选择 flv.js。

重要的

[2023-06-18] 当您使用并喜欢rtsp2web的同时，您也对rtsp2web提出了更高的要求、更多的功能要求； rtsp2web 仍在开发和完善中，如果您想了解最新的变化和文档，请参考 rtsp2web 的官方文档。官方文档的内容更新具有最高优先级。

课外知识

1.nodeinstall-unsafe-perm有什么作用？

也就是说，出于安全考虑，npm不支持以root用户运行。即使以root用户运行，npm也会手动切换到名为nobody的用户来运行，而这个用户几乎没有任何权限。在这种情况下，如果你的脚本中有一些需要权限的操作，比如写文件（尤其是写/root/.node-gyp），它们都会崩溃。为了防止这些情况，要么根据npm的规则html播放视频代码，专门创建一个高权限的用户来运行npm；或者加上--unsafe-perm参数，这样就不会切换到nobody，而且用户是运行时的用户，虽然是root。

经常在安装node-sass时，很容易出现由于权限不足而无法创建目录的问题官网文档：。

2、在nodejs中，注意：最好不要使用var定义变量，防止引入全局变量，因为全局变量会污染命名空间，增加代码耦合的风险。

———————————【正文结束】————————————

后端学习交流群，想要面授的可以进群：832485817、685486827；

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

写在最后

我的主页：neveryu.github.io/index.html

交流学习群：832485817

收藏 (0) 打赏

感谢您的支持，我会继续努力的!