QWebEngine支持嵌入包含WebRTC的网页

最新推荐文章于 2024-07-17 15:11:20 发布

无边风月-风之羽翼

最新推荐文章于 2024-07-17 15:11:20 发布

阅读量1.3k

点赞数

分类专栏： C++ 文章标签： webrtc

本文链接：https://blog.csdn.net/gogoytgo/article/details/128477842

版权

C++ 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

因为默认的版本不支持WebRTC下的H264，所以需要自行编译
自用记录用，所以存在部分不确定项，见谅

1 编译环境准备

相关需要的内容，大多可以在QT官网链接内下载到。
个人使用QT5.15.5，有朋友反馈5.12存在BUG，因此不推荐更旧的版本。
其他需要准备的：
Perl、win_bison、gperf
（前面2个如果有vcpkg，直接可以用vcpkg安装，比较省心）
从实测结果来看，cLang并不是必须的。(如果有人能核实再跑一遍，麻烦确认下）
推荐使用VS2019，或2022安装2019的Runtime后指定编译

2 编译

set PATH=%PATH%;F:\codes\vcpkg\downloads\tools\perl\5.32.1.1\perl\bin;F:\codes\vcpkg\downloads\tools\win_bison\2.5.2;D:\libclang\bin
configure.bat -webengine-proprietary-codecs -webengine-webrtc --opensource -confirm-license -prefix g:\qt\qt5.15.5 -nomake examples -nomake tests -no-pch -recheck-all

由于我是用的VS2022，编译刚开始时，可能会产生个莫名其妙的错误，可能和一开始没指定好Runtime有关。
表面看起来和pch有关，所以增加加-no-pch，实际的测试结果是删除了之前编译的obj后，再次编译即可正常，怀疑和开始没有指定好runtime有关，和pch可能关系不大。

3 编码

C++侧的简单示例

#include "QWebTest.h"
#include <QWebChannel>
#include <QMessageBox>

QWebTest::QWebTest(QWidget *parent)
    : QMainWindow(parent)
{
    qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "9223"); //可以用谷歌系浏览打开本地的9223端口网页进行调试
    qputenv("QTWEBENGINE_CHROMIUM_FLAGS", "--autoplay-policy=no-user-gesture-required");
    ui.setupUi(this);
    connect(ui.m_bthGo, &QPushButton::pressed, this, &QWebTest::OnGoClicked);
    connect(ui.m_webengine->page(), &QWebEnginePage::featurePermissionRequested, this, &QWebTest::OnFeatureRequested);    
    QWebChannel* pChannel = new QWebChannel(this);
    //通过注册这个webchn，达到和前端页面互通的目的。名字可随意取，相对应即可
    pChannel->registerObject("webchn", this);
    ui.m_webengine->page()->setWebChannel(pChannel);
    
	QUrl url("https://www.test.com/webrtc");
    ui.m_webengine->load(url);
}

QWebTest::~QWebTest()
{
    ui.m_webengine->page()->webChannel()->deregisterObject(this);
}

void QWebTest::OnFeatureRequested(const QUrl& securityOrigin, QWebEnginePage::Feature feature)
{
    ui.m_webengine->page()->setFeaturePermission(securityOrigin, feature, QWebEnginePage::PermissionGrantedByUser); //自动同意摄像头麦克风打开等功能
}

void QWebTest::OnWebMsg(const QString& strMsg)
{
    QMessageBox::information(NULL, "OnWebMsg", strMsg);
}

前端侧的例子

qwebchannel.js 在QT安装目录下
注意该JS不能跨QT版本混用。

<html lang="en">
<meta charset="utf-8">

<head>
    <script src="qwebchannel.js"></script>
    <script type="text/javascript">
        var bridge;
        function init() {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                var webchn = channel.objects.webchn; //和上面C++的代码里面的webchn对应
                window.bridge = webchn;
            });
        }
        function postmsg() {
           bridge.OnWebMsg("123456");
        }
    </script>
</head>

<body onload="init()">
    <button type="button" onclick="postmsg()">Click Me!</button>
</body>
</html>

3 调试通过后提取依赖项目

C:\Qt\Qt-5.15.5\bin\windeployqt.exe xxx.exe

运行以上命令即可提取出对应的依赖文件，补充上VC的runtime后即可随处使用。