KRPano多屏互动原理
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了KRPano多屏互动原理相关的知识,希望对你有一定的参考价值。
KRPano可以实现多个屏幕之间的同步显示,主要应用到Websocket技术进行通信。
在控制端,我们需要发送当前KRPano场景的实时的视角和场景信息,可以使用如下的代码:
embedpano({ swf: "tour.swf", xml: "tour.xml", target: "pano", html5: "auto", mobilescale: 1.0, passQueryParameters: true, onready: krpanoReady }); function krpanoReady(krpano) { krpano.call("trace(krpano is ready...)"); krpano.call("loadscene(scene_04, null, MERGE);") initialWebSocket(); } //实时发送KRPano的视角信息 function IntervalSendMessage() { var krpano = document.getElementById("krpanoSWFObject"); if (krpano && krpano.get) { var hlookat = krpano.get("view.hlookat"); var vlookat = krpano.get("view.vlookat"); var fov = krpano.get("view.fov"); var scene = krpano.get("xml.scene"); var krObj = { hlookat: hlookat, vlookat: vlookat, fov: fov, scene: scene } ws.send(JSON.stringify(krObj)); } } var ws; var WebSocketsExist; function initialWebSocket() { WebSocketsExist = true; try { ws = new WebSocket("ws://localhost:8989/"); } catch (ex) { try { ws = new MozWebSocket("ws://localhost:8989/"); } catch (ex) { WebSocketsExist = false; } } if (WebSocketsExist) { console.log("The current browser support websocket!"); } else { console.log("The current browser not support websocket!") return; } ws.onopen = WSonOpen; ws.onmessage = WSonMessage; ws.onclose = WSonClose; ws.onerror = WSonError; } function WSonOpen() { console.log("websocket opened success!"); setInterval(IntervalSendMessage, 50); }; function WSonMessage(event) { console.log(event.data); }; function WSonClose() { console.log("Websocket closed."); }; function WSonError() { console.log("Websocket error occur."); };
在被控制端,我们需要实时接收控制端传过来的视角信息,并周期性更新当前的视角和场景。
embedpano({ swf: "tour.swf", xml: "tour.xml", target: "pano", html5: "auto", mobilescale: 1.0, passQueryParameters: true }); const WebSocket = require(‘ws‘); const wss = new WebSocket.Server({ port: 8989 }); wss.on(‘connection‘, function connection(ws) { ws.on(‘message‘, function incoming(message) { console.log(‘received: %s‘, message); krObj = JSON.parse(message); var hlookat = krObj.hlookat; var vlookat = krObj.vlookat; var fov = krObj.fov; var scene = krObj.scene; var krpano = document.getElementById("krpanoSWFObject"); if (krpano && krpano.set) { krpano.call("loadscene(get(" + "scene_04" + "), null, MERGE);") krpano.set("view.hlookat", hlookat); krpano.set("view.vlookat", vlookat); krpano.set("view.fov", fov); if (krpano.get("xml.scene") !== scene) { //loadscene(get(startscene), null, MERGE); krpano.call("loadscene(" + scene + ", null, MERGE);") } } }); ws.send(‘something‘); });
如果被控制端(如网页)无法直接创建WebSocket.Server,可以使用中间服务器进行中转,控制端和被控制端都连接至中间服务器,中间服务器负责把控制端的状态信息发送给被控制端。
本博文发表于:http://www.krpano.tech/archives/534
发布者:屠龙
转载请注明出处,谢谢!
以上是关于KRPano多屏互动原理的主要内容,如果未能解决你的问题,请参考以下文章