社区首页 >专栏 >轻松实现在web页面中直接播放rtsp视频流「建议收藏」

轻松实现在web页面中直接播放rtsp视频流「建议收藏」

全栈程序员站长

发布于 2022-11-07 07:46:04

8.5K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

轻松实现在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 。

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

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

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

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

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/183623.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月10日，如有侵权请联系 cloudcommunity@tencent.com 删除

视频处理