Cloud Phone:Web SDK

SDK とデモのダウンロード

• Web クライアント SDK

• Web.SDK.Demo (Vue プロジェクト)

このプラットフォーム上のすべてのドキュメント、SDK、およびクライアントプログラムは、個人または企業での使用のみを目的としています。Alibaba Cloud の同意なしに第三者に配布しないでください。

SDK パッケージには 3 つのファイルが含まれています：

├── WuyingWebDemo.html  // サンプルページ
├── WuyingWebSDK.js     // SDK API ファイル — フロントエンドページでこれを参照します
└── sdk/
     └── ASP/
          └── container.html  // iframe 埋め込みリソース

デモの実行

Vue プロジェクト (Web.SDK.Demo)

1. Node.js がインストールされていることを確認します：

   node

   Welcome to Node.js が表示された場合、Node.js はインストールされています。そうでない場合は、続行する前に Node.js をインストールしてください。

2. プロジェクトのルートに移動します：

   cd <ProjectRootPath>

3. 依存関係をインストールします：

   npm i

4. プロジェクトを開始します：

   npm run dev

   プロジェクトが開始されると、コマンドはアクセス可能な URL を返します。

静的 HTML デモ (WuyingWebDemo.html)

1. HTML ファイルを含むディレクトリに移動します：

   cd <HTMLPath>

2. ローカル HTTP サーバーを起動します：

   python3 -m http.server

3. ブラウザで http://localhost:8000/WuyingWebDemo.html を開きます。

統合フロー

統合は 4 つのステップで行われます：

1. 接続認証情報の取得 — 適切な API を呼び出して、チケット、authCode、または loginToken を取得します。下記の認証方式をご参照ください。

2. セッションの初期化 — 認証情報とインスタンスパラメーターを指定して Wuying.WebSDK.createSession() を呼び出します。

3. 接続の開始 — session.start() を呼び出して、クラウドフォンへの接続を確立します。

4. イベントの処理 — session.addHandle() を介してコールバックを登録し、接続、切断、およびランタイムイベントに応答します。

認証方式

2 つの認証方式が利用可能です。使用する方式によって、userInfo で渡す認証情報が決まります。

方式	認証情報	取得方法
権限付与なしのログイン (独自のユーザーシステム)	authCode	GetAuthCode
簡便アカウントでのログイン (Alibaba Cloud Workspace ユーザーシステム)	loginToken	GetLoginToken
直接チケット (SDK v1.4.7 以降)	ticket	上記のいずれかの方法で取得し、直接渡します

以下のフローチャートは、完全なチケット取得フローを示しています：

完全な統合のウォークスルーについては、「クラウドフォン統合のベストプラクティス」をご参照ください：

セッションの初期化と作成

Wuying.WebSDK.createSession(id, sessionParams) を呼び出してセッションオブジェクトを作成します。

以下の例は、3 つすべての認証方式を示しています。すべての例で、クラウドフォンに必要な connectType: 'app' と osType: 'Android' を使用しています。

チケットの使用 (SDK v1.4.7 以降、直接接続に推奨)：

var userInfo = {
  ticket: 'xxx',
};
var appInfo = {
  osType: 'Android',           // 必須
  appId: 'android',
  appInstanceId: 'ai-xxxxxx',  // インスタンス ID、ai- で始まります
  productType: 'AndroidCloud',
  connectionProperties: JSON.stringify({ authMode: 'Session' }),
};
var sessionParam = {
  openType: openType,
  iframeId: 'sessionIframe',
  resourceType: 'local',
  connectType: 'app',
  userInfo: userInfo,
  appInfo: appInfo,
};
var wuyingSdk = Wuying.WebSDK;
session = wuyingSdk.createSession('appstream', sessionParam);

authCode の使用 (権限付与なしのログイン)：

var userInfo = {
  sessionId: sessionId,
  authCode: authCode,
};
var appInfo = {
  osType: 'Android',           // 必須
  appId: 'android',
  resourceId: 'p-xxxxxx',      // PersistentAppInstanceId、p- で始まります
  productType: 'AndroidCloud',
  connectionProperties: JSON.stringify({ authMode: 'Session' }),
};
var sessionParam = {
  openType: openType,
  iframeId: 'sessionIframe',
  resourceType: 'local',
  connectType: 'app',
  userInfo: userInfo,
  appInfo: appInfo,
};
var wuyingSdk = Wuying.WebSDK;
session = wuyingSdk.createSession('appstream', sessionParam);

loginToken の使用 (簡便アカウントでのログイン)：

var userInfo = {
  sessionId: sessionId,
  loginToken: loginToken,
};
var appInfo = {
  osType: 'Android',           // 必須
  appId: 'android',
  resourceId: 'p-xxxxxx',      // PersistentAppInstanceId、p- で始まります
  productType: 'AndroidCloud',
  connectionProperties: JSON.stringify({ authMode: 'Session' }),
};
var sessionParam = {
  openType: openType,
  iframeId: 'sessionIframe',
  resourceType: 'local',
  connectType: 'app',
  userInfo: userInfo,
  appInfo: appInfo,
};
var wuyingSdk = Wuying.WebSDK;
session = wuyingSdk.createSession('appstream', sessionParam);

接続の開始

session.start();

接続の停止

session.stop();

イベントコールバックの登録

session.addHandle(name, callback) を使用してセッションイベントをリッスンします。

// SDK が接続チケットを取得しているときに発生します
session.addHandle('getConnectionTicketInfo', (data) => {
  console.log(data);
});

// 接続が確立されたときに発生します
// このコールバックの後、UI コントロールを有効にし、setUiParams()、setInputEnabled()、setClipboardEnabled() などの接続後 API を呼び出します
session.addHandle('onConnected', (data) => {
  console.log('connected', data);
});

// 接続が切断されたときに発生します
// data.code を確認して原因を特定します：
//   0    — 切断されました (ASP_CLIENT_DISCONNECT_CONNECT_ERROR)
//   1    — ソケットが閉じられました (ASP_CLIENT_DISCONNECT_SOCKET_CLOSE)
//   2    — WebRTC が閉じられました (ASP_CLIENT_DISCONNECT_WEBRTC_CLOSE)
//   25   — チケットの検証に失敗しました (同じチケットで再接続しようとした場合にも発生します)
//   2001 — クラウドアプリケーションが閉じられました (ASP_CLIENT_DISCONNECT_CLOUD_APP_STOP)
//   2002 — クラウドフォンが横取りされました (ASP_CLIENT_DISCONNECT_CLIENT_PREEMPTION)
//   2003 — ゲストが再起動しました (ASP_CLIENT_DISCONNECT_GUEST_SHUTDOWN_REBOOT)
//   2004 — 現在のユーザーが切断されました
//   2027 — ストリームフェッチングモードが切り替わりました
//   2200 — RTT タイムアウト (ASP_CLIENT_RTT_TIMEOUT)
//   2201 — ネットワーク I/O エラー (ASP_CLIENT_NET_ERROR_IO)
//   2202 — チケットの更新に失敗しました (ASP_CLIENT_UPDATE_TICKET_FAILED)
session.addHandle('onDisConnected', (data) => {
  console.log('disconnect', data);
});

// クラウドフォンが SDK にメッセージを送信したときに発生します
session.addHandle('onRuntimeMsg', (data) => {
  document.getElementById('GuestMsgContext').value = JSON.stringify(data);
});

// 接続プロセスでエラーが発生したときに発生します
// データ形式：{ code: string, message: string, api: string }
// message には requestId が含まれ、api は失敗したリクエストを識別します
// エラーコードの意味と解決手順については、エラーリファレンスをご参照ください
session.addHandle('onError', (data) => {
  console.log('error', data);
});

UI パラメーターの設定

var uiConfig = {
  toolbar: {
    visible: false,
  },
  rotateDegree: 90,  // 横向きモードを強制
};
session.setUiParams(uiConfig);

データチャンネルの使用

セッション作成時に sessionParam で dataChannelConfig を構成します：

dataChannelConfig: [{
  dataChannelName: 'wy_vdagent_default_dc',
}]

その後、メッセージをリッスンして送信します：

// 受信メッセージをリッスン
// 回転メッセージのフォーマット：{"action":"rotation","value":"0"}
// value：0 = 0 度、1 = 90 度、2 = 180 度、3 = 270 度
session.addDataChannelListener(
  'wy_vdagent_default_dc',
  'data',
  data => console.log('data from wy_vdagent_default_dc', data)
);

// メッセージを送信 (チャンネル名、メッセージ本文)
session.sendDataChannelMessage('wy_vdagent_default_dc', new Uint8Array([1, 2, 3, 4]));

ADB チャンネルの使用

セッション作成時に sessionParam で lyncChannelConfig を構成します：

lyncChannelConfig: [{
  lyncChannelName: 'lync_adb_shell',
}]

その後、コマンドを送信し、結果をリッスンします：

// ADB コマンドを送信
session.value.sendLyncMessage(
  'lync_adb_shell',
  JSON.stringify({
    id: Date.now(),            // 一意のコマンド識別子
    cmd: OperationMap[type],
  }),
);

// コマンドの結果をリッスン
session.addLyncListener(
  'lync_adb_shell',
  'onReceivedLyncData',
  data => console.log('data from lync_adb_shell', data)
);

SessionParam

createSession() のパラメーターです。

UserInfo

authCode、ticket、または loginToken のいずれか 1 つを渡します。複数渡さないでください。

AppInfo

クラウドフォンインスタンスの構成です。

`resourceId` / `appId` の取得：

• 簡易アカウントでのログイン: クライアントから DescribeUserResources を呼び出して、ResourceId を取得します。

• 権限付与なしでログオン: サーバーから DescribeAndroidInstances を呼び出して、PersistentAppInstanceId を取得します。

UiConfig

接続ページの UI 設定です。

ToolBarConfig

ConnConfig

OpenType

ConnectType

ResourceType

ReconnectType

ResolutionType

ChargeType

Language

LoginType

SessionEventType

ConnDecodeType

プロトコルタイプ

切断エラー (onDisConnected)

onDisConnected コールバックは data オブジェクトを受け取ります。data.code を以下の表と照合してください。

接続エラー (onError)

onError コールバックは { code: string, message: string, api: string } を受け取ります。message フィールドには requestId が含まれます。api フィールドは失敗したリクエストを識別します。

DesktopAssistant ツールバーを非表示にする方法

セッション作成時に uiConfig で toolbar.visible を false に設定します：

uiConfig: {
  toolbar: {
    visible: false,
  },
},

ASP チャンネル経由で ADB コマンドを送信する方法

セッション作成時に sessionParam で lyncChannelConfig を初期化します：

lyncChannelConfig: [
  {
    lyncChannelName: 'lync_adb_shell',
  },
],

session.sendLyncMessage() を使用してコマンドを送信します：

session.sendLyncMessage(
  'lync_adb_shell',
  JSON.stringify({
    id: crypto.randomUUID(),
    cmd: 'input keyevent KEYCODE_VOLUME_UP',
  })
);

session.addLyncListener() を使用して結果をリッスンします：

session.addLyncListener(
  'lync_adb_shell',
  'onReceivedLyncData',
  data => console.log('data from lync_adb_shell', data)
);

一般的な ADB コマンド：

カメラの使用方法

ブラウザはカメラの権限にセキュアコンテキストを要求するため、カメラにアクセスするにはデモ URL で https を使用する必要があります。

クライアントの前面カメラまたは背面カメラのみが必要な場合など、特別なテストケースでは、次の設定を適用する必要があります：

// 前面カメラ
session.setLocalConfig('setCameraType', 1);
// 背面カメラ
session.setLocalConfig('setCameraType', 2);

クリップボードが機能しない

まず、ブラウザでクリップボードの権限が有効になっていることを確認してください。

ブラウザの権限が付与されているにもかかわらずクリップボードの同期が機能しない場合は、クラウドフォンコンソールでインスタンスに関連付けられているポリシーを確認してください。クリップボードポリシーが双方向転送を許可するように設定されていることを確認します。