Qt-Web混合开发-QWebEnginePage权限管理（3） 原创
Qt-Web混合开发-使用QWebEnginePage打开摄像头演示权限管理🏳️🌈
| 更多精彩内容 |
|---|
| 👉个人内容分类汇总 👈 |
| 👉Qt - Web混合开发👈 |
1、概述🚩
- Qt版本：V5.12.5
- 注意：windows下
webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）； - 在使用QWebEngineView内嵌网页时有些功能需要授权才可以使用，例如打开摄像头、麦克风、定位等功能需要授权；
- 当程序需要授权时
QWebEnginePage会发出featurePermissionRequested()信号，当接收到信号后需要在槽函数中通过QWebEnginePage::setFeaturePermission()函数授权，程序才可以正常运行；
2、实现效果🥽
-
本地html文件打开摄像头授权
-
在线网站打开摄像头授权
3、实现功能🔊
- 使用QWebEnginePage有时需要权限，例如打开摄像头、麦克风；
- 使用Qt + html打开摄像头功能；
- 这里演示了怎么实现授权功能；
- 分别展示了打开【网络地址】授权和打开【本地html】授权。
4、关键代码🚚
- pro文件
QT += webenginewidgets # 使用QWebEngineView需要加载模块
- video.html：编写一个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>
- mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <qwebenginepage.h>
class QWebEngineView;
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
protected:
void on_featurePermissionRequested(const QUrl &securityOrigin, QWebEnginePage::Feature feature);
private:
QWebEngineView* m_view = nullptr;
};
#endif // MAINWINDOW_H
- mainwindow.cpp
#include "mainwindow.h"
#include <QWebEngineView>
#include <QMap>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, m_view(new QWebEngineView(this))
{
this->resize(1024, 750); // 设置窗口大小
this->setWindowTitle(QString("QWebEnginePage权限管理 - V%1").arg(APP_VERSION)); // 设置窗口标题
this->setCentralWidget(m_view); // 将m_view设置为主窗口的中心小部件
QWebEnginePage* page = m_view->page();
connect(page, &QWebEnginePage::featurePermissionRequested, this, &MainWindow::on_featurePermissionRequested);
#if 0
page->load(QUrl(QStringLiteral("https://app.xunjieshipin.com/luping/")));
#else
page->load(QUrl(QStringLiteral("qrc:/video.html")));
#endif
}
MainWindow::~MainWindow()
{
}
/**
* @brief 当securityOrigin标识的网站请求使用功能标识的资源或设备时，会发出信号，触发当前函数
* @param securityOrigin
* @param feature
*/
void MainWindow::on_featurePermissionRequested(const QUrl &securityOrigin, QWebEnginePage::Feature feature)
{
QString strFeature = "程序需要使用";
switch (feature)
{
case QWebEnginePage::Notifications:
strFeature += "Notifications";
break;
case QWebEnginePage::Geolocation:
strFeature += "定位硬件或服务";
break;
case QWebEnginePage::MediaAudioCapture:
strFeature += "音频捕获设备，如麦克风";
break;
case QWebEnginePage::MediaVideoCapture:
strFeature += "视频设备，如摄像机";
break;
case QWebEnginePage::MediaAudioVideoCapture:
strFeature += "音频和视频捕获设备";
break;
case QWebEnginePage::MouseLock:
strFeature += "鼠标锁定";
break;
#if (QT_VERSION >= QT_VERSION_CHECK(5, 10, 0)) // 后面两个枚举Qt5.10以后才有
case QWebEnginePage::DesktopVideoCapture:
strFeature += "视频输出捕获";
break;
case QWebEnginePage::DesktopAudioVideoCapture:
strFeature += "音频和视频输出捕获";
break;
#endif
}
strFeature += "，是否允许？";
// 弹出一个弹窗
QMessageBox msg(this);
msg.setIcon(QMessageBox::Information);
msg.setWindowTitle("注意！");
msg.setText(QString("%1").arg(securityOrigin.toString()));
msg.setInformativeText(strFeature);
msg.setStandardButtons(QMessageBox::Yes | QMessageBox::No);
msg.setDefaultButton(QMessageBox::Yes);
if(msg.exec() == QMessageBox::Yes)
{
// 用户已授予权限
m_view->page()->setFeaturePermission(securityOrigin, feature, QWebEnginePage::PermissionGrantedByUser);
}
else
{
// 用户拒绝了权限
m_view->page()->setFeaturePermission(securityOrigin, feature, QWebEnginePage::PermissionDeniedByUser);
}
}
5、源代码🔔
＼やほー／＼バンザイ／
ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ
