快速开始

本章节以H5串流开发为例，提供一个简单开发示例帮助用户理解Html开发流程以及如何集成KooPhone JavaScript SDK，主要包含2两个基本功能，发起（云手机/云应用）连接与断开（云手机/云应用）连接。

准备工作

准备H5网页端开发的环境和工具。

开发工具：WebStrom （推荐最新版本）
NodeJs版本：>=18
JavaScript版本：ES8及以上版本

步骤一：创建工程

创建新工程。
1. 打开WebStrom，单击“New Project”。
2. 选择本地项目路径，语言选择 “JavaScript” ，单击 “Create”。
集成JS SDK。
1. 通过下载KooPhone JS SDK包并解压缩，得到kp-client-xx.js。
2. 在工程根目录创建js文件夹，将kp-client-xx.js复制到此文件夹，最终工程结构如图1所示。
  图1 js工程结构

步骤二：获取鉴权信息

请求鉴权信息之前，需要做如下准备：

已购买KooPhone云手机产品。
已获取IAM租户鉴权信息，可参考认证鉴权。
注意：IAM租户鉴权信息需严格遵循官网指导文档开发意见获取，不可频繁调用，避免产生不必要的问题。

参考租户实例串流前获取设备的device_token，获取串流所需参数：

device_token：鉴权Token
device_id：设备ID
signaling_url：信令服务器地址

步骤二：获取鉴权信息为手动获取鉴权信息进入串流的方案，在3中提供了自动获取鉴权并进入串流的使用指导，方便用户直接进行工程化部署。

步骤三：开发Demo及启动串流

开发Demo。

在工程根目录创建demo.html文件，并将如下代码复制到该文件中。把代码中src引入JS SDK代码，修改为实际下载到的JS文件名（JS文件名可参考2.a，JS SDK包解压缩后的文件名）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sender</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }


        body {
            margin: 0;
        }


        .box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }


        #container {
            width: 600px;
            height: 100%;
        }


        input {
            width: 500px;
            height: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
        }


        button {
            padding: 5px;
        }


        #right-box {
            width: 30%;
            height: 90%;
            overflow: auto;
            border: solid 1px #000;
            margin: 30px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div style="width:30%;margin: 30px;">
        <p style="color:red">输入以下三个参数，单击 初始化player并启动串流 按钮发起串流</p>
        <label for="">device_token:</label>
        <input id="token" type="text" value=""/><br>
        <label for="">device_id:</label>
        <input id="device_id" type="text" value=""/><br>
        <label for="">url:</label>
        <input id="url" type="text" value=""/><br>
        <button onclick="enter()">初始化player并启动串流</button>
        <br>
        <button onclick="closeMediaStream()">退出串流</button>
        <br>
    </div>
    <div id="container"></div>
    <div id="right-box"></div>
</div>


<script type="text/javascript" src="./js/kp-client-xx.js"></script>
<script type="text/javascript">
    var client = new KPClient();
    var player = null;
    let deviceInfo;
    let ele = document.getElementById('right-box');


    function enter() {
        let obj = {
            mountPoint: document.getElementById('container')
        };
        player = client.createPlayer(obj);
        ele.innerHTML += "<br/>" + "-----------isBrowserSupport:" + player.isBrowserSupport();
        player.on("onStateChange", function (event) {
            ele.innerHTML += "<br/>" + "-----------state changed:" + event.state;
        });
        player.on("onClose", function (event) {
            ele.innerHTML += "<br/>" + "-----------close:" + event.code + " " + event.message;
        });
        deviceInfo = {
            rtcDeviceId: document.getElementById("device_id").value,
            rtcToken: document.getElementById("token").value,
            rtcSignalUrl: document.getElementById("url").value
        }
        window.sessionStorage.setItem('rtc', JSON.stringify(deviceInfo));
        if (deviceInfo) {
            ele.innerHTML += "<br/>" + "-----------创建KPPlayer";
            player.initMediaStream({
                boxid: deviceInfo.rtcDeviceId,
                token: deviceInfo.rtcToken,
                uuid: deviceInfo.rtcToken,
                signaling_url: deviceInfo.rtcSignalUrl
            });
        }
    }


    function closeMediaStream() {
        ele.innerHTML += "<br/>" + "-----------closeMediaStream";
        player.closeMediaStream();
    }
</script>
</body>
</html>

启动串流。
1. 在WebStrom中打开demo.html页面，浏览器选择PC中已安装的浏览器。
  图2 demo页面
2. 将步骤二：获取鉴权信息中得到的鉴权信息device_token、device_id、signaling_url填入html页面中。
3. 单击“初始化player并启动串流”，如图3所示，中间为串流播放区域，右侧为串流状态信息展示。
  图3 初始化player并启动串流
4. 串流结束之后，单击“退出串流”结束串流。
  图4 退出串流