cocoscreator webview 视频直播

cocoscreator webview 视频视频直播

具体使用请看官网教程：https://docs.cocos.com/creator/manual/zh/components/webview.html?h=webview

解决跨域

html5 head内加入下面代码

nginx 加下代码

###start####
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers X-Requested-With;
###end ###

或者

#add_header Access-Control-Allow-Origin *;
#add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
#add_header Access-Control-Allow-Headers 
#DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization;

具体参数自行百度google
顺便映射也记录下，有用可以再学习

#upstream other_html{
#    server 192.168.0.146:8888;
#}
#proxy_redirect off;
#proxy_set_header Host "192.168.0.146:8888";
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_pass http://other_html;

方法调用

app 调用 html 的全局函数数据传到html 因此再html 中加入

function onAppDataFunction(data){
    var obj = JSON.parse(data);
    var datas = obj.data;
    switch (obj.cmd) { //命令
        // 彩票信息
        case 1188002:
            // html 对数据的操作
            // html 的行为
            break;
        default :
        	break;
    }
    console.log("[==APP TO HTML5==]----->>", obj.cmd, obj.data);
};

html 向app获取数据 cmd 命令 data数据

function sendMessageToApp(cmd, data){
    var obj = {};
    obj.cmd = cmd;
    obj.data = data;
    var str = JSON.stringify(obj);
    console.log("[==HTML5 TO APP==]----->>", str);
    var messageData = 'webgame://' + encodeURI(str);
    document.location = messageData;
};

html响应形势

.on('click', '.html5_btn', function (){
    sendMessageToApp('Html_To_App_btn_event', {
        json: json,
    });
})

上面的方法只试用于native 不支持web版本
web版本试用

function sendMessageToApp(cmd, data){
    var obj = {};
    obj.cmd = cmd;
    obj.data = data;
    var str = JSON.stringify(obj);
    console.log("[==HTML5 TO APP==]----->>", str);
    var messageData = 'webgame://' + encodeURI(str);
    // document.location = messageData;
    // parent.cc.webgame(encodeURI(str));
    // 如果 webgame 是定义在 window 上，则
    parent.webgame(encodeURI(str));
};

cocoscreator 中的实现

cc.Class({
    extends: cc.Component,

    properties: {
        webnode :cc.Node,
        webview :cc.WebView,
    },
    onLoad () {
        this.webnode.x = -750;
        this.scheduleOnce(this.evaluateJs,5);
    },
    evaluateJs : function(){
        var obj = {}
        obj.cmd = "cmd"
        obj.data = "json"
        this.webview.evaluateJS(`onAppDataFunction('${JSON.stringify(obj)}')`);
    },
    start: function () {
        // 这里是与内部页面约定的关键字，请不要使用大写字符，会导致 location 无法正确识别。
        var scheme = "webgame";

        function jsCallback (target, url) {
            // 这里的返回值是内部页面的 URL 数值，需要自行解析自己需要的数据。
            var str = url.replace(scheme + '://', ''); // str === 'a=1&b=2'
            // webview target
            console.log(target,str);
            console.log(decodeURI(str));
            var obj = JSON.parse(decodeURI(str));
            if(obj.cmd){
                console.log(obj.cmd)
            }
        }
        window.webgame = function(data){
            console.log("html5toapp",data)
            console.log(decodeURI(str));
            var obj = JSON.parse(decodeURI(str));
            if(obj.cmd){
                console.log(obj.cmd)
            }
        }
        this.webview.setJavascriptInterfaceScheme(scheme);
        this.webview.setOnJSCallback(jsCallback);
    },
    onWebFinishLoad: function (sender, event) {
        if (event === cc.WebView.EventType.LOADED) {
            console.log("load over")
            this.webnode.x = 0;
        } else if (event === cc.WebView.EventType.LOADING) {
            console.log("load ing")
        } else if (event === cc.WebView.EventType.ERROR) {
            console.log("load error")
        }
    },
});

直接运行时还是会报跨域的问题，解决办法直接发布web版本将文件放入同一个目录下让其不跨域就能运行啊！