简单的Web直播服务,使用node+ffmpeg

直播功能可分三大模块,这里只演示播放本地媒体文件。

一、流媒体服务器

安装node.js并创建项目。
安装nodejs rtmp-server插件:

npm install node-media-server

在项目中新建 media.js

const NodeMediaServer = require('node-media-server');
 
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 3010  // 推送视频流的地址 http://localhost:3010

  },
  http: {
    port: 8082,
    allow_origin: '*'
  }
};
 
var nms = new NodeMediaServer(config)
nms.run();

运行media.js

node media.js
2019-8-30 18:58:22 14700 [INFO] Node Media Server v2.1.2
2019-8-30 18:58:22 14700 [INFO] Node Media Rtmp Server started on port: 1935
2019-8-30 18:58:22 14700 [INFO] Node Media Http Server started on port: 3010
2019-8-30 18:58:22 14700 [INFO] Node Media WebSocket Server started on port: 3010
2019-8-30 18:58:23 14700 [INFO] There is a new version 2.1.3 that can be updated

第一步完成。

二、视频流推送(这里只演示播放本地媒体文件,如需录播可以使用第三方软件录播推流,如obs)

安装ffmpeg
下载地址:https://ffmpeg.zeranoe.com/builds/

QQ截图20190830193206.png

把下载的压缩文件解压,并配置环境变量 path 指向解压后的 bin 目录

安装参考:https://blog.csdn.net/qq_19788257/article/details/83011732

运行 ffmpeg 检查安装是否正常:

$ ffmpeg
ffmpeg version N-94664-g0821bc4eee Copyright (c) 2000-2019 the FFmpeg developers
  built with gcc 9.1.1 (GCC) 20190807
  configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt
  libavutil      56. 33.100 / 56. 33.100
  libavcodec     58. 55.101 / 58. 55.101
  libavformat    58. 31.104 / 58. 31.104
  libavdevice    58.  9.100 / 58.  9.100
  libavfilter     7. 58.101 /  7. 58.101
  libswscale      5.  6.100 /  5.  6.100
  libswresample   3.  6.100 /  3.  6.100
  libpostproc    55.  6.100 / 55.  6.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

Use -h to get full help or, even better, run 'man ffmpeg'

安装成功后运行ffmpeg的操作命令即可推送视频流。
保持视频编码原样输出

$ ffmpeg -re -i 01.mp4 -c copy -f flv rtmp://localhost/live/hello

将视频使用h.264编码

$ ffmpeg -re -i 16.mp4 -c:v libx264 -preset superfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/hello
$ ffmpeg -re -i 01.mp4 -c copy -f flv rtmp://localhost/live/hello
ffmpeg version N-94664-g0821bc4eee Copyright (c) 2000-2019 the FFmpeg developers
  built with gcc 9.1.1 (GCC) 20190807
  configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt
  libavutil      56. 33.100 / 56. 33.100
  ...省略 ...
  libpostproc    55.  6.100 / 55.  6.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '01.mp4':
  ...省略 ...
Output #0, flv, to 'rtmp://localhost/live/hello':
  ...省略 ...
Stream mapping:
  Stream #0:0 -> #0:0 (copy)
  Stream #0:1 -> #0:1 (copy)
Press [q] to stop, [?] for help
frame=  221 fps= 23 q=-1.0 size=     671kB time=00:00:09.60 bitrate= 572.8kbits/s speed=   1x

ffmpeg命令简单介绍如下,如需进一步了解请Google

-re:按时间戳读取文件。ffmpeg 读取文件有两种方式,另一种是直接读取
-i 01.mp4:命令 -i 后面为文件路径,这里使用相对路径,文件名为 01.mp4
-c copy: 保持源文件编码
-f flv:命令 -f 后面为输出格式,指定输出格式为 flv
rtmp://localhost/live/hello:服务器地址

三、Web端播放

播放使用H5的video标签结合flv.js。flv.js是来自Bilibli的开源项目。它解析FLV文件给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。

新建一个index.html文件

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
   <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></video>
   <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               url: 'http://localhost:3010/live/hello.flv'  // 注意这里的地址和路径名称要上下对应
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>
</html>

本文参考:
https://www.jianshu.com/p/d6cd56d31bf2 这篇是录播教程
http://m.zhizuobiao.com/node/node-19061200018/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。