更新时间：2026-04-10 GMT+08:00
代码示例
将开发指导中准备样式、引入SDK、获取鉴权信息，启动串流全部功能（除可选功能、proxy.js）整合为如下完整demo。
<!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%;
}
#left-box {
width: 30%;
margin: 30px;
}
#right-box {
width: 30%;
height: 90%;
overflow: auto;
border: solid 1px #000;
margin: 30px;
border-radius: 4px;
}
input {
width: 500px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
button {
padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<div id="left-box">
<p style="color:red">输入以下参数，单击 初始化player并启动串流 按钮发起串流</p>
<label for="">domain:</label>
<input id="domain" type="text" value=""/><br>
<label for="">user:</label>
<input id="user" type="text" value=""/><br>
<label for="">password:</label>
<input id="password" type="password" value=""/><br>
<label for="">instance_id:</label>
<input id="instance_id" type="text" value=""/><br>
<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-debug.js"></script>
<script type="text/javascript">
var client = new KPClient();
var player = null;
let deviceInfo;
let ele = document.getElementById('right-box');
const domain = document.getElementById("domain").value;
const user = document.getElementById("user").value;
const password = document.getElementById("password").value;
const instanceId = document.getElementById("instance_id").value;
async function refreshIamToken() {
return fetch("http://localhost:8080/v3/auth/tokens",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"auth": {
"identity": {
"methods": [
"password"
],
"password": {
"user": {
"domain": {
"name": domain
},
"name": user,
"password": password
}
}
},
"scope": {
"domain": {
"name": domain
}
}
}
}),
mode: "cors"
})
.then(response => {
const headers = response.headers;
for (let [key, value] of headers.entries()) {
console.log(`${key}: ${value}`);
}
return headers.get('x-subject-token');
});
}
async function refreshDeviceToken() {
const token = await refreshIamToken();
return fetch(`http://localhost:8080/v1/instances/${instanceId}/auth`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"x-auth-token": token,
"x-user-id": "123456",
"x-request-id": "0000123456"
},
mode: "cors"
})
.then(resp => resp.text())
.then(data => {
let json = JSON.parse(data);
if (json["error_code"] === "0") {
let deviceToken = json["data"]["device_token"];
let deviceId = json["data"]["resource"]["device_id"];
let signalUrl = json["data"]["resource"]["rtc"]["ice_signaling"]["signaling_url"]
return {deviceToken, deviceId, signalUrl};
} else {
// 请求异常
alert(json["error_msg"]);
}
});
}
async 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;
});
const {deviceToken, deviceId, signalUrl} = await refreshDeviceToken();
deviceInfo = {
rtcDeviceId: deviceId,
rtcToken: deviceToken,
rtcSignalUrl: signalUrl
}
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> 父主题： 集成SDK开发H5串流页面
