QT嵌入支持WEBRTC的网页

chocolate7777777

已于 2024-07-17 15:14:57 修改

阅读量488

点赞数 8

分类专栏： QT 文章标签： qt webrtc c++ html

于 2024-07-17 15:11:20 首次发布

本文链接：https://blog.csdn.net/qq_40321622/article/details/140492630

版权

QT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文主要讲在QT开发中，WEBRTC网页版通信的第一步，浏览器与媒体设备（即麦克风和摄像头）的交互的实现。

先编译好支持音视频的QtWebEngine或QCefView的其中一个，编译过程可参考

编译支持音视频的QtWebEngine + Win10_x64 + QT5.15.0 + VS2019_qt webengine win10-CSDN博客

编译QCefView + Win10_x64 + QT5.15.0 + VS2019-CSDN博客

就可以开始进行QT上的带视频的网页相关开发了，下面的例子在QT界面插入网页，网页里调用了getUserMedia获取本地视频。

1.网页代码index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>打开摄像头</title>
	<style>
		video {
			width: 50%;
			height: 50%;
			margin: 50px auto; /*则表示上下边界为50，左右则根据宽度自适应相同值（即水平居中）*/
			background-color: #484848 ;
			display: block;   /*将元素显示为块级元素。*/
		}
		.button {
		  background-color: #4CAF50; /* Green */
		  border: none;
		  color: white;
		  padding: 15px 32px;
		  text-align: center;
		  text-decoration: none;
		  display: inline-block;
		  font-size: 16px;
		  margin: 4px 2px;
		  cursor: pointer;
		  -webkit-transition-duration: 0.4s; /* Safari */
		  transition-duration: 0.4s;
		  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		}
		.button:hover {
		  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
		}
	</style>
	<script>
	// 打开摄像头,最新的标准API
	function openVideo() {
		var video = document.getElementById("video");
		navigator.mediaDevices.getUserMedia({video : {width: 800, height: 600}}).then(success).catch(error);
	}
	// 视频播放回调函数
	function success(stream) {
		video.srcObject = stream;  //将视频流设置为video元素的源
		video.play();              //播放视频
	}
	// 异常的回调函数
	function error(error) {
		console.log("访问用户媒体设备失败：",error.name,error.message);
    }
	</script>
</head>
<body>
	<video id="video"></video>
	<div align="center">
		<button id="open" class="button" onclick="openVideo()">打开摄像头</button>
	</div>
</body>
</html>

2.QtWebEngine的使用

MainWindow.hpp

#include <QtWebEngineWidgets/QWebEngineView>

...

protected:

    void slotFeaturePermissionRequested(const QUrl& securityOrigin, QWebEnginePage::Feature feature);

...

private:

    QWebEngineView* m_engineView = nullptr;

...

MainWindow.cpp 下面代码直接给了权限，也可以根据实际情况给权限

...

QHBoxLayout* hLayTest = new QHBoxLayout();

//获取程序的当前路径
QDir dir = QCoreApplication::applicationDirPath();

//程序路径+html相对路径
QString path = QDir::toNativeSeparators(dir.filePath("web/index.html"));

m_engineView = new QWebEngineView(this);
m_engineView->load(QUrl::fromLocalFile(path));

connect(m_engineView->page(), &QWebEnginePage::featurePermissionRequested, this, &CMainWindow::slotFeaturePermissionRequested);

hLayTest->addWidget(m_engineView);

...


//给权限
void CMainWindow::slotFeaturePermissionRequested(const QUrl& securityOrigin, QWebEnginePage::Feature feature)
{
	m_engineView->page()->setFeaturePermission(securityOrigin, feature, QWebEnginePage::PermissionGrantedByUser);
}

...

即可在QT的界面上显示出本机视频设备的视频。

3.QCefView的使用

先拷贝QCefView例子下的这两个文件到自己项目中

main.cpp

#include <QCefContext.h>

...

QApplication a(argc, argv);

// build QCefConfig
QCefConfig config;
config.setUserAgent("QCefViewTest");
config.setLogLevel(QCefConfig::LOGSEVERITY_DEFAULT);
config.setBridgeObjectName("CallBridge");
config.setRemoteDebuggingPort(9000);
config.setBackgroundColor(Qt::lightGray);

// add command line args
// config.addCommandLineSwitch("allow-universal-access-from-files");
config.addCommandLineSwitch("enable-media-stream");
config.addCommandLineSwitch("use-mock-keychain");
config.addCommandLineSwitch("allow-file-access-from-files");
config.addCommandLineSwitch("disable-spell-checking");
config.addCommandLineSwitch("disable-site-isolation-trials");
config.addCommandLineSwitch("enable-aggressive-domstorage-flushing");
config.addCommandLineSwitchWithValue("renderer-process-limit", "1");
config.addCommandLineSwitchWithValue("disable-features", "BlinkGenPropertyTrees,TranslateUI,site-per-process");

// initialize QCefContext instance with config
QCefContext cefContext(&a, argc, argv, &config);


CMainWindow* mainWindow = new CMainWindow();
mainWindow->show();

QApplication::exec();

...

MainWindow.hpp

#include "CefViewWidget.h"

...

private:
    CefViewWidget* m_cefViewWidget = nullptr;

...

MainWindow.cpp

...
QHBoxLayout* hLayTest = new QHBoxLayout();

//音视频
QCefSetting setting;
setting.setWindowlessFrameRate(60);
setting.setBackgroundColor(QColor::fromRgba(qRgba(255, 255, 220, 255)));

//获取程序的当前路径
QDir dir = QCoreApplication::applicationDirPath();

//程序路径+html相对路径
QString path = QDir::toNativeSeparators(dir.filePath("web/index.html"));

m_cefViewWidget = new CefViewWidget(path, &setting);

hLayTest->addWidget(m_cefViewWidget);

...

即可在QT的界面上显示出本机视频设备的视频。

chocolate7777777

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
QT嵌入支持WEBRTC的网页

就可以开始进行QT上的带视频的网页相关开发了，下面的例子在QT界面插入网页，网页里调用了getUserMedia获取本地视频。本文主要讲在QT开发中，WEBRTC网页版通信的第一步，浏览器与媒体设备（即麦克风和摄像头）的交互的实现。先编译好支持音视频的QtWebEngine或QCefView的其中一个，编译过程可参考。MainWindow.cpp 下面代码直接给了权限，也可以根据实际情况给权限。即可在QT的界面上显示出本机视频设备的视频。即可在QT的界面上显示出本机视频设备的视频。
复制链接

扫一扫

专栏目录