-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
149 lines (131 loc) · 5.63 KB
/
index.html
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<title>Tencent Cloud - Real-Time Cloud Rendering - CAR - demo</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'SimHei', 'Microsoft YaHei', 'Arial', 'sans-serif';
}
#demo-container {
width: 100%;
height: 100%;
}
#plugin-point {
position: absolute;
left: 100px;
bottom: 150px;
width: 0px;
height: 0px;
}
</style>
</head>
<body>
<div id="demo-container">
<div id="mount-point"></div>
<div id="plugin-point"></div>
</div>
<script type="text/javascript" src="../../dist/tcg-sdk/index.js"></script>
<script type="text/javascript" src="../../plugin/joystick/joystick.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
<script>
// For CAR, the backend service API `StartProject` is actually a serial call of `ApplyConcurrent` and `CreateSession` APIs on the backend.
// Apply for a concurrency (`ApplyConcurrent`). https://www.tencentcloud.com/zh/document/product/1158/49969, 中文 https://cloud.tencent.com/document/api/1547/72827
// Create a session (`CreateSession`). https://www.tencentcloud.com/zh/document/product/1158/49968, 中文 https://cloud.tencent.com/document/api/1547/72826
const StartProject = async () => {
const url = 'http://xxxx/StartProject'; // For backend implementation, see the backend demo solution.
// For more information on other optional parameters, see the document of the `ApplyConcurrent` API.
// applicationId and projectId are the IDs of the application and project you created in the console, respectively
const { data } = await axios.post(url, {
ProjectId: 'project-id',
// ApplicationId: 'app-123', // If the project is multi-application type, it is necessary to also specify the ApplicationId (app-xxxxx) to launch the required application in the cloud.
UserId: 'user-id', // Random UserId
ClientSession: TCGSDK.getClientSession(),
});
console.log('%c StartProject res', 'color: blue; font-size: 14px', data);
const { Code, SessionDescribe: { ServerSession } } = data;
if (Code === 0) {
TCGSDK.start(ServerSession);
} else {
// Process the request exception
}
}
// For two-finger touch, record the position of the last touch point to facilitate coordinate calculation.
let lastX = null;
let lastY = null;
// For more information on the SDK lifecycle, visit https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html.
TCGSDK.init({
appid: 1234567, // APPID is the Tencent cloud account ID information, which can be found at the Account Information (https://console.tencentcloud.com/developer).
mount: 'mount-point',
debugSetting: {
showLog: true,
},
// Connected successfully.
onConnectSuccess: async (res) => {
console.log('onConnectSuccess', res);
// // Add joystick
// const j = new CloudGamingPlugin.joystick({
// zone: document.querySelector('#plugin-point'),
// });
},
// The network was disconnected or the user was kicked out.
onDisconnect: (res) => {
console.log('onDisconnect', res);
},
onWebrtcStatusChange: (res) => {
console.log('onWebrtcStatusChange', res);
},
// The user touched the mobile client to simulate an instruction sent on a PC.
onTouchEvent: async (res) => {
// console.log('onTouchEvent', res);
// The code for a single-finger touch operation
if (res.length === 1) {
const { id, type, pageX, pageY } = res.pop();
// console.log('onTouchEvent', id, type, pageX, pageY);
TCGSDK.mouseMove(id, type, pageX, pageY);
if (type === 'touchstart') {
TCGSDK.sendMouseEvent({ type: 'mouseleft', down: true });
}
if (type === 'touchend' || type === 'touchcancel') {
TCGSDK.sendMouseEvent({ type: 'mouseleft', down: false });
}
}
// The code for a two-finger pinch zoom operation. Here, the two fingers simulate a mouse scroll wheel event on a PC.
if (res.length === 2) {
const [{ pageX: oneX, pageY: oneY }, { pageX: twoX, pageY: twoY }] = res;
const currentX = Math.ceil(Math.abs(oneX - twoX));
const currentY = Math.ceil(Math.abs(oneY - twoY));
// `lastX` and `lastY` indicates the previous position and can be defined globally like this: `let lastX = null, lastY = null`.
lastX || (lastX = currentX);
lastY || (lastY = currentY);
if (lastX && currentX - lastX < 0 && lastY && currentY - lastY < 0) {
TCGSDK.sendMouseEvent({ type: 'mousescroll', delta: 1 });
lastX = currentX;
lastY = currentY;
}
if (lastX && currentX - lastX > 0 && lastY && currentY - lastY > 0) {
TCGSDK.sendMouseEvent({ type: 'mousescroll', delta: -1 });
lastX = currentX;
lastY = currentY;
}
}
},
onInitSuccess: async (res) => {
console.log('%c onInitSuccess', 'color: red', res);
await StartProject();
}
});
</script>
</body>
</html>