本文主要讲在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的界面上显示出本机视频设备的视频。
本文转载自: https://blog.csdn.net/qq_40321622/article/details/140492630
版权归原作者 chocolate7777777 所有， 如有侵权，请联系我们删除。
版权归原作者 chocolate7777777 所有， 如有侵权，请联系我们删除。