1. Toy模板网首页
  2. > Toy博客

浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载

7月前 作者：浅笑一斤 分类：Toy博客 阅读(61) 违法举报

这篇具有很好参考价值的文章主要介绍了浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.前言

    在浏览器中实现播放RTSP实时视频流，⼤体上有如下⼏个⽅案：

⽅案一：浏览器插件⽅案 ActiveX、NPAPI、PPAPI

    ActiveX插件适用于IE浏览器，NPAPI与PPAPI插件适用于谷歌浏览器，不过这些插件都已经不被浏览器所支持。

⽅案二：先转码再转流⽅案

    ⼯作原理是架设一个视频流转码服务器，将RTSP视频流转换为flv后用Web Socket或WebRTC推送到前端，前端收到后再转换为Video所⽀持的MP4后播放。这过程中需要经过2次转码才播放，画⾯延迟时间⼤幅增加。如果有多路视频流时，服务器端转码和转流对CPU、内存、⽹络带宽的压⼒⼤幅度增加，长期使⽤综合成本很⾼，对⾼分辨率的视频流播放经常出现花屏、卡顿现象。此⽅案要求浏览器⽀持流媒体扩展特性(MSE)，且⽆法利⽤本机硬件加速实现解码和渲染播放。优点是可兼容移动端⽹页播放。此⽅案在国内有TSINGSEE的免插件EasyPlayer RTSP播放器。

⽅案三：先转码再转流⽅案

    ⼯作原理是架设⼀个Web Socket的视频流转发服务器，前端连接到此服务器后，服务端不断把RTSP视频流通过Web Socket不断转发给前端的JS处理库，JS处理库再把视频流转换为Video所⽀持的MP4后播放。此⽅案不⽀持IE浏览器，最⼤的问题是画⾯延迟达数秒，⾸屏内容显⽰慢，也⽆法利⽤本机硬件加速实现解码和渲染播放，CPU占⽤⾼，播放时花屏、卡顿现象，体验⽐较差。此⽅案的典型代表是Streamedian公司的免插件播放器Html5 RTSP Player。

⽅案四：Wasm⽅案

    工作原理是通过Emscripten将音视频解码库编译成Js（WebAssembly，简称wasm)运行于浏览器之中，RTSP视频流通过ffmpeg的Wasm版软解码成Video所⽀持的MP4后播放。此方案由于Wasm不⽀持硬件解码，对多路同时播放来说，终端电脑的CPU和内存占⽤会⽐较⾼，性能也堪忧。此方案有Jessibuca，Jessibuca项目地址：https://gitee.com/InternetJava/jessibuca
浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载,qt,音视频,qt,c++,音视频

⽅案五：网页调用VLC插件方式播放

    其原理是底层调用VLC的ActiveX控件可实现在网页中内嵌播放多路RTSP的实时视频流。

⽅案六：浏览器内嵌C++播放器

    基本原理在浏览器⽹页中的指定位置和⼤⼩，实现⼀个内嵌到⽹页中显⽰的播放窗⼝，前端还必须可对这个内嵌播放窗⼝进⾏控制，⽽且播放窗⼝必须跟随浏览器窗⼝的移动和缩放、⽹页滚动、标签页切换、关闭等操作进⾏⾃动联动。播放器可以通过QT或MFC进行实现，可以充分利⽤终端电脑的硬件加速特性。这个播放窗⼝同时提供Web Socket的服务端和JSON打包命令的解析执⾏模块，前端就可以通过Web Socket连接后发送JSON打包的控制命令实现控制播放窗⼝。通过这种方案实现的有大华的视频插件。

二.浏览器内嵌C++播放器的实现

2.1 播放器功能介绍

    该播放器仿照大华视频插件，支持软硬解码，支持录像截图，支持音频播放，支持多路播放，支持右键菜单栏操作，支持多路分页显示，支持全屏显示等功能，如下图：
浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载,qt,音视频,qt,c++,音视频
浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载,qt,音视频,qt,c++,音视频
浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载,qt,音视频,qt,c++,音视频

2.2 播放器部分代码分享

网页部分：
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/slider/jquery-ui-slider-pips.min.css">
    <title>My VideoPlayer For Web</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/myplayer.js"></script>
    <script src="js/index.js"></script>
    <script src="jquery/slider/jquery-plus-ui.min.js"></script>
    <script src="jquery/slider/jquery-ui-slider-pips.js"></script>
    <script src="jquery/slider/slider.js"></script>
  </head>

  <body style="background-color: white; margin-left: 10px">
	<div align="center" class="pageContent">
		<div id="pageVideo" style="float:left" class="pageVideo">	
			<div id="myPlayer"></div>
		</div>
		<div id="pageConfig" class="pageConfig">
			<div id="video_box">
			  <table border="0">
			  	<h1 class="h_font" style="margin-top: 30px;">
					播放器设置：
			  	</h1>
			    <tr>
			  		<td>
						<label>当前窗口: </label>
						<input class="input_style" style="width: 300px" type="number" name="Index" id="windowIndex" value="0"/>
					</td>
			  	</tr>
			  	<tr>
			  		<td>
						<label>&nbsp;&nbsp;&nbsp;&nbsp;设备ID: </label>
						<input class="input_style" style="width: 300px" type="text" name="DevID" id="devid" value="0"/>
					</td>
			  	</tr>
				<tr>
					<td class="decode-type">
						<label>软硬解码: </label>
						<input type="radio" value="0" name="radioCode"/>
				        <label for="0">软解</label>
				        <input type="radio" value="1" name="radioCode" checked style="margin-left:30px;"/>
				        <label for="1">硬解</label>
					</td>
				</tr>
				<tr class="real">
					<td class="video-connect">
						<label>连接方式: </label>
						<input type="radio" value="1" name="radioConnect" checked />
				        <label for="1">TCP</label>
						<input type="radio" value="0" name="radioConnect" style="margin-left:30px;"/>
				        <label for="0">UDP</label>
					</td>
				</tr>
				<tr class="real">
					<td>
						<label>码流地址: </label>
						<input class="input_style" style="width: 300px" type="text" name="RTSP" id="realInput" placeholder=" 请输入码流地址" />
					</td>
				</tr>
				<tr class="real">
					<td>
						<input type="button" class="btn_style" onclick="PlayRealStream()" value="播放" />
						<input type="button" class="btn_style" onclick="StopPlay()" value="停止" />
						<input type="button" class="btn_style" onclick="StopAllPlay()" value="全部停止" />
					</td>
				</tr>
				<!--视频操作-->
				<th colspan="2" class="table_th opetate">
			  		视频操作：
			  	</th>
			  	<tr class="operate">
			  		<td>
						<input type="button" class="btn_style" onclick="StartRecord()" value="录像" />
						<input type="button" class="btn_style" onclick="StopRecord()" value="停止录像" />
						<input type="button" class="btn_style" onclick="Snapshot()" value="截图" />
						<input type="button" class="btn_style" onclick="OpenAudio()" value="开启音频" />
						<input type="button" class="btn_style" onclick="CloseAudio()" value="关闭音频" />
					</td>
			  	</tr>
			  	<tr class="operate">
			  		<td>
		  				<div class="tabs-content" style="margin-bottom:30px;">
		  					<label style="margin-top:10px;">音量大小: </label>
	                        <div class="content active" style="margin-left:80px;margin-top:-10px;">
	                            <div id="audioSlier" style="width:190px;"> </div>
	                        </div>
                		</div>	
					</td>
			  	</tr>
			  	<!--窗口操作-->
				<th colspan="2" class="table_th opetate">
			  		窗口操作：
			  	</th>
			  	<tr class="operate">
			  		<td>
			  			<!--
			  			<input type="button" class="btn_style" onclick="initPlayer()" value="窗口创建" />
						<input type="button" class="btn_style" onclick="destroyPlayer()" value="窗口销毁" />-->
						<input type="button" class="btn_style" onclick="showVideoPlayer()" value="窗口显示" />
						<input type="button" class="btn_style" onclick="hideVideoPlayer()" value="窗口隐藏" />
						<input type="button" class="btn_style" onclick="setFullScreen()" value="窗口全屏" />
					</td>
			  	</tr>
			  </table>  
			</div>
		</div>
	</div>
  </body>
</html>

index.js

/* 
 * Filename:      	index.js
 * Description:  	界面功能实现
 * Version:			1.0
 * *******************************************************/

//全局变量
var g_videoPlayer = null
var g_currentIndex = 0
var g_decodeType = 1
var g_protocolType = 1

//初始化
$(function () {
  	initPlayer()
	initUI()
})

//初始化视频窗口
function initPlayer() {
	if(g_videoPlayer) {
		destroyPlayer()
	}
  	g_currentIndex = 0
  	$('#windowIndex').val(0)
  	g_videoPlayer = new VideoPlayer({
	    videoId: 'myPlayer',
	    num: 4, //初始化创建窗口个数
	    windowType: 3,
	    connectSuccess: () => {
			console.log('连接成功')
	    },
	    createSuccess: (e) => {
	      	console.log('窗口创建成功')
	    },
	    clickWindow: (wndIndex) => { //获取当前点击的窗口
			g_currentIndex = wndIndex
			$('#windowIndex').val(wndIndex)
			console.log("当前点击了第${wndIndex}个窗口")
	    }
  })
}

//初始化UI组件
function initUI() {
	$('.decode-type :radio').click(function () {
		var type = parseInt($(this).val())
		g_decodeType = type
	})

	$('.video-connect :radio').click(function () {
		var type = parseInt($(this).val())
		g_protocolType = type
	})

	$("#select_record_file").on("change", "input[id='record_file']", function () {
			document.getElementById("record_file_path").value = $(this).val()
	})
}


//显示视频窗口
function showVideoPlayer() {
  g_videoPlayer.show()
}

//隐藏视频窗口
function hideVideoPlayer() {
  g_videoPlayer.hide()
}


//设置全屏
function setFullScreen() {
  g_videoPlayer.setFullScreen()
}

//销毁视频窗口
function destroyPlayer() {
  if (!g_videoPlayer) {
    alert('请先创建视频窗口')
  }
  g_videoPlayer.destroy()
  g_videoPlayer = null
}


实时预览
//播放
function PlayRealStream() {

	if(!g_videoPlayer) {
	    alert('请先创建视频窗口')
	}

	var sUrl = $('#realInput').val()
	if (!sUrl) {
		alert("实时地址不能为空")
		return false
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}

	var devid = $('#devid').val();
	if(!devid) {
		alert("设备ID不能为空")
		return false
	}
	
	g_videoPlayer.playReal({
		devId: devid,
		winIndex: windowIndex,
		url: sUrl,
		decodeType: g_decodeType,
		connectType: g_protocolType
	})
}

//停止
function StopPlay() {

	if(!g_videoPlayer) {
	    alert('请先创建视频窗口')
	}

  	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}

	g_videoPlayer.stopVideo(windowIndex)
}


//全部停止
function StopAllPlay() {

	if(!g_videoPlayer) {
	    alert('请先创建视频窗口')
	}
	g_videoPlayer.stopVideo('')
}


//视频操作
//开始录像
function StartRecord() {

	if(!g_videoPlayer) {
		alert('请先创建视频窗口')
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}

	g_videoPlayer.enableRecord({
	    winIndex: windowIndex,
	    isEnable: true
  	})
}

//结束录像
function StopRecord() {

	if(!g_videoPlayer) {
		alert('请先创建视频窗口')
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}
	
	g_videoPlayer.enableRecord({
	    winIndex: windowIndex,
	    isEnable: false
  	})
}


//截图
function Snapshot() {

	if(!g_videoPlayer) {
		alert('请先创建视频窗口')
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}
	g_videoPlayer.snapshot(windowIndex)
}


//开启音频
function OpenAudio() {

	if(!g_videoPlayer) {
		alert('请先创建视频窗口')
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}
		
	g_videoPlayer.enableAudio({
	    winIndex: windowIndex,
	    isEnable: true
  	})
}

//关闭音频
function CloseAudio() {

	if(!g_videoPlayer) {
		alert('请先创建视频窗口')
	}

	var windowIndex = parseInt($('#windowIndex').val());
	if(windowIndex < 0 || windowIndex > 64) {
		alert("当前窗口号需要设置(>=0 && <64)的数字")
		return false
	}
	
	g_videoPlayer.enableAudio({
	    winIndex: windowIndex,
	    isEnable: false
  	})
}

//设置音量
function SetAudioVolume() {

	var audioVolumn = parseInt($("#audioSlier").slider('value'));
	if(g_videoPlayer) {
		g_videoPlayer.setAudioVolumn({
		    volumn: audioVolumn
  		})
	}
}

C++部分：
MainWindow.cpp

#include <QMessageBox>
#include <QFileDialog>
#include <QMetaType>
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "ctaudioplayer.h"
#include <QDesktopServices>
#include <QJsonDocument>
#include <QJsonObject>
#include <QJsonArray>
#include <QDesktopServices>

#if (QT_VERSION >= QT_VERSION_CHECK(6,0,0))
#include <QScreen>
#else
#include <QDesktopWidget>
#endif

#pragma execution_character_set("utf-8")

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //初始化多路播放器
    InitMul();

    //初始化websocket
    InitWeb();

    //窗口置顶
    this->setWindowFlags(Qt::Widget | Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
}

MainWindow::~MainWindow()
{
    if(m_pWebSocketServer)
        m_pWebSocketServer->close();
    delete ui;
}

void MainWindow::InitMul()
{
    qRegisterMetaType<MEDIA_DEV_INFO_T>("MEDIA_DEV_INFO_T");

    connect(this, SIGNAL(sig_setScreenType(int)),
            ui->widget_mulvideo, SLOT(slot_setScreenType(int)));

    connect(this, SIGNAL(sig_playOne(MEDIA_DEV_INFO_T)),
            ui->widget_mulvideo, SLOT(slot_playOne(MEDIA_DEV_INFO_T)));
    connect(this, SIGNAL(sig_stopOne(int)),
            ui->widget_mulvideo, SLOT(slot_stopOne(int)));

    connect(this, SIGNAL(sig_snapshot(int)),
            ui->widget_mulvideo, SLOT(slot_snapshot(int)));
    connect(this, SIGNAL(sig_enableRecord(bool,int)),
            ui->widget_mulvideo, SLOT(slot_enableRecord(bool,int)));

    connect(this, SIGNAL(sig_stopAll()),
            ui->widget_mulvideo, SLOT(slot_stopAll()));

    connect(this, SIGNAL(sig_nextPage()),
            ui->widget_mulvideo, SLOT(slot_NextPage()));
    connect(this, SIGNAL(sig_prevPage()),
            ui->widget_mulvideo, SLOT(slot_PrevPage()));
    connect(ui->widget_mulvideo, SIGNAL(sig_pageInfo(QString)),
            this, SLOT(slot_setPageInfo(QString)));

    connect(ui->widget_mulvideo, SIGNAL(sig_curWinIndex(int)),
            this, SLOT(slot_curWinIndex(int)));

    connect(ui->widget_mulvideo, SIGNAL(sig_playFailTip(QString)),
            this, SLOT(slot_playFailTip(QString)));

    connect(this, SIGNAL(sig_fullscreen(bool)),
            ui->widget_mulvideo, SLOT(slot_fullscreen(bool)));

    connect(ui->widget_mulvideo, SIGNAL(sig_fullscreen(bool)),
            this, SLOT(slot_fullscreen(bool)));


    ui->comboBox_ChangeVideo->setCurrentIndex(1);
    emit sig_setScreenType(1);
}

void MainWindow::InitWeb()
{
    //web param
    m_stWebParam.sInfo = SOFTWARE_VERSION;
    m_stWebParam.sVer = SOFTWARE_VERSION;
    m_stWebParam.nCode = 0;
    m_stWebParam.nHwnd = 0;

    //窗口置顶
    this->setWindowFlags(Qt::Window | Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);

    //设置背景
    QColor color("#f0faff");
    QPalette pal(this->palette());
    pal.setColor(QPalette::Background, color);
    this->setAutoFillBackground(true);
    this->setPalette(pal);

    //websocket
    m_pWebSocketServer = new QWebSocketServer("myServer", QWebSocketServer::NonSecureMode);
    connect(m_pWebSocketServer, SIGNAL(newConnection()), this, SLOT(on_newConnection()));

    m_pWebSocketServer->listen(QHostAddress::Any, WEB_LISTEN_PORT);

    InitMethodFun();
}

void MainWindow::InitMethodFun()
{
    METHOD_FUN_T stMethodFun[] =
    {
        {"window.version", MainWindow::GetPlayerVer},
        {"window.create", MainWindow::windowCreate},
        {"window.change", MainWindow::windowChange},
        {"window.show", MainWindow::windowShow},
        {"media.playReal", MainWindow::PlayReal},
        {"media.stop", MainWindow::StopMedia},
        {"media.snapshot", MainWindow::Snapshot},
        {"media.enableRecord", MainWindow::enableRecord},
        {"media.enableAudio", MainWindow::enableAudio},
        {"media.setAudioVolumn", MainWindow::setAudioVolumn},
        {"media.fullscreen", MainWindow::fullScreen},
        {"player.test", NULL},
    };

    for(int i=0; stMethodFun[i].methodFun != NULL;  i++)
    {
        m_hashFun.insert(stMethodFun[i].sMethod, stMethodFun[i].methodFun);
    }
}

void MainWindow::SendJsonData(QJsonObject Json)
{
    //构建 Json 文档
    QJsonDocument document;
    document.setObject(Json);
    QByteArray byteArray = document.toJson(QJsonDocument::Compact);
    QString strJson(byteArray);

    for (int i=0;i<m_clientsList.size();i++)
    {
        m_clientsList.at(i)->sendTextMessage(strJson);
    }
}

void MainWindow::GetPlayerVer(void* pObject, QJsonObject* pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
            MY_DEBUG << "yibin test m_stWebParam.nID:" << pWin->m_stWebParam.nID;

            QJsonObject dataObject;
            dataObject.insert("info", pWin->m_stWebParam.sInfo);
            dataObject.insert("ver", pWin->m_stWebParam.sVer);

            QJsonObject json;
            json.insert("code", pWin->m_stWebParam.nCode);
            json.insert("data", QJsonValue(dataObject));
            json.insert("id", pWin->m_stWebParam.nID);
            json.insert("session", pWin->m_stWebParam.nSession);
            json.insert("success", "true");

            pWin->SendJsonData(json);
        }
    }
}

void MainWindow::windowCreate(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("clientAreaWidth"))
            {
                QJsonValue value = obj.value("clientAreaWidth");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nClientAreaWidth = value.toVariant().toInt();
                }
            }
            if(obj.contains("clientAreaHeight"))
            {
                QJsonValue value = obj.value("clientAreaHeight");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nClientAreaHeight = value.toVariant().toInt();
                }
            }
            if(obj.contains("width"))
            {
                QJsonValue value = obj.value("width");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nWidth = value.toVariant().toInt();
                }
            }
            if(obj.contains("height"))
            {
                QJsonValue value = obj.value("height");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nHeight = value.toVariant().toInt();
                }
            }
            if(obj.contains("left"))
            {
                QJsonValue value = obj.value("left");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nLeft = value.toVariant().toInt();
                }
            }
            if(obj.contains("top"))
            {
                QJsonValue value = obj.value("top");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nTop = value.toVariant().toInt();
                }
            }
            if(obj.contains("num"))
            {
                QJsonValue value = obj.value("num");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nNum = value.toVariant().toInt();
                }
            }
        }
        pWin->move(pWin->m_stWebParam.nScreenX+pWin->m_stWebParam.nLeft, pWin->m_stWebParam.nScreenY+pWin->m_stWebParam.nTop+140);
    }

    QJsonObject dataObject;
    dataObject.insert("bRtsps", pWin->m_stWebParam.bRtsp);
    dataObject.insert("hwnd", pWin->m_stWebParam.nHwnd);

    QJsonObject json;
    json.insert("code", pWin->m_stWebParam.nCode);
    json.insert("data", QJsonValue(dataObject));
    json.insert("id", pWin->m_stWebParam.nID);
    json.insert("session", pWin->m_stWebParam.nSession);
    json.insert("success", "true");

    pWin->SendJsonData(json);
}

void MainWindow::windowChange(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("clientAreaWidth"))
            {
                QJsonValue value = obj.value("clientAreaWidth");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nClientAreaWidth = value.toVariant().toInt();
                }
            }
            if(obj.contains("clientAreaHeight"))
            {
                QJsonValue value = obj.value("clientAreaHeight");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nClientAreaHeight = value.toVariant().toInt();
                }
            }
            if(obj.contains("left"))
            {
                QJsonValue value = obj.value("left");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nLeft = value.toVariant().toInt();
                }
            }
            if(obj.contains("top"))
            {
                QJsonValue value = obj.value("top");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nTop = value.toVariant().toInt();
                }
            }
            if(obj.contains("screenX"))
            {
                QJsonValue value = obj.value("screenX");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nScreenX = value.toVariant().toInt();
                }
            }
            if(obj.contains("screenY"))
            {
                QJsonValue value = obj.value("screenY");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nScreenY = value.toVariant().toInt();
                }
            }
        }
    }
    pWin->move(pWin->m_stWebParam.nScreenX+pWin->m_stWebParam.nLeft, pWin->m_stWebParam.nScreenY+pWin->m_stWebParam.nTop+140);
}

void MainWindow::windowShow(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("show"))
            {
                QJsonValue value = obj.value("show");
                if(value.isBool())
                {
                    pWin->m_stWebParam.bShow = value.toVariant().toBool();
                }
            }
            if(obj.contains("hwnd"))
            {
                QJsonValue value = obj.value("hwnd");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nHwnd = value.toVariant().toInt();
                }
            }
            if(obj.contains("browserType"))
            {
                QJsonValue value = obj.value("browserType");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nBrowserType = value.toVariant().toInt();
                }
            }
        }
    }

    pWin->setVisible(pWin->m_stWebParam.bShow);
}

void MainWindow::PlayReal(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("devId"))
            {
                QJsonValue value = obj.value("devId");
                if(value.isString())
                {
                    pWin->m_stWebParam.sDevId = value.toVariant().toString();
                }
            }
            if(obj.contains("winIndex"))
            {
                QJsonValue value = obj.value("winIndex");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nWinIndex = value.toVariant().toInt();
                }
            }
            if(obj.contains("decodeType"))
            {
                QJsonValue value = obj.value("decodeType");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nDecodeType = value.toVariant().toInt();
                }
            }
            if(obj.contains("connectType"))
            {
                QJsonValue value = obj.value("connectType");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nProtocolType = value.toVariant().toInt();
                }
            }
            if(obj.contains("url"))
            {
                QJsonValue value = obj.value("url");
                if(value.isString())
                {
                    pWin->m_stWebParam.sUrl = value.toVariant().toString();
                }
            }
        }
    }

    if(!pWin->m_stWebParam.sUrl.isEmpty() && !pWin->m_stWebParam.sDevId.isEmpty() &&
            (pWin->m_stWebParam.nWinIndex >= 0 && pWin->m_stWebParam.nWinIndex < MAX_MEDIA_NUM))
    {
        MEDIA_DEV_INFO_T stDev;
        stDev.nChannel = pWin->m_stWebParam.nWinIndex;
        stDev.sDevId = pWin->m_stWebParam.sDevId;
        stDev.sUrl = pWin->m_stWebParam.sUrl;
        stDev.nDecodeType = pWin->m_stWebParam.nDecodeType;
        stDev.nProtocolType = pWin->m_stWebParam.nProtocolType;
        emit pWin->sig_playOne(stDev);
    }

    QJsonObject dataObject;
    QJsonObject json;
    json.insert("code", pWin->m_stWebParam.nCode);
    json.insert("data", QJsonValue(dataObject));
    json.insert("id", pWin->m_stWebParam.nID);
    json.insert("session", pWin->m_stWebParam.nSession);
    json.insert("success", "true");

    pWin->SendJsonData(json);
}

void MainWindow::Snapshot(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("winIndex"))
            {
                QJsonValue value = obj.value("winIndex");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nWinIndex = value.toVariant().toInt();
                }
            }
        }
    }

    emit pWin->sig_snapshot(pWin->m_stWebParam.nWinIndex);
}

void MainWindow::enableRecord(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("winIndex"))
            {
                QJsonValue value = obj.value("winIndex");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nWinIndex = value.toVariant().toInt();
                }
            }
            if(obj.contains("isEnable"))
            {
                QJsonValue value = obj.value("isEnable");
                if(value.isBool())
                {
                    pWin->m_stWebParam.bRecord = value.toVariant().toBool();
                }
            }
        }
    }

    emit pWin->sig_enableRecord(pWin->m_stWebParam.bRecord, pWin->m_stWebParam.nWinIndex);
}

void MainWindow::enableAudio(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("isEnable"))
            {
                QJsonValue value = obj.value("isEnable");
                if(value.isBool())
                {
                    pWin->m_stWebParam.bAudio = value.toVariant().toBool();
                    ctAudioPlayer::getInstance().isPlay(pWin->m_stWebParam.bAudio);
                }
            }
        }
    }
}

void MainWindow::setAudioVolumn(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("volumn"))
            {
                QJsonValue value = obj.value("volumn");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nVolumn = value.toVariant().toDouble();
                    qreal nVal = pWin->m_stWebParam.nVolumn / 100.0;
                    MY_DEBUG << "setAudioVolumn nVal:" << nVal;
                    ctAudioPlayer::getInstance().setVolumn(nVal);
                }
            }
        }
    }
}

void MainWindow::fullScreen(void *pObject, QJsonObject *pJson)
{
    Q_UNUSED(pJson)

    MainWindow* pWin = (MainWindow*)pObject;
    emit pWin->sig_fullscreen(true);
    pWin->slot_fullscreen(true);
}

void MainWindow::StopMedia(void *pObject, QJsonObject *pJson)
{
    MainWindow* pWin = (MainWindow*)pObject;
    if(pJson->contains("id"))
    {
        QJsonValue id = pJson->value("id");
        if(id.isDouble())
        {
            pWin->m_stWebParam.nID = id.toVariant().toInt();
        }
    }

    if(pJson->contains("info"))
    {
        QJsonValue value = pJson->value("info");
        if(value.isObject())
        {
            QJsonObject obj = value.toObject();
            if(obj.contains("winIndex"))
            {
                QJsonValue value = obj.value("winIndex");
                if(value.isDouble())
                {
                    pWin->m_stWebParam.nWinIndex = value.toVariant().toInt();
                }
            }
            if(obj.contains("isAll"))
            {
                QJsonValue value = obj.value("isAll");
                if(value.isBool())
                {
                    pWin->m_stWebParam.bAllStop = value.toVariant().toBool();
                }
            }
        }
    }

    if(pWin->m_stWebParam.bAllStop)
        emit pWin->sig_stopAll();
    else
    {
        if(pWin->m_stWebParam.nWinIndex >= 0 && pWin->m_stWebParam.nWinIndex < MAX_MEDIA_NUM)
        {
            emit pWin->sig_stopOne(pWin->m_stWebParam.nWinIndex);
        }
    }

    QJsonObject dataObject;
    QJsonObject json;
    json.insert("code", pWin->m_stWebParam.nCode);
    json.insert("data", QJsonValue(dataObject));
    json.insert("id", pWin->m_stWebParam.nID);
    json.insert("session", pWin->m_stWebParam.nSession);
    json.insert("success", "true");

    pWin->SendJsonData(json);
}

void MainWindow::parseJson(QString sData)
{
    QJsonParseError jError;
    QJsonDocument jDoc = QJsonDocument::fromJson(sData.toLatin1(), &jError);//转换成文档对象
    if(!jDoc.isNull() && jError.error == QJsonParseError::NoError)
    {
        if(jDoc.isObject())
        {
            QJsonObject object = jDoc.object();
            if(object.contains("method"))
            {
                QJsonValue sMethod = object.value("method");
                if(sMethod.isString())
                {
                    QString strMethod = sMethod.toString();

                    QHashMethodFunIterator iter = m_hashFun.begin();
                    for(; iter != m_hashFun.end(); ++iter)
                    {
                        QString sKey = iter.key();
                        if(sKey.contains(strMethod))
                        {
                            MethodFun fun = m_hashFun.value(sKey);
                            fun(this, &object);
                        }
                    }
                }
            }
        }
    }
}

void MainWindow::keyPressEvent(QKeyEvent *event)
{
    if(event->key() == Qt::Key_Escape)
    {
        if(m_bFullScreen == true)
        {
            emit sig_fullscreen(false);
            slot_fullscreen(false);
            event->accept();
        }
    }
    return QMainWindow::keyPressEvent(event);
}

void MainWindow::sendWinSelect()
{
    QJsonObject infoObject;
    infoObject.insert("wndIndex", m_stWebParam.nWinIndex);
    infoObject.insert("hwnd", m_stWebParam.nHwnd);

    QJsonObject json;
    json.insert("method", "window.clicked");
    json.insert("info", QJsonValue(infoObject));
    json.insert("session", m_stWebParam.nSession);
    json.insert("success", "true");

    SendJsonData(json);
}

void MainWindow::showFullScreen()
{
    m_normalGeo = this->geometry();
#if (QT_VERSION >= QT_VERSION_CHECK(6,0,0))
    QScreen *desk = qApp->screenAt(QCursor::pos());
    QRect rect = desk->availableGeometry();
#else
    QDesktopWidget *desk = qApp->desktop();
    int ScreenNum = desk->screenNumber(QCursor::pos());
    QRect rect = desk->availableGeometry(ScreenNum);
#endif
    setGeometry(rect + QMargins(32,17,17,17));
    QMainWindow::show();
}

void MainWindow::showNormal(const QRect &rect)
{
    if(rect.isNull())
    {
        if(m_normalGeo.isNull())
        {
            m_normalGeo = geometry();
            m_normalGeo.setWidth(geometry().width()/2);
            m_normalGeo.setHeight(geometry().height()/2);
        }

        if(m_normalGeo.width() > width() || m_normalGeo.height() > height())
        {
            m_normalGeo.setWidth(this->width()/2);
            m_normalGeo.setHeight(this->height()/2);
        }

        if(m_normalGeo.y() < 0)
            m_normalGeo.setY(0);

        setGeometry(m_normalGeo);
    }
    else
    {
        setGeometry(m_normalGeo);
    }

    m_bFullScreen = false;

    QMainWindow::show();
}

void MainWindow::on_comboBox_ChangeVideo_activated(int index)
{
    emit sig_setScreenType(index);
}

void MainWindow::on_newConnection()
{
    m_pSocket = m_pWebSocketServer->nextPendingConnection();
    connect(m_pSocket, SIGNAL(textMessageReceived(QString)), this, SLOT(on_processTextMessage(QString)));
    connect(m_pSocket, SIGNAL(disconnected()), this, SLOT(on_socketDisconnected()));

    QString item = m_pSocket->peerAddress().toString();
    MY_DEBUG << item;
    m_clientsList << m_pSocket;
}

void MainWindow::on_socketDisconnected()
{
}

void MainWindow::on_processTextMessage(QString message)
{
    QString time = m_pCurrentDateTime->currentDateTime().toString("yyyy.MM.dd hh:mm:ss.zzz ddd");
    QString item = m_pSocket->peerAddress().toString();

    //MY_DEBUG << time + "" + item + "\n" + message;

    parseJson(message);
}

void MainWindow::on_pushButton_PrevPage_clicked()
{
    emit sig_prevPage();
}

void MainWindow::on_pushButton_NextPage_clicked()
{
    emit sig_nextPage();
}

void MainWindow::slot_curWinIndex(int nIndex)
{
    m_stWebParam.nWinIndex = nIndex;
    sendWinSelect();
}

void MainWindow::slot_playFailTip(QString sTip)
{
    QMessageBox::critical(this, "myFFmpeg", sTip);
}

void MainWindow::slot_setPageInfo(QString sInfo)
{
    ui->label_PageNumber->setText(sInfo);
}

void MainWindow::slot_fullscreen(bool bFull)
{
    if(bFull)
    {
        m_bFullScreen = true;
        ui->widget_control->hide();
        showFullScreen();
    }
    else
    {
        m_bFullScreen = false;
        ui->widget_control->show();
        showNormal();
    }
}

三.浏览器内嵌C++播放器的下载

网页源码与C++播放器源码下载

链接: https://download.csdn.net/download/linyibin_123/88750997文章来源地址https://www.toymoban.com/news/detail-798250.html

到了这里，关于浏览器网页内嵌Qt-C++音视频播放器的实现，支持软硬解码，支持音频，支持录像截图，支持多路播放等，提供源码工程下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【音视频笔记】Mediacodec+Muxer生成mp4，浏览器无法播放问题处理

    最近在测试视频录制功能时发现，AudioRecord + MediaCodec + MediaMuxer生成的MP4，PC浏览器无法播放 ，但是Android、Windows、Mac的播放器应用都能正常播放。虽然不禁想吐槽浏览器视频组件的容错性差，但我也意识生成的文件格式肯定也是有问题的。 然后尝试了合成MP4视频时，只保留视

    2024年02月07日
    浏览(43)
  • Unity 工具之 UniWebView 内嵌网页/浏览器到应用中，并且根据UGUI大小放置（简单适配UGUI）

    Unity 工具之 UniWebView 内嵌网页/浏览器到应用中，并且根据UGUI大小放置（简单适配UGUI）

    目录 Unity 工具之 UniWebView 内嵌网页/浏览器到应用中，并且根据UGUI大小放置（简单适配UGUI） 一、简单介绍 二、UniWebView 组件上的几个参数属性选项介绍 三、一些关键接口介绍 四、Transition 五、Memory Management（内存管理） 六、Messaging System 七、注意实现 八、效果预览 九、实现

    2024年01月24日
    浏览(28)

  • JavaScript音视频，使用JavaScript如何在浏览器录制电脑摄像头画面为MP4视频文件并下载视频文件到本地

    本章介绍使用JavaScript如何在浏览器录制电脑摄像头画面为MP4视频文件并下载视频文件到本地。 1、使用navigator.mediaDevices.getUserMedia获取摄像头画面 2、将获取到的摄像头画面渲染到canvas画板上 3、将canvas转换为blob对象 4、通过document.createElement(‘a’)调用 href 方法获取此链接并触

    2024年02月02日
    浏览(48)
  • Qt+C++自建网页浏览器-Chrome blink最新内核基础上搭建-改进版本

    Qt+C++自建网页浏览器-Chrome blink最新内核基础上搭建-改进版本

     程序示例精选 Qt+C++自建网页浏览器-Chrome blink最新内核基础上搭建-改进版本 如需安装运行环境或远程调试，见文章底部个人 QQ 名片，由专业技术人员远程协助！ 这篇博客针对Qt+C++自建网页浏览器-Chrome最新内核基础上搭建-改进版本编写代码，代码整洁，规则，易读。 学习

    2024年02月09日
    浏览(33)
  • 如何在VSCode内嵌浏览器实时预览Vue项目

    如何在VSCode内嵌浏览器实时预览Vue项目

    安装以下两个插件：just heml preview 和 Browser Preview just heml preview：使用ctrl + shift + p 打开命令 然后输入：just preview 即可打开 输入本地项目地址：localhost:4000 最后可按照vscode正常分屏方式分屏（右上角有pc端和移动端） Browser Preview：现已不再维护 安装成功后左边会出现一个类似

    2024年01月22日
    浏览(50)
  • java内嵌浏览器CEF-JAVA、jcef、java chrome

    java内嵌浏览器CEF-JAVA、jcef、java chrome

    java内嵌浏览器CEF-JAVA、jcef、java chrome jcef是老牌cef的chrome内嵌方案，可以进行java-chrome-h5-桌面开发，下面为最新版本（2023年9月22日10:33:07） JCEF（Java Chromium Embedded Framework）是一个基于Google Chromium的Java库，可以在Java应用程序中嵌入和使用Chromium浏览器引擎。 转自 https://lingkan

    2024年02月05日
    浏览(29)
  • Qt音视频开发41-文件推流（支持网页和播放器播放并切换进度）

    Qt音视频开发41-文件推流（支持网页和播放器播放并切换进度）

    本功能最初也是有一些人提过类似的需求，就是能不能将本地的音视频文件，通过纯Qt程序推流出去，然后用户可以直接在网页上播放，也可以用各种播放器播放，然后还可以任意切换播放进度，其实说白了就是个文件服务器，用户通过网络地址访问以后，告诉对方当前是媒

    2024年02月01日
    浏览(47)

  • vue 监听浏览器网页关闭和网页刷新事件

    1、监听浏览器页面关闭/刷新事件。 运用场景：浏览器页面关闭后删除local storage、session、cookie、发送请求等。 2、只监听浏览器关闭事件

    2024年02月13日
    浏览(39)
  • Postman模拟浏览器网页请求并获取网页数据

    Postman模拟浏览器网页请求并获取网页数据

      本文介绍在浏览器中，获取网页中的某一个请求信息，并将其导入到 Postman 软件，并进行 API 请求测试的方法。    Postman 是一款流行的 API 开发和测试工具，它提供了一个用户友好的界面，用于创建、测试、调试和文档化 API 。本文就介绍一下这一工具的最基本用法——

    2024年04月08日
    浏览(32)
  • Selenium入门必备：学会用代码控制浏览器，打开网页、找到元素和退出浏览器

    Selenium入门必备：学会用代码控制浏览器，打开网页、找到元素和退出浏览器

    目录 一、前期准备 1、概述 2、学习目标 3、安装 二、selenium的基本使用 1、加载网页： 2、定位和操作： 3、查看请求信息： 4、退出 小结 三、元素定位的方法 学习目标 1、selenium的定位操作 2、元素的操作 小结 四、selenium的其他操作 学习目标 1、无头浏览器 1、selenium 处理

    2024年02月13日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包