监控摄像头网页播放/海康威视摄像头/ rtmp网页播放

rtsprtmp无法直接在网页使用播放器插件播放。需要通过服务端来转码实现。

为了方便使用 写了一个服务端并开源了

实现原理

原理就是利用ffmpeg对视频流进行转码为flv，使用hls插件在网页上面播放。

核心代码如下：

 const isRTMP = url.startsWith("rtmp://");
    const isRTSP = url.startsWith("rtsp://")
    const rtspOptions = ["-rtsp_transport", "tcp", "-buffer_size", "102400"]
    const rtmpOptions = ["-rtmp_live", "live"]
    const options = isRTMP ? rtmpOptions : rtspOptions
    ffmpeg(url)
      .addInputOption(...options)
      .on("start", function (commandLine) {
        logger.info(commandLine, "Stream started.");
      })
      .on("codecData", function () {
        logger.info("Stream codecData:" + url);
        // 摄像机在线处理
      })
      .on("error", function (err) {
        logger.error("An error occured: ", url + err );
      })
      .on('stderr', function(stderrLine) {
        logger.error('Stderr output: ' + stderrLine);
      })
      .on("end", function () {
        logger.info("Stream Closed! Url:" + url);
      })
      .outputFormat("flv")
      .videoCodec("libx264")
      .audioCodec('aac')
      .audioFrequency(11025)
      .pipe(stream);

oimi-live服务使用

下载地址：github release

服务打包成了可执行文件。直接运行即可。

关于配置：
如果不使用自定义配置那么默认自动下载ffmpeg依赖，默认服务端口：8005

config.yml配置如下：

port: 8005
ffmpeg: /Volumes/work/github-project/live_tramsfrom/lib/ffmpeg

ffmpeg 配置可以自定义 本地的ffmpeg的地址。如果配置了就不会自动下载依赖采用本地的依赖。

使用

服务启动之后，直接嵌入页面内使用即可：
地址为http://${host}:${port}/index.html?uri=${url}

• ${host} 本机的ip
• ${port} 服务的端口
• ${url} 需要播放的rtmp/rtsp地址

<iframe src="http://localhost:8005/index.html?uri=$url"></iframe>