背景

笔者目前在做一个智慧楼宇的产品（使用react开发的），在交付项目的时候，遇到了需要在浏览器端播放rtsp视频流的场景，而浏览器端是不能直接播放rtsp视频流的，原本打算让客户方提供flv格式的视频流 鉴于项目现场的环境以及种种原因，客户方只能提供rtsp视频流，所以就只能自己解决了。

于是乎，去网上随便一搜就搜到了Ffmpeg + node.js + websocket + flv.js的解决方案，但是真正自己实现下来，遇到了几个棘手的问题，例如：莫名其妙的报错，部分监控视频转换失败，不能转码h265格式的视频等等（本文会介绍自己遇到的问题以及解决方案）。

涉及到的技术点

• ffmpeg：ffmpeg是一个转码工具，将rtsp视频里转换成flv格式的视频流

• node.js

• websocket

• flv.js

node.js端

点击进入node端的github

用到的关键库

• @ffmpeg-installer/ffmpeg

自动为当前node服务所在的平台安装适合的ffmpeg，无需自己再去手动下载、安装配置了。通过该库安装的ffmpeg，其路径在node_modules/@ffmpeg-installer/darwin-x64/ffmpeg (我用的是mac，自动安装的是darwin-x64，不同平台不一样)

• fluent-ffmpeg

该库是对ffmpeg 命令的封装，简化了命令的使用流程，原生ffmpeg的命令是比较复杂难懂的。

点击进入fluent-ffmpeg的github地址

完整可复制直接运行的node代码

const ffmpegPath = require('@ffmpeg-installer/ffmpeg'); // 自动为当前node服务所在的系统安装ffmpeg
const ffmpeg = require('fluent-ffmpeg');
const express = require('express');
const webSocketStream = require('websocket-stream/stream');
const expressWebSocket = require('express-ws');

ffmpeg.setFfmpegPath(ffmpegPath.path);

/**
 * 创建一个后端服务
 */
function createServer() {
    const app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, {
        perMessageDeflate: true
    });
    app.ws('/rtsp/', rtspToFlvHandle);

    app.get('/', (req, response) => {
        response.send('当你看到这个页面的时候说明rtsp流媒体服务正常启动中......');
    });

    app.listen(8100, () => {
        console.log('转换rtsp流媒体服务启动了，服务端口号为8100');
    });
}

/**
 * rtsp 转换 flv 的处理函数
 * @param ws
 * @param req
 */
function rtspToFlvHandle(ws, req) {
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    // const url = req.query.url;
    const url = new Buffer(req.query.url, 'base64').toString(); // 前端对rtsp url进行了base64编码，此处进行解码
    console.log('rtsp url:', url);
    try {
        ffmpeg(url)
            .addInputOption(
                '-rtsp_transport', 'tcp',
                '-buffer_size', '102400'
            )
            .on('start', (commandLine) => {
                // commandLine 是完整的ffmpeg命令
                console.log(commandLine, '转码 开始');
            })
            .on('codecData', function (data) {
                console.log(data, '转码中......');
            })
            .on('progress', function (progress) {
                // console.log(progress,'转码进度')
            })
            .on('error', function (err, a, b) {
                console.log(url, '转码 错误: ', err.message);
                console.log('输入错误', a);
                console.log('输出错误', b);
            })
            .on('end', function () {
                console.log(url, '转码 结束!');
            })
            .addOutputOption(
                '-threads', '4',  // 一些降低延迟的配置参数
                '-tune', 'zerolatency',
                '-preset', 'ultrafast'
            )
            .outputFormat('flv') // 转换为flv格式
            .videoCodec('libx264') // ffmpeg无法直接将h265转换为flv的，故需要先将h265转换为h264，然后再转换为flv
            .withSize('50%') // 转换之后的视频分辨率原来的50%, 如果转换出来的视频仍然延迟高，可按照文档上面的描述，自行降低分辨率
            .noAudio() // 去除声音
            .pipe(stream);
    } catch (error) {
        console.log('抛出异常', error);
    }
}

createServer();

react 前端

用到的关键库

• flv.js

用于前端播放flv格式视频库

完整可直接复制使用的react组件

import React, { useEffect, useRef } from 'react';
import './FlvVideoPlayer.scss';
import flvjs from 'flv.js';
import { Button } from '@alifd/next';

interface FlvVideoPlayerProps {
  url?: string; // rtsp 的url
  isNeedControl?: boolean;
  fullScreenRef?: any; // 方便组件外部调用全屏方法的ref
}

const FlvVideoPlayer = React.forwardRef<any, FlvVideoPlayerProps>(({ isNeedControl, url, fullScreenRef }, ref) => {
  const videoDomRef = useRef<any>();
  const playerRef = useRef<any>(); // 储存player的实例

  React.useImperativeHandle(ref, () => ({
    requestFullscreen,
  }));

  useEffect(() => {
    if (videoDomRef.current) {
      if (fullScreenRef) {
        fullScreenRef.current[url] = requestFullscreen;
      }
      // const url = `${videoUrl}/rtsp/video1/?url=${url}`;
      playerRef.current = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url,
      });
      playerRef.current.attachMediaElement(videoDomRef.current);
      try {
        playerRef.current.load();
        playerRef.current.play();
      } catch (error) {
        console.log(error);
      }
    }

    return () => {
      destroy();
    };
  }, [url]);

  /**
   * 全屏方法
   */
  const requestFullscreen = () => {
    if (videoDomRef.current) {
      (videoDomRef.current.requestFullscreen && videoDomRef.current.requestFullscreen()) ||
        (videoDomRef.current.webkitRequestFullScreen && videoDomRef.current.webkitRequestFullScreen()) ||
        (videoDomRef.current.mozRequestFullScreen && videoDomRef.current.mozRequestFullScreen()) ||
        (videoDomRef.current.msRequestFullscreen && videoDomRef.current.msRequestFullscreen());
    }
  };

  /**
   * 销毁flv的实例
   */
  const destroy = () => {
    if (playerRef.current) {
      playerRef.current.pause();
      playerRef.current.unload();
      playerRef.current.detachMediaElement();
      playerRef.current.destroy();
      playerRef.current = null;
    }
  };

  return (
    <>
      <Button type="primary" onClick={requestFullscreen}>
        全屏按钮
      </Button>
      <video controls={isNeedControl} ref={videoDomRef} className="FlvVideoPlayer" loop />
    </>
  );
});

export default FlvVideoPlayer;

组件用到的url

• 本地开发时

本地开发时，node服务是启动在自己电脑上，所以node服务的地址就是 ws://127.0.0.1:8100，为了防止在传rtsp地址的过程中出现参数丢失的情况，故采用window.btoa()方法对rtsp进行base64编码一下，又由于node端代码中监听的是/rtsp/,故完整的组件的url是

ws://127.0.0.1:8100/rtsp?url=${window.btoa('rtsp地址')}

• 部署线上

直接将服务器ip替换掉127.0.0.1即可

• 提供一个测试的rtsp地址

rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4

遇到的问题

1. rtsp地址中存在?拼接的参数，传到后端丢失

• 错误详情

An error occured: ffmpeg exited with code 1: rtsp://... Server returned 404 Not Found

• 原因

完整的url是ws://127.0.0.1:8100/rtsp?url=${window.btoa('rtsp地址')},如果rtsp地址中再含有?拼接参数的话，那么就会出现两个?，传到node端之后，会被express去除掉rtsp地址中的?

• 解决方式

在前端对rtsp使用window.btoa方法进行base64编码，在node端使用new Buffer进行解码即可

2. 连接超时

• 报错截图
  
  

• 原因

部署到客户内网发现的，是两台服务网络不通造成的

• 解决方式

找运维解决

3. CPU飚到100%，卡顿

• 错误详情

监控视频采用分页显示，每页8个监控视频，切换到下一页的时候，上一页转换监控视频的ffmpeg进程，仍然存在，没有被kill掉。所以ffmpeg的进程不停地增加，导致CPU占用100%

• 原因

封装flvjs 的react组件中，在组件卸载的时候，没有把flvjs的实例销毁掉，导致进程不会被自动kill掉

• 解决方式

组件卸载的时候，将flvjs的实例销毁掉

4. 不能转码h265视频流

• 错误详情

Video codec hevc not compatible with flv 。Could not write header for output file #0 (incorrect codec parameters ?): Function not implemented

• 原因

有些监控摄像头的视频格式是 hevc h265, flv不支持，需要先将h265转化至h264格式

• 解决方式

node端代码中。ffmpeg添加 videoCodec('libx264') 配置即可

优化 ffmpeg 低延迟配置参数

'-threads', '4'
'-tune', 'zerolatency'
'-preset', 'ultrafast'

更新

当我把ffmpeg配置参数中的输出分辨率配置移除后，目前的延时在1~2s左右

作者：huisiyu
来源：juejin.cn/post/7124188097617051685