Qt-Web混合开发-使用QWebEnginePage打开摄像头演示权限管理🏳️‍🌈

文章目录

Qt-Web混合开发-使用QWebEnginePage打开摄像头演示权限管理🏳️‍🌈
- 1、概述🚩
- 2、实现效果🥽
- 3、实现功能🔊
- 4、关键代码🚚
- 5、源代码🔔

更多精彩内容
👉个人内容分类汇总 👈
👉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);
    }
}