如何在QWebEnginePage中访问Media Session API并监听状态变化？

核心思路 #

借助Qt WebEngine的QWebChannel桥接机制实现JS与C的双向通信：向页面注入自定义JS代码，监听navigator.mediaSession的元数据（metadata）和播放状态（playbackState）变化，一旦有更新就通过桥接通道把数据传递到C端。

具体步骤 #

1. 定义C++数据接收类 #

创建继承自QObject的类，用于接收JS传来的媒体数据和状态更新：

#include <QObject>
#include <QVariantMap>

class MediaSessionListener : public QObject
{
    Q_OBJECT
public slots:
    // 接收媒体元数据更新
    void onMediaMetadataUpdated(const QVariantMap& metadata) {
        QString title = metadata["title"].toString();
        QString artist = metadata["artist"].toString();
        // 这里添加自定义的元数据处理逻辑
    }

    // 接收播放状态变化
    void onPlaybackStateChanged(const QString& state) {
        // state取值为"playing"、"paused"、"none"
        // 这里添加自定义的状态处理逻辑
    }
};

2. 配置QWebChannel并绑定到页面 #

在初始化QWebEngineView时，创建QWebChannel并将监听类注册到通道中：

#include <QWebEngineView>
#include <QWebChannel>

// 初始化WebView
QWebEngineView* webView = new QWebEngineView(this);
MediaSessionListener* listener = new MediaSessionListener(this);

// 创建并配置WebChannel
QWebChannel* channel = new QWebChannel(this);
channel->registerObject("mediaSessionListener", listener);
webView->page()->setWebChannel(channel);

3. 注入JS监听代码 #

在页面加载完成后，通过runJavaScript注入监听逻辑，捕获Media Session的变化：

(function() {
    // 发送当前媒体数据到C++
    function sendCurrentData() {
        const metadata = navigator.mediaSession.metadata ? {
            title: navigator.mediaSession.metadata.title,
            artist: navigator.mediaSession.metadata.artist,
            album: navigator.mediaSession.metadata.album,
            artwork: navigator.mediaSession.metadata.artwork.map(item => ({
                src: item.src,
                sizes: item.sizes,
                type: item.type
            }))
        } : {};
        
        window.mediaSessionListener.onMediaMetadataUpdated(metadata);
        window.mediaSessionListener.onPlaybackStateChanged(navigator.mediaSession.playbackState);
    }

    // 监听metadata属性变化
    Object.defineProperty(navigator.mediaSession, 'metadata', {
        set: function(newMetadata) {
            this._metadata = newMetadata;
            sendCurrentData();
        },
        get: function() {
            return this._metadata || null;
        }
    });

    // 监听playbackState属性变化
    Object.defineProperty(navigator.mediaSession, 'playbackState', {
        set: function(newState) {
            this._playbackState = newState;
            window.mediaSessionListener.onPlaybackStateChanged(newState);
        },
        get: function() {
            return this._playbackState || 'none';
        }
    });

    // 页面加载完成后发送初始数据
    sendCurrentData();
})();

提示：需在QWebEnginePage::loadFinished信号触发后执行runJavaScript注入这段代码，确保页面环境已就绪。

4. 特殊场景处理 #

• 若页面的Media Session是动态初始化的（比如YouTube播放视频后才创建），可通过定时检查或监听页面的play事件，触发初始数据的发送。
• 对于artwork这类数组数据，JS会自动序列化为QVariantList，C++端可通过metadata["artwork"].toList()解析处理。

验证方式 #

加载YouTube页面并播放视频，C++端的onMediaMetadataUpdated和onPlaybackStateChanged槽函数会收到对应的元数据和状态变化通知。

内容的提问来源于stack exchange，提问作者Dibo