1. 背景
Web ページのインターフェイス対話には、Qt クライアントよりも大きな利点があります。より多様性があり、使いやすさが高いため、クライアント内でも Web ページをクライアント インターフェイスに埋め込むことを検討できます。このようにして、Web の利点をクライアントと組み合わせることができます。クライアントのインターフェイスと機能を強化するために、Qt クライアントに Web ページを埋め込むためのいくつかの一般的な実装ソリューションと手順を以下に紹介します。
2.スキーム設計の実装
1. Qt 独自のコントロールに基づいて実装
1.1 はじめに
Qt では、ブラウザの Webkit カーネルと Google のエンジンを統合した、Web ページにアクセスするためのコントロール (Qt のバージョンごとにコントロール モジュールが対応します) が提供されており、大まかに言えば、このコントロールはブラウザの簡易版です。
Qt5.0~5.4: webkitwidgets モジュール - QWebView
Qt5.4 以降: webenginewidgets モジュール - QWebEngineView
ここでは、クライアントの qt 選択は qt5.9.6 であるため、QWebEngineView が使用されます。
1.2 環境構成
Qt5.9.6 + VS2015
注: ローカル Qt に webenginenewidgets モジュールがあるかどうかを確認してください。最も簡単な方法は、任意の Qt プロジェクトを右クリックして、[Qt プロジェクト設定] -> [Qt モジュール] をクリックして、WebEngine Widgets モジュールが灰色かどうかを確認することです。灰色は、構成されていないことを意味します。このモジュールは選択できません。Qt を再インストールして、このモジュールを選択する必要があります。
1.3 開発プロセス
Qt モジュールを構成した後、ui コントロールをドラッグするか、new を直接使用することで、通常のボタンやラベルと同じように使用できます。
コード例:
レンダリングでは以下が表示されます:
1.4 概要
この時点では、単純な Web ページは正常に埋め込まれていますが、この方法で実装されたブラウザには欠点があります。ビデオをデコードして再生することができず、静的なページしか表示できないということです。Qt コンポーネントの下部に統合されているブラウザ カーネル (Chrome ブラウザのカーネル。カーネルのバージョンは Qt のバージョンによって決まります) にはデコード ライブラリがないため、ビデオの再生は実行できません。ただし、コンパイル構成を追加することで、このコントロールのソース コード実装を再コンパイルすることができます。コンパイルには、より高度なハードウェアが必要となり、時間がかかります。したがって、ビデオ再生機能が必要な場合に通常のソリューションとして使用することはお勧めできません。
2. Chrome.exeプロセスを埋め込んで実装
2.1 はじめに
この実装方法とローカルの Chrome ブラウザとの間に機能的な違いはなく、このように Qt ウィンドウに埋め込んだ場合でも、ローカル ブラウザで実装できる機能は通常通りです。実装の本質は、クライアントからブラウザ プロセスを開始し、対応する URL とその他のパラメータを渡し、Windows API を通じてウィンドウ ハンドルを取得し、埋め込みを実現するためにウィンドウ ハンドルを QWigetde に変換することです。
2.2 環境構成
Qt5.9.6 + VS2015
ローカル Chrome に依存するため、最初に Google Chrome をダウンロードしてインストールする必要があります。
2.3 開発プロセス
2.3.1 ブラウザが存在するかどうかを検出する
Google Chrome がインストールされているかどうかを確認し、インストールされていない場合は、インストールするように求めます。すでにインストールされている場合は、Qt の QProcess を使用して Chrome.exe を起動し、ブラウザ プロセスに必要なパラメータを渡します。
Chrome.exe を起動するには、まず exe のパスを取得する必要があります。Google Chrome のパスはデフォルトでインストールされますが、パスもマシンによって大きく異なります。そのため、特定のフォルダや固定パスをたどって取得することはできませんが、ここではレジストリを読み取る方法でchrome.exeのパスを取得することができます。ここで読み込むレジストリはカレントユーザー(HKEY_CURRENT_USER)ですが、実際にはchromeのレジストリがカレントユーザー配下にあるとは限りません、カレントユーザー配下にない場合は引き続きローカルマシンのレジストリを問い合わせることができます(HKEY_LOCAL_MACHINE) 自分でできるので、判定分岐を追加します。サンプルコードは次のとおりです。
2.3.2 ウィンドウハンドルの読み取りと埋め込み
ブラウザを起動したら、まず spy++ ツールを使用してウィンドウのクラス名とタイトルを取得する必要があります。spy++ を使用するには、VS を開き、メニュー バーの [ツール] をクリックし、[spy+±] をクリックし、[検索] をクリックし、[ウィンドウを検索] をクリックし、取得したいウィンドウにブルズアイをドラッグします。
次に、Windows API FindWindow(L"Chrome_WidgetWin_1", NULL); を使用して、ブラウザのウィンドウ ハンドルを取得します。ここに入力するパラメータにタイトル名を指定することはできません。タイトル名は変更される可能性があるため、クラス名を通じて取得する必要があります。タイトル 名前を変更するとウィンドウハンドルが取得できなくなります。
ハンドルを正常に取得したら、ハンドルを QWindow *pWin = QWindow::fromWinId(wid); に変換します。
最後に、ウィンドウ コンテナを作成します: QWidget *pWid = QWidget::createWindowContainer(pWin, this); 返された pWid には値を入力できます。レイアウトを通じて Qt の対応するインターフェイスに移動します。
完全なコードは次のとおりです。
startDetached でブラウザを起動した後、メインスレッドは 3 秒間スリープする必要があります。この操作は省略できません。スリープ操作を行わないと、埋め込みに失敗する可能性があります。
ここでの chrome.exe のプロセス パラメータ: -chrome-frame は起動に必要なパラメータ、-kiosk パラメータはタイトル バーを表示せずに起動するためのパラメータです。その他の起動パラメータについては、次のドキュメントを参照してください:
https://www.cnblogs.com/yikemogutou/p/12624113.html
2.4 概要
この方法では完全な機能を実現できますが、制御できない欠陥もあります。これはパラメータを使用して起動された Chrome ブラウザです。これは起動時に全画面表示になり、タイトル バーが表示されないように設定されています。その後、クライアントを開いてからブラウザを開くと、開いたブラウザは依然として全画面表示になり、タイトル バーが表示されません。ユーザーが最初にブラウザを起動し、次にクライアントを起動する場合。この場合、クライアントのプロセス パラメータは有効にならず、埋め込まれた Web ページにタイトル バーとアドレスが表示されます。これは明らかに不合理です。
3. Chrome ベースの CEF3 実装
3.1 はじめに
CEF (Chromium Embedded Framework の正式名) は、Google Chromium をベースにしたオープンソース プロジェクトです。Google Chromium プロジェクトは主に Google Chrome アプリケーション用に開発されていますが、CEF の目標はサードパーティ アプリケーションに埋め込み可能なブラウザのサポートを提供することです。CEF の機能は、クライアント側に Web インターフェイスを埋め込むことです。
CEF 自体はビデオ再生をサポートしていません。サポートする必要がある場合は、Chrome ソース コードを再コンパイルする必要があります。コンパイル操作については、CEF の公式ドキュメントを参照してください:
https://wiki.hikvision.com.cn/pages/ viewpage.action? pageId=168565259
コンパイルには CEF および chromium ソース コードのダウンロードが必要なため、安定した外部ネットワーク環境が必要です。ここにはそれがありません。そこで、インターネット上で、より期待に沿った、直接使用できるコンパイル済みバージョンを見つけました。
3.2 環境構成
Qt5.9.6 + VS2015
3.3 開発プロセス
3.3.1. cef プロジェクト設定のコンパイル
cef パッケージをダウンロードすると、公式 Web サイトのデモが含まれていることがわかります。ここでは、このサンプル ドキュメントを参照して独自のプロジェクトを構築します。
最初のステップでは、空のプロジェクトを作成し、そのプロジェクトの下に次の 5 つのソース ファイルとリソース ファイルを追加し、main.cpp を追加します。ここで、サフィックス cpp を持つ例外を開き、それを _cpp に変更します。後で自分で調整できます。 。
2 番目のステップは、インクルード ディレクトリへのパスと静的ライブラリへのインクルード パスを追加することです。ここでは次の 3 つの静的ライブラリ ファイルが使用されます。静的ライブラリ ファイルは CEF パッケージに含まれています。ライブラリ ファイルはデバッグ用にコンパイルされるため、プロジェクトもそれに応じてデバッグ モードで構成する必要があります。
ステップ 3: プロジェクト作成後のランタイム ライブラリはデフォルトで MDD になっていますが、スタティック ライブラリ ファイルのランタイム ライブラリは MTD であるため、プロジェクトのランタイム ライブラリを同期的に MTD に変更する必要があります。
4 番目の手順では、CefFrame.manifest ファイルを main.cpp と同じディレクトリに追加し、プロジェクト プロパティのマニフェスト入力にファイル パスを追加する必要があります。
この時点で、cef プロジェクト ファイルをコンパイルできます。次のステップでは、必要に応じて対応する修正を加えます。
3.3.2. 実装プロセスの説明
ここで私が今でも使用しているのは、cef プロセスを開始し、起動時にプロセス パラメータ (つまり、アクセス対象の URL) を渡し、その後プロセス間でパラメータを渡して、この目的のために Web ページにアクセスすることです。最後に、cef プロセスがクライアントに埋め込まれます。ここでの埋め込みスキームは以前とは少し異なります。ウィンドウ ハンドルを取得するために spy++ ツールと Windows API を依然として使用する場合、それは実現不可能であり、結果は常に空になります。そこで、ここではプロセス間通信（共有メモリ）を利用してウィンドウハンドルを転送します（cefのウィンドウハンドルは独自に取得可能）。
ここでは、クライアントが cef を開始した後、cef プロセスがウィンドウ ハンドル データを共有メモリに書き込んだことを確認するための適切な遅延を示します (もちろん、ハンドル値が読み取られてループ本体が終了するまで、これはより適切な while ループに置き換えることができます)。 、最適化項目と見なすことができます)、最後にハンドルを QWindow に変換します *pWin = QWindow::fromWinId(wid); 最後に、
ウィンドウ コンテナを作成します: QWidget *pWid = QWidget::createWindowContainer(pWin, this); これ返された pWid は、レイアウトを通じて Qt の対応するインターフェイスに入力できます。いくつかのコード例は次のとおりです。
ハンドルは共有メモリに書き込まれます。
共有メモリからハンドルを読み取ります。
3.4 概要
会社のイントラネットの制限により、このソリューションはコンパイル用の chromium と cef のソース コードを直接ダウンロードできません。mp4 形式をサポートするコンパイルされたライブラリ ファイルをオンラインでのみ見つけることができます。ここでの cef ライブラリ ファイルに対応する chromium のバージョンは次のとおりです。低い場合は、デコード部分に制限があり、実際のユーザーの要件を満たすことができません。
4. MicrosoftのWebView2をベースにした実装
4.1 はじめに
Microsoft Edge WebView2 コントロールを使用すると、Web テクノロジ (HTML、CSS、および JavaScript) をネイティブ アプリケーションに埋め込むことができます。WebView2 コントロールは、ネイティブ アプリケーションで Web コンテンツを表示するためのレンダリング エンジンとして Microsoft Edge を使用します。WebView2 を使用すると、Web コードをネイティブ アプリケーションのさまざまな部分に埋め込んだり、すべてのネイティブ アプリケーションを単一の WebView インスタンス内に構築したりできます。
4.2 環境構成
Qt5.9.6 + VS2015
オペレーティング環境では、WebView2 の実行パッケージをインストールする必要があります: MicrosoftEdgeWebView2RuntimeInstallerX64.exe は
Microsoft 公式からダウンロードできます: https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/
4.3 開発プロセス
私たちの目的は Web ページを Qt に埋め込むことですが、現時点では webview2 を Qt クライアントに直接埋め込む方法がないため、プロセス全体を埋め込むためにプロセスのウィンドウ ハンドルを読み取る方法を依然として使用しています。そこで、ここではwebview2のwin32サンプルプログラムを例に開発を説明します。
4.3.1. WebView2プロジェクトの構成
まず、公式 Web サイトにアクセスして、webview2 に対応する win32 サンプル ドキュメント [Win32_GettingStarted] をダウンロードし、vs2015 で開き、WebView2GettingStarted プロジェクトを右クリックし、[構成プロパティ] > [全般] を選択して、対応するターゲット プラットフォームのバージョン [WindowsSDK] を確認します
。プラットフォームツールセットは正しいです。
ここでのプラットフォームのバージョンは 10.0 以降である必要があり、それ以外の場合はコンパイル時に次のエラーが報告されます。10.0 以降でない場合は、Windows 公式 Web サイトから新しい SDK をダウンロードできます。
4.3.2. Windows 実装ライブラリ (WIL) のインストール
SDK を構成した後、対応する Windows 実装ライブラリ (WIL) を構成する必要があります。ここでは、ソリューション エクスプローラーで、WebView2GettingStarted プロジェクト ノードを右クリックし、[NuGet パッケージの管理] を選択します。NuGet ウィンドウで、[参照] をクリックします。左上隅の検索バーに「Microsoft.Windows.ImplementationLibrary」と入力し、このパッケージのインストールを選択します。
4.3.3. WebView2 SDKのインストール
この手順では、webview2 の SDK を構成する必要があります。ソリューション エクスプローラーで、WebView2GettingStarted プロジェクト ノードを右クリックし、[NuGet パッケージの管理] を選択します。NuGet ウィンドウで、左上隅の検索バーの [参照] タブをクリックします。 、「Microsoft.Web.WebView2」と入力し、このパッケージのインストールを選択します。
4.3.4. 実装プロセスの説明
ここで使用されるのは、クライアント プロセスで exe を起動することです。起動が成功した後、クライアントに埋め込まれたロジックを実装するために spy++ を通じてウィンドウ ハンドルが検出されます。したがって、最後にアクセスされた URL は依然としてクライアントからクライアントに渡されます。 main 関数を通じて webview2 の exe を実行すると、webview プロセスは URL を取得した後、目的の Web ページにアクセスします。ここで注意する必要がある小さな詳細があります。元のコードはダブル ラムダ式として実装されているため、変数を直接渡すことはできません。この変数は次のようにキャプチャ リストに追加する必要があります。
この時点でプロセス全体を実装できますが、現時点では Web ビュー インターフェイスにタイトル バーとボタンがありますが、これは必要ありません。そのため、最後のステップでタイトル バーとボタンを非表示にする必要があります。ボーダレスなインターフェース、それだけです。関連するコードは次のとおりです。
4.4 概要
この時点で、WebView2 コントロールに基づく単純なプログラムが正常に実装されました。WebView は他の実装方法よりも単純で、機能とユーザー エクスペリエンスが優れていますが、この実装方法には根本的な欠点もあります。 Windows ベースの SDK はローカライズできません。したがって、この解決策は、局所化を考慮せずに最適な解決策として採用することができます。
3. まとめ
Qt クライアントに Web ページを埋め込むための上記 4 つのソリューションの紹介を通じて、Web ページのみを表示する必要があり、ビデオの再生とは関係がない場合、最初のソリューションが最初の選択肢となることが大まかに理解できます。再生が必要です。十分な外部ネットワークおよびハードウェア リソースがある場合、ビデオを再生する必要があるが上記のリソースがない場合、3 番目のオプションは、必要に応じて CEF および クロム ソース コードを再プログラムすることです。オプションの WebView ソリューションを実装できます。chrome.exe 埋め込みの導入計画については、総合的に見て実際のユーザーの利用シーンに対応できておらず、制御不能な要素が多いため、ネガティブケースとしてまとめさせていただきました。