Skip to content

Jim1874/sdk-samples

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

快速接入

  1. 启动应用
  1. 获取实例化参数

从弹出侧栏的“Web 直连信息”的 URL 参数中获得以下字段信息:

字段名 说明
token 应用唯一标识
address 信令服务地址
url ICE 服务地址
  1. 使用上述信息初始化 signalingiceConfig 变量
// 所有服务的 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}`;
  1. 初始化实例

连接实例前两个参数由步骤 3 提供,hostElement 为任意固定尺寸的 HTML 元素。

不同应用类型 Launcher 不一致。若类型不匹配连接仍可建立,但事件转换会不一致导致无法交互。

// 如果启动的是 Windows 应用
const launcher = new Launcher(signaling, iceConfig, hostElement);
// 如果启动的是 Android 应用
const launcher = new MobileLauncher(signaling, iceConfig, hostElement);

功能与方法

Windows 应用独有功能

虚拟键盘
// 开启
launcher.showKeyboard();
// 关闭
launcher.hideKeyboard();
IME 键盘(手机默认输入法)
// 唤起
launcher.wakeOnIME();
虚拟摇杆
// 开启
launcher.showJoyStick();
// 关闭
launcher.hideJoyStick();
切换触控板模式
默认(不开启)

不显示指针,支持以下交互:

  • 左击(轻触)
  • 拖动
  • 右击(长按)
触控(direct 模式)

显示指针,指针跟随触点位置移动,支持以下交互:

  • 左击(轻触)
  • 移动(滑动)
  • 拖动(长按滑动)
  • 右击(双击)
拖动(relative 模式)

显示指针,指针相对触点移动偏移量变动位置,支持以下交互:

  • 左击(轻触)
  • 移动(滑动)
  • 拖动(长按滑动)
  • 右击(双击)
// 启用拖动模式
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);

Android 应用独有功能

发送手机功能键
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 元素
可选参数 options 包含字段及其说明
字段 类型 默认值 说明
autorunRivatuner boolean false 是否自动开启数据统计
orientationLock boolean false 开启后流内容不再自动旋转
enableControlPanel boolean false 是否开启默认的控制面板
themeColor string 'ff0000' 虚拟控件(如果有)的主题色
onPhaseChange (phase: Phase, deltaTime: number) => void noop 每当阶段变化会产生一次事件,参数二为两次事件的间隔,详见 Phase 说明
Launcher 独有的可选参数
字段 类型 默认值 说明
disableFileTransfer boolean false 是否拒绝接收远端推送的文件
disablePointerManager boolean false 是否禁用指针样式同步
disablePointerLock boolean false 是否禁用指针锁定(即使没有指针也不进入相对移动模式)
enableClipboard boolean false 是否开启剪贴板同步
useClassicEvent boolean false 是否使用 mouseevent 替代 pointerevent 作为指针事件
Phase 说明
阶段 说明
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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 38.4%
  • HTML 31.5%
  • Vue 11.6%
  • Svelte 11.0%
  • JavaScript 7.3%
  • CSS 0.2%