KRPano多屏互动原理

发表于 更新于 分类于

KRPano可以实现多个屏幕之间的同步显示，主要应用到Websocket技术进行通信。

 

在控制端，我们需要发送当前KRPano场景的实时的视角和场景信息，可以使用如下的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
embedpano({
                swf: "tour.swf",
                xml: "tour.xml",
                target: "pano",
                html5: "auto",

<!-- more -->

                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.");
            };

 

在被控制端，我们需要实时接收控制端传过来的视角信息，并周期性更新当前的视角和场景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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，可以使用中间服务器进行中转，控制端和被控制端都连接至中间服务器，中间服务器负责把控制端的状态信息发送给被控制端。

 

本博文发表于：https://www.krpano.tech/archives/534

发布者：恒跃软件

转载请注明出处，谢谢!