# 快速开始 本章节以H5串流开发为例，提供一个简单开发示例帮助用户理解Html开发流程以及如何集成KooPhone JavaScript SDK，主要包含2两个基本功能，发起（云手机/云应用）连接与断开（云手机/云应用）连接。 #### 准备工作 准备H5网页端开发的环境和工具。 - 开发工具：WebStorm （推荐最新版本） - NodeJs版本：\>=18 - JavaScript版本：ES8及以上版本 - 下载[KooPhone JS SDK包](https://download.huaweicloud-koophone.com/app/kp-client_26.3.0.js) #### 步骤一 ：创建工程 1. 创建新工程。 1. 打开WebStorm，单击"New Project"。 2. 选择本地项目路径，语言选择 "JavaScript" ，单击 "Create"。 2. 集成JS SDK。 1. 通过下载[KooPhone JS SDK包](https://download.huaweicloud-koophone.com/app/kp-client_26.3.0.js)并解压缩，得到kp-client-xx.js。 2. 在工程根目录创建js文件夹，将kp-client-xx.js复制到此文件夹，最终工程结构如[图1]所示。 图1js工程结构 ![](https://support.huaweicloud.com/devg-koophone/zh-cn_image_0000002530767082.png "点击放大") #### 步骤二：获取鉴权信息 请求鉴权信息之前，需要做如下准备： - 已购买KooPhone云手机产品。 - 已获取IAM租户鉴权信息，可参考[认证鉴权](https://support.huaweicloud.com/api-koophone/kp_01_0005.html)。 注意：IAM租户鉴权信息需严格遵循官网指导文档开发意见获取，不可频繁调用，避免产生不必要的问题。 参考[租户实例串流前获取设备的device_token](https://support.huaweicloud.com/api-koophone/GetDeviceToken.html)，获取串流所需参数： - device_token：鉴权Token - device_id：设备ID - signaling_url：信令服务器地址 ![](https://support.huaweicloud.com/devg-koophone/public_sys-resources/note_3.0-zh-cn.png) [步骤二：获取鉴权信息]为手动获取鉴权信息进入串流的方案，在[3](https://support.huaweicloud.com/devg-koophone/kp-00_00017.html#kp-00_00017__li140161653416)中提供了自动获取鉴权并进入串流的使用指导，方便用户直接进行工程化部署。 #### 步骤三：开发Demo及启动串流 1. 开发Demo。 在工程根目录创建demo.html文件，并将如下代码复制到该文件中。把代码中src引入JS SDK代码，修改为实际下载到的JS文件名（JS文件名可参考[2.a]，JS SDK包解压缩后的文件名）。 ``` sender

输入以下三个参数，单击 初始化player并启动串流 按钮发起串流






``` 2. 启动串流。 1. 在WebStorm中打开demo.html页面，浏览器选择PC中已安装的浏览器。 图2demo页面 ![](https://support.huaweicloud.com/devg-koophone/zh-cn_image_0000002561767007.png "点击放大") 2. 将[步骤二：获取鉴权信息]中得到的鉴权信息device_token、device_id、signaling_url填入html页面中。 3. 单击"初始化player并启动串流"，如[图3]所示，中间为串流播放区域，右侧为串流状态信息展示。 图3初始化player并启动串流 ![](https://support.huaweicloud.com/devg-koophone/zh-cn_image_0000002561846997.png "点击放大") 4. 串流结束之后，单击"退出串流"结束串流。 图4退出串流 ![](https://support.huaweicloud.com/devg-koophone/zh-cn_image_0000002530927076.png "点击放大")