WPF에서 WebView를 이용한 Browser 연동

얼마전에 CefSharp을 이용, Chrome Browser Embedding 연동에 관련된 게시글을 올린적이 있다. 연동의 장점은 

WPF, WinForm에서 기본 제공되는 WebBrowser 컨트롤은 최근에 개발된 HTML5, CSS3 등을 지원하지 않아 CefSharp을 이용하여 해결했다.

하지만 단점이 codec 문제로 MP4 format의 video play는 지원하지 않는다.

(*WebM, Ogg/Theora Video는 지원)

구글링 끝에 해결책은 Chromium Embedded Framework Forum 나와 있으며, 과정대로 따라 했지만 CEF build시 decoder.py 파일의 python
코드에서 막혀 헤메는 중이다. (*시간이 된다면 이부분도 정리해 두고 싶다.)

https://magpcss.org/ceforum/viewtopic.php?f=6&t=13515&start=40

링크는 걸어두며, 국내 누군가 꼭 해결했으면 하는 바램이다. 

우연히 대표님의 조언으로 Microsoft Edge WebView for Windows10 App의 게시글을 보고 어차피 만들고자 하는 Application이 Windows10 기반이므로, 연동 과정을 정리해 둔다. 

Microsoft Edge WebView control을 사용하면, Windows10 기반의 App(UWP 포함)에서 Web 컨텐츠를 Application에서 호스팅 할 수 있다. 

하지만 동작되는 환경이 최근 버전의 Windows10 기반에서 동작한다. 

준비사항

-Windows 10 Insider Preview Build 17110 or a later release.

-.NETFramework 4.6.2 이상

-VisualStudio 2017

STEP1

개발환경을 위해 아래 경로에서 Microsoft .NET Framework 4.6.2 Developer Pack을 먼저 설치 (설치되어 있다면 이부분은 Pass~~)

https://dotnet.microsoft.com/download/visual-studio-sdks?utm_source=getdotnetsdk&utm_medium=referral

STEP2

VisualStudio 2017에서 프로젝트 생성(동작 Framework는 반드시 4.6.2 이상으로 할것), NuGetPackageManger를 통해 WebView 콘트롤을 설치한다.

STEP3

xaml 코드에 WebView 추가 및 Navigate 구현

Ex) xaml 코드

xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"

...

<Grid x:Name="ucGrid">

<controls:WebView x:Name="wvc"/>

</Grid>

.cs 코드

wvc.Navigate(new Uri("http://www.google.co.kr"));

GoForward

wvc.GoForward();

GoBack

wvc.GoBack();

WebView 연동

실제 테스트 해보니 H.264, MP4 format의 Video 스트리밍 서비스가 정상 동작 한다. 하지만 단점이 아래와 같이 MessageBox가 표시되는 기능과 새창이 표시되는 link는 기본 동작하지 않음을 확인했다. (쉬운게 없구나..ㅡㅡ)

새창 표시 link 해결책

NewWindowRequested Event가 발생할 경우 아래 event를 등록, 처리하도록 한다.

wvc.NewWindowRequested += WebViewControl_NewWindowRequested;

...

private void WebViewControl_NewWindowRequested(object sender, Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlNewWindowRequestedEventArgs e)

{

...

}

참조

https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/webview