云手机Web SDK
更新时间：2025-06-11
百度云手机Web SDK接入说明
1 SDK概述
主要功能是为Web赋予直连云手机的能力，用户在管理控制台配置好云手机之后，Web端通过SDK进行直连操作。
1.1 运行环境
支持现代浏览器PC、H5端，以及小程序，公众号等。
1.2 环境要求
1、IOS 12.0及以上的系统版本
2、Android浏览器：需要支持webRTC的浏览器内核
3、PC Web浏览器
- 运行js模式需要内核为Chrome58+的浏览器
- 运行webrtc模式需要Chrome 71+的浏览器
- 运行js模式的webcodecs解码需要Chrome 94+、ios 16.4+的浏览器
- 运行js模式的webcodecs的h265解码需要Chrome 105+、ios 16.4+的浏览器
2 更新历史
| 版本号 | 发布时间 | 发布内容 | sdk下载 |
|---|---|---|---|
| 1.43.0 | 2025-04-08 | 去除网关模式 优化webcodces解码性能 |
点击下载 |
| 1.42.0 | 2025-01-02 | 增加三线切换功能 增加摄像头推送视频流的方式 |
点击下载 |
| 1.41.0 | 2024-12-25 | 群控模式增加对接apaas服务 | 点击下载 |
| 1.40.0 | 2024-12-09 | 优化埋点、优化滚动功能、优化按键功能 | 点击下载 |
| 1.39.0 | 2024-11-25 | 增加推送摄像头流的接口 | 点击下载 |
| 1.38.0 | 2024-11-07 | 增加wasm解码、webcodecs适配ios云 | 点击下载 |
| 1.37.0 | 2024-09-30 | 优化移动端横屏展示效果 | 点击下载 |
| 1.36.0 | 2024-08-28 | 摄像头支持画质调整、优化埋点上报 | 点击下载 |
| 1.35.0 | 2024-08-14 | webcodecs支持h265解码、优化图片上传功能、解决一些已知问题 | 点击下载 |
| 1.34.0 | 2024-06-21 | 优化移动端本地输入法问题 | 点击下载 |
| 1.33.0 | 2024-05-21 | 自适应屏幕设置为可配置、支持摇一摇功能 | 点击下载 |
| 1.32.0 | 2024-04-29 | 优化网络切换的处理、优化摄像头切换处理 | 点击下载 |
| 1.31.0 | 2024-04-25 | 应用默认键位支持自定义WASD按键处理 | 点击下载 |
| 1.30.0 | 2024-04-02 | 支持摄像头/麦克风的切换与启停 | 点击下载 |
| 1.29.0 | 2024-03-20 | 解决一些已知问题、增加离开或切换tab时浏览器是否静音开关机制、js解码库升级到3.0版本 | 点击下载 |
| 1.28.0 | 2024-01-24 | 优化横竖屏逻辑、使用webworker执行心跳 | 点击下载 |
| 1.27.1 | 2024-01-09 | 优化webcodecs关于软硬编码的处理逻辑 | 点击下载 |
| 1.27.0 | 2024-01-04 | 统一消息透传编码的方式、优化埋点等 | 点击下载 |
| 1.26.0 | 2023-12-20 | 解决一些已知的问题 | 点击下载 |
| 1.25.0 | 2023-11-16 | sdk传信息给云机粘贴板，增加是否顺便粘贴到输入框中 | |
| 1.24.0 | 2023-11-3 | 支持切换本地或者云端输入法 | |
| 1.23.0 | 2023-10-19 | 支持滚轮操作、js解码库升级为2.0版本 | |
| 1.22.0 | 2023-10-07 | 增加js模式的webcodecs硬解码 | |
| 1.21.0 | 2023-8-29 | 支持三键导航设置（需要配套remote-play：4.22.0，vmbroker 2.9.0，镜像：2.25.0） | |
| 1.20.0 | 2023-8-21 | 优化wasd按键不准以及延迟等问题 | |
| 1.19.0 | 2023-7-21 | 优化键盘映射问题 | |
| 1.18.0 | 2023-7-06 | 支持软硬键盘切换 （需要配合 remote-play 4.18.0，vmbroker 2.7.0 使用） | |
| 1.17.0 | 2023-6-16 | 新增接口返回当前实例ID | |
| 1.14.0 | 2023-5-11 | 优化运行信息回调 | |
| 1.13.0 | 2023-5-08 | 优化ios12不能投屏的问题 | |
| 1.12.0 | 2023-4-20 | 适配电视盒子 | |
| 1.11.0 | 2023-3-23 | 优化重连功能 | |
| 1.10.0 | 2023-3-23 | 支持消息透传、错误上报 | |
| 1.9.0 | 2023-2-24 | 支持群控、多路推流、关闭声音 | |
| 1.8.0 | 2023-2-08 | 支持键盘设置 | |
| 1.7.10 | 2023-2-03 | 设备申请接口增加支持模板机调用 | |
| 1.7.9 | 2022-12-15 | webrtc p2p模式静音回调优化 | |
| 1.7.8 | 2022-12-06 | 优化自动切换推流模式功能 | |
| 1.7.7 | 2022-11-17 | 部分回调函数优化 | |
| 1.7.6 | 2022-11-03 | 支持云手机APP通话 | |
| 1.7.5 | 2022-10-20 | 支持云手机场景 | |
| 1.7.4 | 2022-09-30 | 重连逻辑优化 | |
| 1.7.3 | 2022-09-19 | 支持云端粘贴板回调 | |
| 1.7.2 | 2022-09-01 | 支持断点续连功能 | |
| 1.7.1 | 2022-08-17 | 摄像头和其他功能优化 | |
| 1.7.0 | 2022-08-03 | 支持接入aPaas |
3 接入准备
1.登录智能云官网账号并完成企业认证，进入云手机管理控制台-概览页面，开通云手机服务。
2.购买云手机、或申请试用云手机
3.进入云手机资源所在的项目，点击“更多管理功能”跳转至项目管理平台
4.跳转平台后，通过账号基础信息获取appKey, appSecret, desKey。
4 接入流程
对接流程：
特别提醒：建议调用paas api放在自己的服务端实现，避免在客户端泄露appKey, appSecret, desKey等信息。
备注：
业务前端：客户实现的业务前端系统。
H5 SDK：百度云手机提供的云手机在h5 页面上使用的对接 sdk。
业务后台：客户实现的业务后台系统。
saas 服务：百度云手机提供的云手机saas管理平台管理服务，接口能力。
4.1 开始试玩流程说明
1、H5 sdk文件请联系云手机对接人员获取最新版本。
2、在页面上创建一个容器
Plain Text
1 <div class="phoneBox" id="phoneBox" style="background-color: grey;width: 100%;height: 100%">3、调用BgsSdk.initPhone()接口进行初始化。
4、调用业务getServerToken接口，传递uuid为参数.
5、业务后台收到getServerToken的请求后，使用saas平台提供的appkey appsecret deskey 进行签名和参数加密，然后调用saas的openApi getServerToken 来获取到serverToken，并将serverToken透传给业务前端。
6、业务前端得到serverToken后，调用BgsSdk.startPhone()进行开始云手机试玩。
4.2 结束试玩流程说明
1、业务前端调用BgsSdk.stopPhone()接口，结束本次云手机链接。
2、断开和云手机的链接后会触发onStoped回调，
4.3 示例代码
Javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>webrtc</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
8 <meta name="apple-mobile-web-app-capable" content="yes" />
9 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
10 <meta name="format-detection" content="telephone=no, email=no" />
11 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
12 <meta name="apple-mobile-web-app-capable" content="yes" />
13 <!-- 删除苹果默认的工具栏和菜单栏 -->
14 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
15 <!-- 设置苹果工具栏颜-->
16 <meta name="format-detection" content="telphone=no, email=no" />
17 <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
18 <!-- 启用360浏览器的极速模(webkit) -->
19 <meta name="renderer" content="webkit">
20 <!-- 避免IE使用兼容模式 -->
21 <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑 -->
23 <meta name="HandheldFriendly" content="true">
24 <!-- 微软的老式浏览 -->
25 <meta name="MobileOptimized" content="320">
26 <!-- uc强制竖屏 -->
27 <!-- <meta name="screen-orientation" content="portrait"> -->
28 <!-- QQ强制竖屏 -->
29 <!-- <meta name="x5-orientation" content="portrait"> -->
30 <!-- 不能旋转，问题出在这 -->
31 <!-- UC强制全屏 -->
32 <meta name="full-screen" content="yes">
33 <!-- QQ强制全屏 -->
34 <meta name="x5-fullscreen" content="true">
35 <!-- UC应用模式 -->
36 <meta name="browsermode" content="application">
37 <!-- QQ应用模式 -->
38 <meta name="x5-page-mode" content="app">
39 <!-- windows phone -->
40 <meta name="msapplication-tap-highlight" content="no">
41 <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
42 <style>
43 * {
44 margin: 0;
45 padding: 0;
46 }
47
48 html, body {
49 height: 100%;
50 width: 100%;
51 margin: 0;
52 padding: 0;
53 background-color: grey;
54 }
55 </style>
56 <!-- 云手机对接sdk,请联系项目经理获取最新版本 -->
57 <script type="text/javascript" src="js/BgsSdk.min.1.7.4.js"></script>
58 <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
59
60 <script>
61 var uuid = 'test123'; // 有应用来定义，主要用来区分用户
62 const getServerTokenUrl = 'https://xxxx/getServerToken'; // 后台服务可以参考后台demo 方案
63 var serverToken = ''; // 从业务后台获取
64 async function getServerToken() {
65 const res = await axios.post(getServerTokenUrl, {
66 uuid: uuid
67 });
68 if(res.code !== 0) {
69 console.log('getServerToken fail res:' + JSON.stringify(res));
70 return;
71 }
72 serverToken = res.data.serverToken;
73 // 开始链接
74 BgsSdk.startPhone(serverToken);
75 }
76 function startPhone() {
77 // 初始化参数
78 var params = {
79 viewId: 'phoneBox', // 必填
80 uuid: uuid, // 必填
81 callbacks: {
82 // 初始化失败回调
83 onInitFail: function(code,msg) {
84 console.log('on init code:' + code + ' msg:' + msg);
85 },
86 onInitSuccess: function() {
87 console.log('on init success:');
88 },
89 // 链接成功回调
90 onConnectSuccess: function () {
91 console.log('on success');
92 },
93 // 链接失败回调
94 onConnectFail: function (code, msg) {
95 console.log('on fail code:' + code);
96 stopPhone();
97 },
98 // 结束回调
99 onStoped: async function() {
100 // 已断开云手机
101 console.log('on stoped');
102 }
103 }
104 }
105 // 开始初始化
106 let initRet = BgsSdk.initPhone(params);
107 if (initRet) {
108 // 获取serverToken
109 getServerToken();
110 }
111
112 }
113 // 结束试玩
114 function stopPhone() {
115 BgsSdk.stopPhone();
116 }
117
118 </script>
119 </head>
120
121 <body onload="startPhone();">
122 <input type="button" value="停止" onclick="stopPhone()" style="position: fixed;top: 0; left: 0;">
123 <div class="phoneBox" id="phoneBox" style="background-color: grey;width: 100%;height: 100%">
124 </div>
125 </body>
126 </html>4.4 运行效果
5 获取更多帮助文档
接入云手机服务后，进入云手机管理控制台，点击控制台右上角“帮助文档”解锁更多