笔记本电脑摄像头实现推流并在前端播放其 rtsp 流地址

本地摄像头转RTSP推流步骤

第一步 下载ffmpeg并配置环境变量

下载地址

  • 下载完之后,添加系统环境变量,在系统变量中配置地址。

第二步 利用开源的流媒体平台框架 EasyDarwin

下载地址

下载后解压到本地,运行文件夹下的EasyDarwin.exe, 弹出下面窗口 保持着窗口不要关闭

接着在浏览器输入127.0.0.1:10008 这个地址,出现下面图则说明启动成功了。

第三步 用ffmpeg来实现rtsp推流

打开cmd, 通过以下命令获取摄像头名称

  • ffmpeg -list_devices true -f dshow -i dummy

接着就是用上面的摄像头名称 来实现推流了(重点

  • ffmpeg -f dshow -i video="Integrated Camera" -c:v h264 -preset ultrafast -tune zerolatency -b:v 1000k -vf scale=1280:720 -r 30 -f rtsp rtsp://127.0.0.1/test

推流完成后,cmd窗口如下图。

然后重新回到浏览器 127.0.0.1:10008 窗口,看到如下图说明推拉流成功了。

第四步,通过VLC打开上面rtsp地址

  • 打开网络串流

  • 正常打开

前端步骤

第一步: 安装 ffmpeg (上面已经实现)

第二步: 下载一份 jsmpeg.min.js

下载地址

第三步: npm或yarn等安装node-rtsp-stream

用于启动rtsp推流, 安装后, 通过node启动下面代码的js文件。这里的rtsp一定要实时推流, 运行代码后, 终端这串码一直在动才是推流成功。通过VLC查看rtsp地址能不能正常播放。

js 复制代码
const Stream = require("node-rtsp-stream");

new Stream({
  name: 'rtsp',
  streamUrl: 'rtsp地址',
  wsPort: '8888',
  ffmpegOptions: {
    "-stats": "", 
  },
});

第四步: 页面上使用canvas, 通过 jsmpeg 推流将代码呈现到页面上

引入上面的 jsmpeg.min.js

注意:这里的端口要与上面wsPort的端口一致, 下述js代码要在页面加载完成后执行。

html 复制代码
<canvas id="canvas"></canvas>
js 复制代码
new window.JSMpeg.Player('ws://localhost:8888', {
   canvas: document.getElementById('canvas'), 
});

前端展示效果

详细代码如下

代码层级

server.js

js 复制代码
const Stream = require("node-rtsp-stream");

new Stream({
  name: "rtsp",
  streamUrl: "rtsp://127.0.0.1/test",
  wsPort: 8888,
  ffmpegOptions: {
    "-stats": "",
  },
});

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jsmpeg.min.js"></script>
    <title>本地摄像头推流</title>
    <style>
      .container {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <canvas id="canvas" style="width: 600px; height: 450px"></canvas>
    </div>
    <script>
      new window.JSMpeg.Player("ws://localhost:8888", {
        canvas: document.getElementById("canvas"),
      });
    </script>
  </body>
</html>
相关推荐
web守墓人42 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法