直播功能可分三大模块,这里只演示播放本地媒体文件。
一、流媒体服务器
安装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/