Qt+Opencv+Ffmpeg实时摄像头数据推流，并在WEB端显示
目录
0.前言
1.整体结构
2.方案分析
a.实时视频采集与推送
b.rtmp流服务器的搭建
c. 网页端流媒体播放器
3.演示
4.结束
0.前言
本文主要介绍下利用Opencv获取摄像头视频数据，并结合ffmpeg推流到流服务器，并在前端页面中显示的整个思路与实现。
1.整体结构
2.方案分析
整体方案如第二部分所示，主要由四部分组成：硬件视频采集设备、视频捕捉模块、流媒体服务、流媒体播放器。涉及的功能技术点有三块：a.实时视频采集与推送；b.rtmp流服务器的搭建；c.流媒体播放器的选择。
a.实时视频采集与推送
采用OpenCV开源视觉库结合FFmpeg进行开发，主要代码片段如下：
初始化采集设备：
if(!m_isCameraData)
{
qDebug()<< "m_inputSrc: " << m_inputSrc;
m_cam.open(m_inputSrc.toStdString().data());
}else{
qDebug()<< "m_videoIndex: " << m_videoIndex;
m_cam.open(m_videoIndex);
}
if (!m_cam.isOpened())
{
qDebug()<< "camera open failed";
ret = false;
return ret;
}
// 获取图像属性
m_inWidth = m_cam.get(cv::CAP_PROP_FRAME_WIDTH);
m_inHeight = m_cam.get(cv::CAP_PROP_FRAME_HEIGHT);
m_fps = m_cam.get(cv::CAP_PROP_FPS);ffmpeg相关初始化：
int VideoWorker::initPushVideo()
{
int code = 0;
bool ret = false;
// 2.初始化格式转换上下文
ret = initSwsContext();
if (!ret)
{
qWarning("初始化格式转换上下文失败");
code = 2;
return code;
}
// 3.初始化输出的数据结构
ret = initOutYuv();
if (!ret)
{
qWarning("初始化输出YUV失败");
code = 3;
return code;
}
// 4.初始化编码上下文
ret = initVideoCodeC();
if (!ret)
{
qWarning("初始化编码上下文失败");
code = 4;
return code;
}
// 输出封装器和视频流配置
ret = initOutCAndVideoCfg();
if (!ret)
{
qWarning("输出封装器和视频流配置失败");
code = 5;
return code;
}
return code;
}各个部分的初始化：
int VideoWorker::initPushVideo()
{
int code = 0;
bool ret = false;
// 2.初始化格式转换上下文
ret = initSwsContext();
if (!ret)
{
qWarning("初始化格式转换上下文失败");
code = 2;
return code;
}
// 3.初始化输出的数据结构
ret = initOutYuv();
if (!ret)
{
qWarning("初始化输出YUV失败");
code = 3;
return code;
}
// 4.初始化编码上下文
ret = initVideoCodeC();
if (!ret)
{
qWarning("初始化编码上下文失败");
code = 4;
return code;
}
// 输出封装器和视频流配置
ret = initOutCAndVideoCfg();
if (!ret)
{
qWarning("输出封装器和视频流配置失败");
code = 5;
return code;
}
return code;
}工作线程：
void VideoWorker::doVideoWork()
{
bool ret = true;
while(m_isDoWork)
{
// 连续100帧图像未采集到，则认为结束，通知主线程结束任务
if(m_noframeCount>=100)
{
// 通知停止工作
emit workOver();
}
/*读取rtsp视频下一帧，解码视频帧*/
if (!m_cam.grab())
{
m_noframeCount++;
continue;
}
/*yuv转换为rgb*/
if (!m_cam.retrieve(m_frame))
{
continue;
}
// 采集到图像则计数器清零
m_noframeCount= 0;
if(m_isSaveFile)
{
m_writer << m_frame;
}
if(m_isGray)
{
cv::Mat gray;
cv::cvtColor(m_frame, gray, cv::COLOR_BGR2GRAY);
emit imageGetted(matToPixmap(gray));
}else
{
emit imageGetted(matToPixmap(m_frame));
}
cv::waitKey(m_fps);
if(!m_isPush)
{
continue;
}
if(!m_pushCfgReady)
{
continue;
}
/*rgb to yuv*/
//输入的数据结构
uint8_t *indata[AV_NUM_DATA_POINTERS] = { 0 };
indata[0] = m_frame.data;
int insize[AV_NUM_DATA_POINTERS] = { 0 };
//一行（宽）数据的字节数
insize[0] = m_frame.cols * m_frame.elemSize();
int h = sws_scale(m_vsc, indata, insize, 0, m_frame.rows, //源数据
m_yuv->data, m_yuv->linesize);
if (h <= 0)
{
continue;
}
/*h264编码*/
m_yuv->pts = m_vpts;
m_vpts++;
ret = avcodec_send_frame(m_vc, m_yuv);
if (ret != 0)
continue;
ret = avcodec_receive_packet(m_vc, &m_pack);
if (ret != 0 || m_pack.size > 0)
{
// qDebug() << "*" + m_pack.size << flush;
}
else
{
continue;
}
//推流
m_pack.pts = av_rescale_q(m_pack.pts, m_vc->time_base, m_vs->time_base);
m_pack.dts = av_rescale_q(m_pack.dts, m_vc->time_base, m_vs->time_base);
m_pack.duration = av_rescale_q(m_pack.duration, m_vc->time_base, m_vs->time_base);
ret = av_interleaved_write_frame(m_ic, &m_pack);
if (ret == 0)
{
Q_UNUSED(ret);
}
}
if(m_cam.isOpened())
{
m_cam.release();
}
destoryPointers();
}b.rtmp流服务器的搭建
此部分有大体两个方案：Ⅰ.nginx+rtmp模块，最终会依赖浏览器的flash，现在浏览器基本都放弃了flash，所以我也放弃了这个方案；Ⅱ.nodejs的npm模块，即node-meida-server，不依赖flash，我选择了它。
下载：
npm i node-media-server --save在node_modules同级目录下，新建app.js，写入以下内容：
/*
* @Descripttion:
* @version:
* @Author: zhen
* @Date: 2022-08-23 21:53:54
* @LastEditors:
* @LastEditTime: 2022-08-23 21:54:01
*/
const NodeMediaServer = require('node-media-server');
const config = {
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 30,
ping_timeout: 60
},
http: {
port: 8000,
allow_origin: '*'
}
};
var nms = new NodeMediaServer(config)
nms.run();启动：
node app.js
c. 网页端流媒体播放器
找了好多，最终选择了videojs-flvjs。
不依赖flash，美得很！
3.演示
1.先启动nms，即流媒体服务器。
2.启动开发的软件
3.选择推流、点击开始！
web端效果：
注意：上面的视频六服务地址也可以填写其他的，比如B站推流地址！即可在B站直播间看到您的精彩表演！
4.结束
拜拜，欢迎一起交流！