轻松实现在web页面中直接播放rtsp视频流「建议收藏」
轻松实现在web页面中直接播放rtsp视频流
写在前面
我之前研究在 web
中直接播放 rtsp
视频流时,写过一篇文章:【前端】rtsp 与 rtmp 视频流的播放方法。阅读这篇文章对你的学习有很大帮助。在文章中我有过详细的分析和解读,并给出了 结论:
【要想在 web
中实时播放 rtsp
视频流:借助后端转码推流将是必要的操作。】
实现
我用 node.js
实现了转码推流的功能,并将其打包成 rtsp2web
发布到了 npm
上。
介绍
rtsp2web 是一个依赖 ffmpeg
,能实时将传入的 rtsp
视频流转码成图像数据并通过 ws
推送到前端的智能工具。
前端页面借助 jsmpeg.js 就可以很轻松的实现播放啦~
而且 rtsp2web
还有以下特点:
- 并发,支持同时播放多路视频。
- 合并同源,同时播放多个同一个
rtsp
视频源时,只会创建一个转码推流进程,不会创建多个。 - 智能释放资源,智能检测当前没有使用的转码推流进程,将其关闭,并释放电脑资源。
如何使用
使用 rtsp2web
是简单的;你只需:
准备ffmpeg
首先,你得确保你的电脑上安装了 ffmpeg
。 我已经将我的 windows
64位电脑上使用的 ffmpeg
上传到了资源库中,如果你的电脑上没有,你可以点击下载并解压安装。(不会可以找我)
安装成功以后,你重新打开一个命令行终端,输入:ffmpeg -h
,如果能输出 ffmpeg
的相关信息出来,则证明你的电脑安装 ffmpeg
成功。
运行rtsp2web
创建一个空的目录(目录名不能是rtsp2web
),进入目录后,依次运行下面的命令:
npm init --yes
npm i rtsp2web
创建 index.js
,内容如下:
// index.js
const RTSP2web = require('rtsp2web')
// 服务端长连接占据的端口号;端口号可以自定义
const port = 9999
// 分辨率
const videoSize = '1920x1080'
new RTSP2web({
port,
videoSize
})
运行命令: node index.js
即可。
到此,你的视频转码服务就已经运行起来了。
参数说明
参数 | 解释说明 |
---|---|
port | 转码服务占用的端口号;(type:Number)默认值:9999 |
videoSize | 摄像头分辨率;(type:String)默认值:‘1920×1080’ 如果播放出来的视频花屏,马赛克,比例不对等等问题,可以调整这个参数 |
前端代码
<!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" style="width: 600px; height: 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") }) } </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
。
课外知识
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
。
—————————— 【正文完】——————————
前端学习交流群,想进来面基的,可以加群: 832485817,685486827;
写在最后: 约定优于配置 —— 软件开发的简约原则
——————————【完】——————————
我的: 个人网站: https://neveryu.github.io/neveryu/ Github: https://github.com/Neveryu 新浪微博: https://weibo.com/Neveryu 微信: miracle421354532
更多学习资源请关注我的新浪微博…好吗
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/183623.html原文链接:https://javaforall.cn
相关文章
- web前端 | 如何选择撸码神器
- Java Web(四)JS
- 【说站】python web框架能够实现的功能
- PHP 5.4 内置Web服务器使用说明
- 前后端分离架构:Web实现前后端分离,前后端解耦详解程序员
- python 获取微信好友列表(微信web)详解编程语言
- 服务Linux下访问Web服务的指南(linux访问web)
- 服务器用Web管理Linux服务器:轻松把握系统运维(web管理linux)
- Linux下部署Web项目:简单又高效(linux下部署web项目)
- Nginx+Tomcat+Keepalived实现高可用web集群
- Web应用隐形后门的设计与实现
- 解决Linux下Web乱码问题的有效方法(linuxweb乱码)
- Linux新版本发布,让你的Web项目发布更简单!(linux发布web项目)
- Linux下构建强大的Web目录体系(linux的web目录)
- MSSQL Web管理工具简介:轻松管理数据库的利器(mssql web 管理)
- 以Linux运行Tomcat,实现轻松部署Web应用(linux tomcat)
- 基于C语言技术的Web应用程序开发与MySQL集成(c web mysql)
- Web端快速读取Redis数据的实现方案(web读取redis数据)
- 利用SSM与Redis构建高效稳定的Web应用(ssm与redis的应用)
- 用JavaScript脚本实现Web页面信息交互
- 为什么要建立web标准与web标准的好处
- 高性能WEB开发nginxHTTP服务器篇