Web SDK 集成与使用步骤

Web 端云手机投屏与实时操控 SDK。

一、安装与引入

npm install @vmaos/web-cast-sdk

import { UniSDK } from '@vmaos/web-cast-sdk/uni-sdk';

二、初始化配置

属性	描述	是否必填
mountedElement	挂载节点，支持 HTMLElement 实例或选择器/节点 ID。	必填
connectConfig	WebRTC 连接配置信息，通过后端 / SDK 提供的连接配置接口获取。	必填
isGroup	是否开启群控。默认为 false。	可选
enabledDebug	是否开启调试模式/日志输出。默认为 false。	可选
disabledVerticalSwipe	是否阻止竖向滑动。默认为 false。	可选
disabled	是否禁用键盘事件处理。默认为 false。	可选
enabledIMEKeyboard	是否开启 IME 输入法键盘映射。默认为 false。	可选
enabledDecode	是否开启解码渲染（Canvas）。默认为 false。	可选
cursorType	鼠标形状样式，默认为 default。可选值及对应枚举： • default: UniSDK.CURSOR_TYPE.DEFAULT_CURSOR • circle: UniSDK.CURSOR_TYPE.CIRCLE_CURSOR • triangle: UniSDK.CURSOR_TYPE.TRIANGLE_CURSOR	可选
cloudDeviceSize	云机屏幕尺寸，格式为 { width, height }。	可选
videoAngle	视频旋转角度。	可选
remoteViewBackgroundColor	远程视图背景色。默认为 transparent。	可选

三、实例方法

方法	描述
goHome	返回首页（对应 Android Home 键）
goTask	任务列表（对应 Android 任务键）
goBack	返回（对应 Android 返回键）
enableAudio	开启音频
disableAudio	禁用音频
sendClipboardData	发送剪切板数据
openIMEKeyboard	开启键盘映射
closeIMEKeyboard	关闭键盘映射
switchToGestureNavigation	切换手势导航
switchToThreeButtonNavigation	切换三按钮导航
changeLevel	设置清晰度，通过 UniSDK.CLARITY_LEVEL 访问对应的支持清晰度，目前支持流畅、标清、超清
setVideoAngle	设置视频旋转角度
getVideoAngle	获取视频旋转角度
setStreamAngle	设置流角度
setCloudDeviceSize	设置云机屏幕尺寸
destroy	销毁 SDK 实例

四、事件监听

通过 player.addListener(event, callback) 进行监听，事件枚举通过 UniSDK.EVENTS 访问：

事件枚举	回调参数	描述
CONNECTED	-	建立连接成功
LOADED_SUCCESS	-	投屏加载成功
LOADED_FAILURE	error: any	投屏加载失败
STOP_CONNECT	-	连接断开
STATISTIC_INFO	info: StatisticInfo	实时统计信息更新（含 framesPerSecond、bitrate、lostRate、currentRoundTripTime、averageDecodeTime）
CLARITY_LEVEL_CHANGE	level: number	清晰度变更通知
DIRECTION_CHANGE	angle: number	云机屏幕方向变更通知（竖屏为 0，横屏为 -90）
RESIZE	screen: { screenWidth, screenHeight }	云机分辨率变更通知
GESTURE_MODE_CHANGE	mode: number	云机导航模式变更通知（0 三按钮导航，2 手势导航）
RECEIVE_MEDIA_STREAM_TRACK	track: MediaStreamTrack	接收到媒体流轨道
RECEIVE_ARRAY_BUFFER	buffer: ArrayBuffer	接收到二进制数据
CLICK_DATA	data: ChannelDataType	点击数据
CHANNEL_EVENT	-	通道事件
GROUP_CONTROL_EVENT	-	群控事件
ERROR	error: Error	投屏相关错误

五、错误码

错误码	描述	等级
10001	WebSocket 连接失败	高
10002	WebSocket 已关闭	高
10003	创建 offer 失败	高
10004	处理 offer 失败	高
10005	创建 answer 失败	高
10006	处理 answer 失败	高
10007	设置本地描述失败	高
10008	设置远端描述失败	高
10009	处理 ICE 交换失败	高
10010	ICE 状态异常	高
10011	摄像头异常	高
10012	云机已关机或者不存在	高
10013	信令通道错误	低
10014	WebRTC 统计信息获取失败	低

六、完整示例

const config = {}; // 通过提供的连接配置接口获取 connectConfig 配置

const player = new UniSDK({
    mountedElement: "#player-mounted",  // 挂载节点，可以是 HTMLElement 或者节点 ID
    isGroup: false, // 群控模式，默认 false
    disabled: true, // 禁用键盘事件
    enabledDebug: process.env.NODE_ENV !== 'production', // 开发环境下开启日志，默认 false
    disabledVerticalSwipe: false, // 是否阻止竖向滑动，默认 false
    enabledIMEKeyboard: false,     // 是否开启键盘映射，默认 false
    cursorType: UniSDK.CURSOR_TYPE.CIRCLE_CURSOR, // 光标类型，默认 default
    connectConfig: {
      ...config
    }
});

player.addListener(UniSDK.EVENTS.CONNECTED, () => {
    console.log('建立连接');
});

player.addListener(UniSDK.EVENTS.LOADED_SUCCESS, () => {
    console.log('投屏成功');
});

player.addListener(UniSDK.EVENTS.LOADED_FAILURE, (error: any) => {
    console.log('投屏失败', error);
});

player.addListener(UniSDK.EVENTS.STATISTIC_INFO, (info: any) => {
    console.log('统计信息', info); // 统计字段见事件监听一节
});

player.addListener(UniSDK.EVENTS.CLARITY_LEVEL_CHANGE, (level: number) => {
    console.log('清晰度更新', level);
});

player.init();