笔记本电脑摄像头实现推流并在前端播放其 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>
相关推荐
爱分享的程序员1 分钟前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
lichenyang4532 分钟前
react案例动态表单(受控组件)
前端
Jackson_Mseven2 分钟前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好19 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放28 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao1 小时前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo1 小时前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er1 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年1 小时前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js