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 文件夹.
这里面作个介绍:
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.
- public class ChromiumWebBrowser : Control, IWebBrowserInternal, IWinFormsWebBrowser
- {
- ...
- }
再加一个自定义控件 BrowserUserControl. 自定义一个构造函数.
- public BrowserUserControl(string url)
- {
- InitializeComponent();
- var browser = new ChromiumWebBrowser(url)
- {
- Dock = DockStyle.Fill
- };
- this.Controls.Add(browser);
- }
建立一个 Form1 启动窗口, 添加创建的用户控件.
- public Form1()
- {
- InitializeComponent();
- var browser = new BrowserUserControl(CefExample.DefaultUrl)
- {
- Dock = DockStyle.Fill,
- };
- browser.CreateControl();
- this.Controls.Add(browser);
- }
再来看一下 Program.cs 中的 main 方法入口, CefExample 调用了一个 Init 初始化方法.
- /// <summary>
- /// The main entry point for the application.
- /// </summary>
- [STAThread]
- static void Main()
- {
- CefExample.Init();
- Application.EnableVisualStyles();
- Application.SetCompatibleTextRenderingDefault(false);
- Application.Run(new Form1());
- }
在 CefSharp.Example 工程中, defaulturl 就是默认首页 url 地址.
- public static class CefExample
- {
- public const string DefaultUrl = "http://www.google.com/";
- private static readonly bool DebuggingSubProcess = Debugger.IsAttached;
- public static void Init()
- {
- var settings = new CefSettings();
- settings.RemoteDebuggingPort = 8088;
- settings.CefCommandLineArgs.Add("enable-media-stream", "enable-media-stream");
- settings.IgnoreCertificateErrors = true;
- settings.LogSeverity = LogSeverity.Verbose;
- if(DebuggingSubProcess)
- {
- //var architecture = Environment.Is64BitProcess ? "x64" : "x86";
- //settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
- }
- settings.RegisterScheme(new CefCustomScheme
- {
- SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
- SchemeHandlerFactory = new CefSharpSchemeHandlerFactory()
- });
- if (!Cef.Initialize(settings))
- {
- if (Environment.GetCommandLineArgs().Contains("--type=renderer"))
- {
- Environment.Exit(0);
- }
- else
- {
- return;
- }
- }
- }
- }
我们放一个 release 版本, 里面大概有这些文件. locales 里面放的本地化资源包, 包括 cef_100_percent/cef_200_percent, 如果删掉, 会出现诸如窗口滚动条外观异常等, degug.log 会记录操作记录.
运行一下打开一个网页.
我们再写一个 html 页面.
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
- <title></title>
- </head>
- <body>
- <video autoplay></video>
- <script>
- 'use strict';
- var video = document.querySelector('video');
- var constraints = {
- audio: false,
- video: true
- };
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia;
- function successCallback(stream) {
- window.stream = stream;
- if (window.URL) {
- video.src = window.URL.createObjectURL(stream);
- } else {
- video.src = stream;
- }
- }
- function errorCallback(error) {
- console.log('navigator.getUserMedia error:', error);
- }
- navigator.getUserMedia(constraints, successCallback, errorCallback);
- </script>
- </body>
- </html>
修改 CefExample 的 defaulturl 指向这个页面.
有一点要注意, 在 CefCommandLineArgs 添加了 enable-media-stream 参数, 意思是开启 chrome 的媒体流. 看下效果.
这里我们基于 chromium 内核使用到了 html5 webrtc 技术, 页面开启了摄像头.
这里只是粗略的列了个小 demo, 还有比如一些基本的鼠标事件, 页面重定向等功能, 除此之外 chromium 很有功能 api 值得学习和挖掘.
来源: http://www.cnblogs.com/yuefei/p/4123597.html