QT嵌入支持WEBRTC的网页

本文主要讲在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的界面上显示出本机视频设备的视频。

标签： qt webrtc c++

本文转载自: https://blog.csdn.net/qq_40321622/article/details/140492630
版权归原作者 chocolate7777777 所有，如有侵权，请联系我们删除。

QT嵌入支持WEBRTC的网页

发表评论

“QT嵌入支持WEBRTC的网页”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航