CEF 自定义用户协议(scheme)实现以二进制流的方式显示图片、视频、音频

在谷歌浏览器中点击设置，地址栏里出现的不是普通网址，而是chrome://settings/，这个地址就是谷歌浏览器的自定义scheme，cef也提供了自定义协议手段。

scheme就是一种协议，比如http://helloworld.com中的http就是scheme，不过它是内置的。client://helloworld.com中的client就是一个自定义scheme。

当javascript通过XMLHttpRequest请求地址client://helloworld.com时，我们c++中实现的处理器，就会收到这个请求。

XMLHttpRequest可以通过post方法将二进制数据如arraybuffer发送到browser进程。
1.当javascript需要传递大量二进制数据给browser进程的c++代码时，可以使用POST方法，
2.当javascript需要从browser进程的c++代码拿到大量二进制数据时，可以使用GET方法。

1.CEF注册custom scheme 来接受http请求

在cef中我们可以通过以下接口来注册scheme

bool CefRegisterSchemeHandlerFactory(
    const CefString& scheme_name,
    const CefString& domain_name,
    CefRefPtr<CefSchemeHandlerFactory> factory);

注册一个自定义http scheme

CefRegisterSchemeHandlerFactory("http", "test", new MySchemeHandlerFactory());

这个scheme限定了，scheme为"http"，domain为"test"，只有当请求为"http://test/"开头时，才会执行自定义c++代码。

处理器工厂为MySchemeHandlerFactory，是我们自己实现的处理请求的c++代码。

继承一个工厂类MySchemeHandlerFactory : public CefSchemeHandlerFactory

需要包含#include "include/cef_scheme.h"

.h文件

#ifndef _MYSCHEMEHANDLERFACTORY_H_
#define _MYSCHEMEHANDLERFACTORY_H_
#include "includecef_scheme.h"


class MySchemeHandlerFactory : public CefSchemeHandlerFactory
{
public:
    virtual CefRefPtr<CefResourceHandler> Create(CefRefPtr<CefBrowser> browser,
        CefRefPtr<CefFrame> frame,
        const CefString& scheme_name,
        CefRefPtr<CefRequest> request)
        OVERRIDE;// Return a new resource handler instance to handle the request.
        
    
private:
    IMPLEMENT_REFCOUNTING(MySchemeHandlerFactory);
};



#endif //_MYSCHEMEHANDLERFACTORY_H_

.cpp文件

#include "MySchemeHandlerFactory.h"
#include "MyResourceHandler.h"
#include "include/cef_parser.h"
#include "include/wrapper/cef_helpers.h"
#include "include/wrapper/cef_stream_resource_handler.h"
#include <shlwapi.h> 
#pragma comment(lib, "shlwapi.lib")

CefRefPtr<CefResourceHandler> MySchemeHandlerFactory::Create(CefRefPtr<CefBrowser> browser, 
    CefRefPtr<CefFrame> frame, 
    const CefString& scheme_name, 
    CefRefPtr<CefRequest> request)
{
    CEF_REQUIRE_IO_THREAD();

    CefString url = request->GetURL();
    cef_uri_unescape_rule_t unescape_rule = UU_SPACES;//处理路径中有空格
    CefString& decoded_value = CefURIDecode(url, true, unescape_rule);

    CefURLParts urlParts;
    if (CefParseURL(url, urlParts))
    {
        std::wstring filePath = CefURIDecode(CefString(&urlParts.query),true,unescape_rule);//处理有中文路径
        CefRefPtr<CefStreamReader> fileStream = CefStreamReader::CreateForFile(CefString(filePath));

        if (fileStream != nullptr)
        {
            // "ext" 获取扩展名 例如："txt"、"jpg"
            std::wstring ext;
            ext = PathFindExtension(filePath.c_str());
            ext =ext.substr(1, ext.length());
            CefString mimeType(CefGetMimeType(ext));
            //todo: Complete known mime times with web-font extensions
            if (mimeType.empty())
            {
                //mimeType = "font/" + fileExtension;
            }

            return CefRefPtr<CefStreamResourceHandler>(new CefStreamResourceHandler(mimeType, fileStream));//以二进制流的方式把文件返给js并显示到html标签中
        }
    }

    return new MyResourceHandler();
}

2.继承一个资源类class MyResourceHandler : public CefResourceHandler

ProcessRequest 处理请求，允许请求返回true；取消请求返回false。当需要返回的数据就绪后（自行请求网络或者文件就绪）或立即调用callback.Continue()，通知cef进入下一步：GetResponseHeaders。

GetResponseHeaders 设置响应头，在这里可以设置mime-type，响应长度，其它头等。不确定长度设置响应长度为-1。

ReadResponse 设置响应结果。可以设置响应具体内容，设置已读取长度。cef调用完上一步后会继续调用此方法。根据响应长度和数据就绪情况，调用此方法的次数和策略不同。

当响应长度为-1时，cef无法根据已读长度确定是否已读取完毕，必需根据返回值false来结束读取。

当响应长度大于0时，cef根据每次调用得到的已读长度，或返回值false来结束读取。

如果数据未就绪，可以设置读取长度为0 ，返回true，并在稍后调用callbak.Continue()通知cef调用此方法读取响应内容。

注意：

当响应长度为-1时，必需保证此方法至少执行两次，第一次返回true表示数据全部就绪，第二次返回false表示读取结束。

当响应长度大于0时，设置内容和已读长度，返回true。则此方法只执行一次。

若实际返回的响应内容，长度大于之前设置的响应总长度，则返回内容将被截取。

#ifndef _MYRESOURCEHANDLER_H_
#define _MYRESOURCEHANDLER_H_
#include <fstream>
#include <stdio.h>
#include "includecef_resource_handler.h"

class MyResourceHandler : public CefResourceHandler
{
public:
    MyResourceHandler();

    virtual bool ProcessRequest(CefRefPtr<CefRequest> request,
        CefRefPtr<CefCallback> callback)OVERRIDE;

    virtual void GetResponseHeaders(CefRefPtr<CefResponse> response,
        int64& response_length,
        CefString& redirectUrl) OVERRIDE;

    virtual void Cancel() OVERRIDE{
        // Cancel the response...
    }

    virtual bool ReadResponse(void* data_out,
        int bytes_to_read,
        int& bytes_read,
        CefRefPtr<CefCallback> callback)
        OVERRIDE;

    virtual bool CanGetCookie(const CefCookie& cookie);
    

    virtual bool CanSetCookie(const CefCookie& cookie);
    
private:
    std::string data_;
    IMPLEMENT_REFCOUNTING(MyResourceHandler);
};
#endif//_MYRESOURCEHANDLER_H_

.cpp文件

#include "MyResourceHandler.h"

MyResourceHandler::MyResourceHandler()
{

}


bool MyResourceHandler::ProcessRequest(CefRefPtr<CefRequest> request,
    CefRefPtr<CefCallback> callback)
    {
    std::string url = request->GetURL();
    
    data_ = "hello cef";//返回到页面中的内容
    callback->Continue();//这个一定要有
    return true;//
}

void MyResourceHandler::GetResponseHeaders(CefRefPtr<CefResponse> response,
    int64& response_length,
    CefString& redirectUrl) {

    response->SetMimeType("text/plain");
    response->SetStatus(200);
    response_length = data_.length();
}


bool MyResourceHandler::ReadResponse(void* data_out,
    int bytes_to_read,
    int& bytes_read,
    CefRefPtr<CefCallback> callback)
    {
    int size = static_cast<int>(data_.length());
    memcpy(data_out, data_.c_str(), size);
    bytes_read = size;
    return true;
}

bool MyResourceHandler::CanGetCookie(const CefCookie& cookie)
{
    return false;
}

bool MyResourceHandler::CanSetCookie(const CefCookie& cookie)
{
    return false;
}

3.在初始化cef那几行代码后面增加一句

CefRegisterSchemeHandlerFactory("http", "test", new MySchemeHandlerFactory());

CefSettings cSettings;
    const char* loc = "zh-CN";

    cSettings.no_sandbox = true;
    cSettings.multi_threaded_message_loop = true;
    //cSettings.single_process = false;
    cSettings.log_severity = LOGSEVERITY_DISABLE;//设置日志级别，解决安装启动佰卓数安后桌面出现一个debug.log文件(调试阶段可以去掉)
    CefString(&cSettings.locale).FromASCII(loc);
    cef_string_from_ascii(loc, strlen(loc), &cSettings.locale);

    // Execute the secondary process, if any.
    CefInitialize(main_args, cSettings, spApp.get(), sandbox_info);
    /***************************************结束初始化cef*******************************************/
    //自定义scheme    
    CefRegisterSchemeHandlerFactory("http", "test", new MySchemeHandlerFactory());

4.CEF浏览器加载的静态html

 <html>
<script>
function do_post()
{
   //alert('posting');
   var xhr  = new XMLHttpRequest();
   var zurl = "http://test?C:\Users\Administrator\Desktop\梅西.jpg";
   xhr.open("GET", zurl, true);
   xhr.responseType = 'blob';
   xhr.onload = function()
   {
    //console.log(this);
    if (this.status == 200) 
    {
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src); 
        };
        //alert(blob);
        img.src = window.URL.createObjectURL(blob);
        document.body.appendChild(img); 
    }
   }
   xhr.send();
   //alert('posted');
}

function do_video()
{
   //alert('posting');
   var xhr  = new XMLHttpRequest();
   var zurl = "http://test?C:\Users\Administrator\Desktop\稻香.mp4";
   xhr.open("GET", zurl, true);
   xhr.responseType = 'blob';
   xhr.onload = function()
   {
    //console.log(this);
    if (this.status == 200) 
    {
        var blob = this.response;
        var video = document.querySelector("video");
        //alert(window.URL.createObjectURL(blob));
        video.src = window.URL.createObjectURL(blob);
  
    }
   }
   xhr.send();
   //alert('posted');
}

function do_audio()
{
   //alert('posting');
   var xhr  = new XMLHttpRequest();
   var zurl = "http://test?C:\Users\Administrator\Desktop\千年等一回.mp3";
   xhr.open("GET", zurl, true);
   xhr.responseType = 'blob';
   xhr.onload = function()
   {
    //console.log(this);
    if (this.status == 200) 
    {
        var blob = this.response;
        var audio = document.querySelector("audio");
        //alert(window.URL.createObjectURL(blob));
        audio.src = window.URL.createObjectURL(blob);
  
    }
   }
   xhr.send();
   //alert('posted');
}

</script>
<body onLoad="">
<div>
<!-- <img src="图片路径、地址" alt="" /> -->
<input type="button" value="加载图片" onclick="do_post()">
<input type="button" value="加载视频" onclick="do_video();">
<input type="button" value="加载音频" onclick="do_audio();">
</div>
<video controls="true" ></video> 
<audio controls="true" ></audio>
<p>Hello everyone!
</p>
</body>
</html>