<!--JSSDK-->
<script src="//bj.bcebos.com/v1/yunapp-static/bac/sdk/jssdk/redfinger.min.latest.js"></script>
<!--Web SDK-->
<script src="//bj.bcebos.com/v1/yunapp-static/bac/sdk/websdk/yap-utils.umd.latest.js"></script>

<button onclick="play()">直连</button>
<!--实例标签-->
<div id="play-box" style="height: 500px"></div>
<!--JSSDK-->
<script src="//bj.bcebos.com/v1/yunapp-static/bac/sdk/jssdk/redfinger.min.latest.js"></script>
<!--Web SDK-->
<script src="//bj.bcebos.com/v1/yunapp-static/bac/sdk/websdk/yap-utils.umd.latest.js"></script>

  // 替换百度智能云-云手机 AK、SK
  const ak = 'PVr5RaC0p58Bo***';
  const sk = 'VBy9VWdaUP1q4W8xLXrr2MEZqMDKe***';
  /*
  * 获取实例编号地址 https://console.bce.baidu.com/bac#/example/list 实例编号
  * 设备编码：非必填，padCode与appId不能同时为空，同时存在padCode优先，存在padCode则直连云手机
  * 获取设备编码地址 https://console.bce.baidu.com/bac#/app/list 应用ID
  * 应用id：非必填，应用id不为空表示应用直连，否则为云手机直连。直连应用还需要填写pkgName用来使SDK启动云手机应用，appId通知服务端直连应用。
  * userId：必填，内容自定义
  * */
  const padCode = 'VM010151089016';
  const appId = '100705';
  const userId = 'baidu';
  const pkgName = 'com.xxx.xxx';

  const Sign = yapUtils.Sign; // 签名方法
  const Tools = yapUtils.tools; // 接口封装
  const axios = yapUtils.axios; // 封装axios

  function play() {
    // 申请直连实例接口签名
    let sign = new Sign({
      ak: ak,
      sk: sk,
      host: 'https://yunapp-api.baidu.com/api/armcmapi',
      path: '/sdk/v1/device/connect/apply',
      params: {
        padCode: padCode,
        appId: appId,
        userId: userId,
      }
    });
    // 申请直连实例
    axios({
      method: 'post',
      url: sign.getUrl(), // 获取签名后的请求地址
      data: sign.getBody(), // 获取签名后的请求体
      headers: {
        appKey: ak
      }
    }).then(res => {
      // 获取直连设备信息
      if (res.data.data && res.data.data.connectInfo) {
				const deviceToken = JSON.stringify(res.data.data.connectInfo.deviceToken);
        // 发起直连，Tools.play 封装了 redfinger.play，参考JSSDK 文档1.直连实例
				Tools.play({
          app: {pkgName: pkgName}, // 直连应用包名
          deviceToken
        }, redfinger, {})
      }
    });
  }

redfinger.config // 返回实例配置信息
redfinger.version // 返回JSSDK版本

redfinger.sendCommand(redfinger.KEY_TYPE. KEY_HOMEPAGE) // 指令控制方法 - 返回桌面
redfinger.destory(); // 退出直连

redfinger.onRunInformation = function(type, info) { // 运行信息回调
    console.log(type, info)
}

// 云端透传失败回调
redfinger.onTransparentMsgFailed = function (type, msg, service) {
    console.log('onTransparentMsgFailed', type, msg, service)
}

// 云端透传回调
redfinger.onTransparentMsg = function (type, msg, service) {
    console.log('onTransparentMsg', type, msg, service)
}

// 透传云端消息
redfinger.sendTransparentMsg(type, otpions, packageName);

// type 类型H5端默认为 1
// packageName ${应用包名}/com.baidu.operationsdk.BDGameService
// otpions 透传信息，数据格式需要转化为json格式
var options = {
  'pkg': 'com.yunserver.serverapp', // 应用包名
  'action': 'CUSTOM_DATA', // 透传动作
  'extraData': {'uid': '设备号:VM010151094070 时间戳:1625140088930'} // 透传自定义信息
};

// options 数据格式转换JSON
options = JSON.stringify(options);

// 发送示例：
redfinger.sendTransparentMsg(1, options, 'com.yunserver.serverapp/com.baidu.operationsdk.BDGameService');

// 实际发送数据格式：
redfinger.sendTransparentMsg(1,'{\\"pkg\\":\\"com.yunserver.serverapp\\",\\"action\\":\\"CUSTOM_DATA\\",\\"extraData\\":{\\"uid\\":\\"设备号:VM010151094070 时间戳:1625140088930\\"}}', 'com.yunserver.serverapp/com.baidu.operationsdk.BDGameService');

redfinger.config.isCameraLive = true // 开启扫码功能

redfinger.config.isMicrophoneLive = true; // 开启语音权限

// 解决部分云手机设备摄像头上下倒置问题
redfinger.config.cameraTransform = 180; // 值为摄像头上下旋转角度，可选项 0、180

// 实例化Sign给SDK申请直连实例接口签名
const sign = new Sign({
  ak: ak,
  sk: sk,
  host: 'https://yunapp-api.baidu.com/api/armcmapi',
  path: '/sdk/v1/device/connect/apply',
  params: {
    padCode: padCode,
    appId: appId,
    userId: userId,
    onlineTime: 60 * 10
  }
});

// 使用签名后的地址和请求提发起 axios 请求
axios({
  method: 'post',
  url: sign.getUrl(), // 获得签名后请求地址
  data: sign.getBody(), // 获得签名后的请求体
  headers: {
    appKey: ak
  }
}).then(res => {
  console.log('申请直连实例返回：', res);
});