- 启动应用
- 获取实例化参数
- 云游戏服务:云游戏服务 -> 实时进程,点击操作列中直连信息。
- 云手机:云游戏 -> 实例管理,点击操作列中直连信息。
从弹出侧栏的“Web 直连信息”的 URL 参数中获得以下字段信息:
| 字段名 | 说明 |
|---|---|
| token | 应用唯一标识 |
| address | 信令服务地址 |
| url | ICE 服务地址 |
- 使用上述信息初始化
signaling与iceConfig变量
// 所有服务的 iceConfig 配置一致
const iceConfig = [
{
urls: `turn:${url}:3478`, // 默认端口 3478
username: "coturn", // 默认用户 coturn
credential: "123456", // 默认凭据 123456
},
];
// 云游戏服务信令地址
const signaling = `wss://${address}/clientWebsocket/${token}`;
// 云手机信令地址
const signaling = `wss://${address}/signaling/client/${token}`;- 初始化实例
连接实例前两个参数由步骤 3 提供,hostElement 为任意固定尺寸的 HTML 元素。
不同应用类型 Launcher 不一致。若类型不匹配连接仍可建立,但事件转换会不一致导致无法交互。
// 如果启动的是 Windows 应用
const launcher = new Launcher(signaling, iceConfig, hostElement);
// 如果启动的是 Android 应用
const launcher = new MobileLauncher(signaling, iceConfig, hostElement);// 开启
launcher.showKeyboard();
// 关闭
launcher.hideKeyboard();// 唤起
launcher.wakeOnIME();// 开启
launcher.showJoyStick();
// 关闭
launcher.hideJoyStick();不显示指针,支持以下交互:
- 左击(轻触)
- 拖动
- 右击(长按)
显示指针,指针跟随触点位置移动,支持以下交互:
- 左击(轻触)
- 移动(滑动)
- 拖动(长按滑动)
- 右击(双击)
显示指针,指针相对触点移动偏移量变动位置,支持以下交互:
- 左击(轻触)
- 移动(滑动)
- 拖动(长按滑动)
- 右击(双击)
// 启用拖动模式
launcher.enableTrackpad("relative");
// 启用触控模式
launcher.enableTrackpad("direct");
// 禁用触控板
launcher.disableTrackpad();使用虚拟控件编辑器创建控件布局,单击“复制键盘配置”,将复制的内容赋值给 layout 变量。
// 这里作为演示只创建了一个 S 按键
const layout = [
{
xPercent: 0.11299435028248588,
yPercent: 0.6782128514056225,
widthPercent: 0.1,
heightPercent: 0.17771084337349397,
codes: 83,
showName: "",
schemeKeys: "S",
aspectRatio: 1,
srcList: [],
type: 0,
opacity: 1,
anchor: "screen",
},
];
// 创建一个虚拟控件布局,返回值为该布局的唯一标识
const id = launcher.createOnScreenControlsProfile("control_name", layout);
// 显示指定 id 的虚拟控件布局,参数可选,不传默认显示第一个
launcher.showOnScreenControlsByProfileId(id);
// 关闭
launcher.hideOnScreenControls();// file 为浏览器 File 对象
launcher.uploadFile(file, (e) => {
if (e.state === "progress") {
// 发送进度 [0-100]
console.log(e.progress);
} else if (e.state === "error") {
// 远端拒绝接或者发送错误
console.error(e.reason);
} else if (e.state === "done") {
console.log("done");
}
});// 修改推流端编码器的设置
launcher.changeCodecOptions({
bitrate: 3000, // 码率
framerate: 30, // 帧率
gopLength: 250, // I 帧间隔
});
// 如果只需改变码率
launcher.changeCodecOptions({ bitrate: 3000 });// 修改分辨率为 HD
launcher.changeResolution(1280, 720);const MobileKeysKeycode {
KeycodeHome: 3, // Home 键
KeycodeBack: 4, // 返回键
KeycodeVoiceUp: 24, // 音量 + 键
KeycodeVoiceDown: 25, // 音量 - 键
KeycodeAppSwitch: 187, // 应用切换键
}
const MobileKeysActionType {
ActionDown: 0, // 按下
ActionUp: 1, // 抬起
}
// 发送一次 Home 键单击
launcher.sendMobileAction(MobileKeysKeycode.KeycodeHome, MobileKeysActionType.ActionDown);
launcher.sendMobileAction(MobileKeysKeycode.KeycodeHome, MobileKeysActionType.ActionUp);// 单位 kbps
launcher.connection.changeBandwidthByRenegotiation(1500);// 范围 [0-1]
launcher.connection.changeMobileResolutionScale(0.5);// 开启
launcher.showMagnifier();
// 关闭
launcher.hideMagnifier();// 开关统计信息
launcher.toggleStatistics();
// 开启后可以通过以下方法获得统计数据
window.setInterval(() => {
const { rtt, fps, bitrate, packetLossRate, latency } = launcher.report();
console.log(`
FPS: ${fps}
rtt: ${rtt}ms
latency: ${latency}ms
biterate: ${bitrate}kbps
packetLossRate: ${(packetLossRate * 100).toFixed(3)}%
`);
}, 1000);主要字段说明:
- fps: 帧数
- latency: 客户端与节点端服务之间往返时间,单位 ms
- rtt: 客户端与 ICE 服务器之间往返时间,单位 ms
- packetLossRate: 丢包率
- bitrate: 视频流码率,单位 kbps
其他字段参考: Stats dictionaries
launcher.exportLog();launcher.destory();// Windows 应用
new Launcher(url, iceServers, hostElement[, options])
// Android 应用
new MobileLauncher(url, iceServers, hostElement[, options])| 字段 | 类型 | 说明 |
|---|---|---|
| url | string | 最终的信令 URL,参照快速接入 |
| iceServers | RTCIceServer[] | ICE 服务配置,参照快速接入 |
| hostElement | HTMLElement | 任意固定尺寸的 HTML 元素 |
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autorunRivatuner | boolean | false | 是否自动开启数据统计 |
| orientationLock | boolean | false | 开启后流内容不再自动旋转 |
| enableControlPanel | boolean | false | 是否开启默认的控制面板 |
| themeColor | string | 'ff0000' | 虚拟控件(如果有)的主题色 |
| onPhaseChange | (phase: Phase, deltaTime: number) => void |
noop | 每当阶段变化会产生一次事件,参数二为两次事件的间隔,详见 Phase 说明 |
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| disableFileTransfer | boolean | false | 是否拒绝接收远端推送的文件 |
| disablePointerManager | boolean | false | 是否禁用指针样式同步 |
| disablePointerLock | boolean | false | 是否禁用指针锁定(即使没有指针也不进入相对移动模式) |
| enableClipboard | boolean | false | 是否开启剪贴板同步 |
| useClassicEvent | boolean | false | 是否使用 mouseevent 替代 pointerevent 作为指针事件 |
| 阶段 | 说明 |
|---|---|
| initial | 初始阶段,刚实例化后或断网重连后进入该阶段 |
| signaling-connected | 浏览器端与信令建立连接成功,该阶段能响应信令消息 |
| node-ready | 节点与信令建立连接成功,标志着浏览器端可以开始与推流端交换候选 |
| end-candidate | 交换候选结束 |
| peer-connection-connected | WebRTC 连接建立成功 |
| bandwidth-detect | 如果开启了自动测速,会有这个阶段以检测带宽 |
| data-channel-open | 数据通道打开,标志着可以进行交互 |
| loaded-metadata | 视频流开始播放 |
如需自行处理一些流程,可以通过 launcher.connection.event.[eventName].[on|off|once|emit] 进行交互。
| event name | 发送时间点/说明 | payload |
|---|---|---|
| connect | 收到信令的 connect 事件时 | ConnectMSG |
| afk | 收到信令的 operateOverTime 事件时 | number |
| open | 与信令的 WebSocket 连接建立成功后 | Event |
| close | 与信令的 WebSocket 连接关闭后 | CloseEvent |
| queue | 收到信令的 queue 事件时 | number |
| ready | 收到信令的 ready 事件时 | ReadyMSG |
| endCandidate | 连接双方完成 ICE 候选地址的交换时 | RTCPeerConnectionIceEvent |
| cursor | 推流端光标有变化时 | Cursor |
| hangUp | 当推流端与信令失联时 | void |
| disconnect | 收到信令的 peerDisconnected 事件或 WebSocket 链接断开始时 | string |
| receivedLink | 推流端捕获到超链接时 | string |
| receivedTrack | 实例接收到媒体轨道时;payload 为该轨道 | MediaStreamTrack |
| dataChannelConnected | DataChannel 实例打开时;当收到该事件时说明可以开始交互 | Event |
| interaction | 推流端运行的应用利用 socket 发送事件时 | string | ArrayBuffer |
| kick | 收到信令的 kick 事件时 | string |
| networkChanged | PeerConnection 检测到网络变化时 | string |
| echo | 收到响应的 echo 消息时;payload 为该次往返时间 | number |
| screenshot | 完整接收完截图数据时;payload 为截图数据 | Blob |
| screenshotData | 收到截图数据时;payload 为数据字节长度 | number |
| kickOut | 收到踢人消息时 | string |
| clipboard | 完整接收完剪贴板数据时;payload 为剪贴板数据 | string | Blob |
| encodeSettings | 收到视频编码配置时 | { framerate: number; bitrate: number; gopLength: number } |
| mobileResolutionInfo | 收到 Android 的分辨率数据时 | { width: number; height: number; scale: number } |
| resolutionInfo | 收到 Windows/Linux 的分辨率数据时 | [number, number, number][] |
| Feature | Chrome | Edge | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| 最低需求 | 64 | 79 | 69 | 58 | 13.1 |
| 支持所有特性 | 71 | 79 | 69 | 63 | 13.1 |
| Feature | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android |
|---|---|---|---|---|---|---|
| 最低需求 | 64 | 79 | 47 | 13.4 | 9.0 | 64 |
| 支持所有特性 | 84 | 79 | 50 | 13.4 | 10.0 | 84 |