Tutorial: 应用云渲染 demo

基本内容

如需包含排队功能，请参考排队 demo

理论上该 demo 同时兼容 PC 端和移动端（移动端触控事件在 onTouchEvent 已处理）

后台实现可以参考后台 demo方案

代码如下：

<!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>腾讯云-云渲染-应用云渲染-demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: '黑体', 'Microsoft YaHei', 'Arial', 'sans-serif';
    }

    #demo-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="demo-container">
    <div id="mount-point"></div>
  </div>
  <script type="text/javascript" src="path/to/tcg-sdk"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
  <script>
    // 对于应用云渲染，后台服务接口 StartProject 其实就是后台串行调用了云API的 ApplyConcurrent + CreateSession
    // 申请并发（ApplyConcurrent） https://cloud.tencent.com/document/api/1547/72827
    // 创建会话（CreateSession） https://cloud.tencent.com/document/api/1547/72826
    const StartProject = async () => {
      const url = 'https://xxxx/StartProject'; // 后台端实现可以参考后台 demo 方案

      // 其他选填参数可以参考 ApplyConcurrent 接口文档
      const { data } = await axios.post(url, {
        ProjectId: 'project-id',
        UserId: 'user-id',
        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 {
        // 请求异常处理
      }
    }

    // 针对双指触控，记录最后触控点位置，便于坐标计算
    let lastX = null;
    let lastY = null;

    // SDK 生命周期参考 https://cloud.tencent.com/document/product/1162/47435
    TCGSDK.init({
      appid: 1234567,
      mount: 'mount-point',
      debugSetting: {
        showLog: true,
      },
      // 连接成功回调
      onConnectSuccess: async (res) => {
        console.log('onConnectSuccess', res);
      },
      // 网络中断/被踢触发此回调
      onDisconnect: (res) => {
        console.log('onDisconnect', res);
      },
      onWebrtcStatusChange: (res) => {
        console.log('onWebrtcStatusChange', res);
      },
      // 移动端触摸，模拟发送 PC 上指令
      onTouchEvent: async (res) => {
        // console.log('onTouchEvent', res);
        // 针对单指触控操作
        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 });
          }
        }
        // 针对双指缩放操作，这里双指模拟了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，lastY 为上一次的位置，可定义在全局 如 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>

引入插件

移动端对于移动操作，云渲染官方有提供摇杆插件（Joystick），可用于映射键盘 wasd/上下左右按键。

摇杆

添加如下代码

<script type="text/javascript" src="path/to/joystick.js"></script>

在onConnectSuccess 中创建摇杆

// 添加摇杆 plugin-point 为需要挂载插件的 element 的 ID
const j = new CloudGamingPlugin.joystick({
  zone: document.querySelector('#plugin-point'),
});