構建基於Chromium的應用程序NET

chromium是google chrome瀏覽器所採用的內核,最開始由蘋果的webkit發展而出,由於webkit在發展上存在分歧,而google希望在開發上有更大的自由 度,2013年google決定自己開發webcore的分支,叫做Blink引擎,而後google以BSD伯克利許可開源,BSD許可限制較爲寬鬆, 很多瀏覽器都是基於chromium開發的,比如,此後省略100字。google在原有基礎上做了進一步的精簡優化,並開發出v8 javascript引擎,2010年google收購了webrtc技術隨後開放了源代碼,webrtc採用vp編碼,兼容html5標準,同年 google推出了chrome os雲操作系統,瀏覽器的衍生產品。

廢話不多說,檢索一下Chromium Embedded Framework,簡稱cef,你可以在cefbuilds上看到當前chromium最新放出的版本,也可以在google code上下載到,裏面包括瀏覽器的核心庫和底層api,支持c和c++的編程語言,另外也有第三方的包括.net/mono、java、python、 delphi等開源項目。

我們從google code下載win32的c++庫,打開release文件夾。

1

這裏面作個介紹:

libcef.dll:cef核心庫。

icudt.dll:編碼格式庫。

ffmpegsumo.dll:視頻解碼器,包含vp8 vp9編碼庫。

d3dcompiler_43.dll、d3dcompiler_46.dll、libEGL.dll、libGLESv2.dll

這幾個是3d圖形的庫,d3dcompiler_43.dll適用於xp,d3dcompiler_46適用於xp以上版本。

include文件夾裏面是cef c++的頭文件,可以去github下載.net調用的project,叫做cefsharp,提供了winform和wpf的完整demo。

2

CefSharp:封裝是C#調用api的入口和數據接受類。

CefSharp.BrowserSubprocess:是.net寫的一個伴隨進程,主要負責處理javascript和後臺線程。

CefSharp.BrowserSubprocess.Core:是一個c++的工程,需要引用到cef的c++頭文件,主要是javascript相關操作。

CefSharp.Core:也是一個c++工程,包括cef的初始化配置、接受事件等。

CefSharp.Example:c#調用cef的初始化配置。

CefSharp.WinForm.Example:寫了一個自定義控件,作爲cef瀏覽器的窗口。

ChromimumWebBrowser.cs所有接口的實現可以放在這裏面,詳見cefsharp demo。

1 public class ChromiumWebBrowser : Control, IWebBrowserInternal, IWinFormsWebBrowser
2 {
3     ...
4 }

再加一個自定義控件BrowserUserControl。自定義一個構造函數。

 1 public BrowserUserControl(string url)
 2 {
 3     InitializeComponent();
 4 
 5     var browser = new ChromiumWebBrowser(url)
 6     {
 7         Dock = DockStyle.Fill
 8     };
 9     this.Controls.Add(browser);
10 }

 建立一個Form1啓動窗口,添加創建的用戶控件。

 1 public Form1()
 2 {
 3     InitializeComponent();
 4 
 5     var browser = new BrowserUserControl(CefExample.DefaultUrl)
 6     {
 7         Dock = DockStyle.Fill,
 8     };
 9     browser.CreateControl();
10     this.Controls.Add(browser);
11 }

再來看一下Program.cs中的main方法入口,CefExample調用了一個Init初始化方法。

 1 /// <summary>
 2 /// The main entry point for the application.
 3 /// </summary>
 4 [STAThread]
 5 static void Main()
 6 {
 7     CefExample.Init();
 8 
 9     Application.EnableVisualStyles();
10     Application.SetCompatibleTextRenderingDefault(false);
11     Application.Run(new Form1());
12 }

 

在CefSharp.Example工程中,defaulturl就是默認首頁url地址。

 1 public static class CefExample
 2 {
 3     public const string DefaultUrl = "http://www.google.com/";
 4     private static readonly bool DebuggingSubProcess = Debugger.IsAttached;
 5 
 6     public static void Init()
 7     {
 8         var settings = new CefSettings();
 9         settings.RemoteDebuggingPort = 8088;
10         settings.CefCommandLineArgs.Add("enable-media-stream", "enable-media-stream");
11         settings.IgnoreCertificateErrors = true;
12         settings.LogSeverity = LogSeverity.Verbose;
13 
14         if(DebuggingSubProcess)
15         {
16             //var architecture = Environment.Is64BitProcess ? "x64" : "x86";
17             //settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
18         }
19 
20         settings.RegisterScheme(new CefCustomScheme
21         {
22             SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
23             SchemeHandlerFactory = new CefSharpSchemeHandlerFactory()
24         });
25 
26         if (!Cef.Initialize(settings))
27         {
28             if (Environment.GetCommandLineArgs().Contains("--type=renderer"))
29             {
30                 Environment.Exit(0);
31             }
32             else
33             {
34                 return;
35             }
36         }
37     }
38 }

我們放一個release版本,裏面大概有這些文件。locales裏面放的本地化資源包,包括cef_100_percent/cef_200_percent,如果刪掉,會出現諸如窗口滾動條外觀異常等,degug.log會記錄操作記錄。

11

運行一下打開一個網頁。

5

我們再寫一個html頁面。

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
 7     <title></title>
 8 </head>
 9 <body>
10     <video autoplay></video>
11     <script>
12         'use strict';
13 
14         var video = document.querySelector('video');
15         var constraints = {
16             audio: false,
17             video: true
18         };
19 
20         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
21           navigator.mozGetUserMedia;
22 
23         function successCallback(stream) {
24             window.stream = stream; 
25             if (window.URL) {
26                 video.src = window.URL.createObjectURL(stream);
27             } else {
28                 video.src = stream;
29             }
30         }
31 
32         function errorCallback(error) {
33             console.log('navigator.getUserMedia error: ', error);
34         }
35 
36         navigator.getUserMedia(constraints, successCallback, errorCallback);
37     </script>
38 </body>
39 </html>

 

修改CefExample的defaulturl指向這個頁面。

有一點要注意,在CefCommandLineArgs添加了enable-media-stream參數,意思是開啓chrome的媒體流。看下效果。

 

這裏我們基於chromium內核使用到了html5 webrtc技術,頁面開啓了攝像頭。

這裏只是粗略的列了個小demo,還有比如一些基本的鼠標事件、頁面重定向等功能,除此之外chromium很有功能api值得學習和挖掘。

 

libcef.dll:cef核心庫。

icudt.dll:編碼格式庫。

ffmpegsumo.dll:視頻解碼器,包含vp8 vp9編碼庫。

d3dcompiler_43.dll、d3dcompiler_46.dll、libEGL.dll、libGLESv2.dll

這幾個是3d圖形的庫,d3dcompiler_43.dll適用於xp,d3dcompiler_46適用於xp以上版本。

include文件夾裏面是cef c++的頭文件,可以去github下載.net調用的project,叫做cefsharp,提供了winform和wpf的完整demo。
CefSharp:封裝是C#調用api的入口和數據接受類。

CefSharp.BrowserSubprocess:是.net寫的一個伴隨進程,主要負責處理javascript和後臺線程。

CefSharp.BrowserSubprocess.Core:是一個c++的工程,需要引用到cef的c++頭文件,主要是javascript相關操作。

CefSharp.Core:也是一個c++工程,包括cef的初始化配置、接受事件等。

CefSharp.Example:c#調用cef的初始化配置。

CefSharp.WinForm.Example:寫了一個自定義控件,作爲cef瀏覽器的窗口。

ChromimumWebBrowser.cs所有接口的實現可以放在這裏面,詳見cefsharp demo。

http://www.cnblogs.com/yuefei/p/4123597.html
1.創建項目
2.修改屬性 目標平臺X64
3.生成
3.複製文件到x64文件下
3.添加3個引用。生成
5.添加 xmln 命名空間
6.添加控件,生成

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章