Electron笔记五：无需控件，HTML5直接播放rtsp（摄像头）

本文链接：https://blog.youkuaiyun.com/bestyellow/article/details/119175624

本文介绍了如何使用Electron、FFMPEG、JSMPEG和WebSocket实现在HTML5中直接播放RTSP摄像头流。通过node-media-server和ffmpeg搭建直播推流服务，然后结合FFMPEG+JSMPEG+Nodejs创建web流媒体方案，最终在Electron应用中展示视频流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人初学Electron，把学习的过程记录了下来，以免以后忘记：
Electron笔记一：安装
 Electron笔记二：http与websock的实现
 Electron笔记三：调用外部程序（子进程管理）
Electron笔记四：Dll的调用
 Electron笔记五：无需控件，HTML5直接播放rtsp（摄像头）
Electron笔记六：打包成可执行程序（.exe）
Electron笔记七：全部源代码

在写之前可以先看一下实际的效果

为了实现页面直接播放视频，我找了很多资料

1.node-media-server+ffmpeg搭建直播推流服务

访问：https://blog.youkuaiyun.com/Aimee1608/article/details/103633024 可看具体情况

主是是实现rtmp推流

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')


// main.js 部分功能代码
const ffmpeg = require('fluent-ffmpeg');
const NodeMediaServer = require('node-media-server');
var ffmpegPath = "./ffmpeg-4.2.1-win64-static/bin/ffmpeg.exe";

// rtmp 播放 服务器
  const config = {
    rtmp: {
      port: 1938,
      chunk_size: 60000,
      gop_cache: true,
      ping: 60,
      ping_timeout: 30
    },
    http: {
      port: 18000,      
      allow_origin: '*'     
    }
  };
  var nms = new NodeMediaServer(config)
  nms.run();

// 转码指令
const uri = 'rtsp://admin:12345@192.168.0.6:554/PSIA/streaming/channels/101' //测试
var command = ffmpeg(uri)
    .setFfmpegPath(ffmpegPath)
    .outputOptions([
      '-fflags',
      'nobuffer',
      '-vcodec',
      'libx264',
      '-preset',
      'superfast',
      '-rtsp_transport',
      'tcp',
      '-threads',
      '2',
      // '-f',
      // 'flv',
      '-r',
      '25',
      // '-s',
      // '640x480',
      //'1280x720',
      '-an'
    ])
    .inputFPS(25)
    .noAudio()
    .size('640x?')
    .aspect('4:3')
    .format('flv')
    // 此处的 /live/camera, camera类似于一个房间的概念, 你可以设置为你想要的名字
    .save(`rtmp://localhost:1938/live/livestream`)

    .on('start', function (e) {
      running = true
      console.log('stream is start: ' + e)
      console.log("start command......." + command);
    })
    .on('end', function () {
      running = false
      console.log('ffmpeg is end')
    })
    .on('error', function (err) {
      running = true
      console.log('ffmpeg is error! ' + err)
      // command.kill()
      //reloadStream(uri)
    })

用vlc播放器可以播放，只是现在浏览器都不支持flash了，直接播放不了了，因此这条道路走不通。