qq27800734/taoyao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] 请求回调

Browse Source
This commit is contained in:
acgist
2022-11-13 13:24:37 +08:00
parent 8d1392a6da
commit d636d6b44a
4 changed files with 83 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
taoyao-server/src/main/resources/static/css/style.css
View File

@@ -34,3 +34,6 @@ input::-webkit-calendar-picker-indicator{color:#1155AA;background:none;}
.taoyao .meeting > .video video{width:100%;height:100%;}
.taoyao .meeting .handler{position:absolute;bottom:0rem;text-align:center;width:100%;background:rgba(0,0,0,0.2);padding:0.2rem 0;}
.taoyao .meeting .handler a{color:#fff;}
.taoyao .meeting .handler a.record:hover{color:#060!important;}
.taoyao .meeting .handler a.record.active{color:#C00;}
.taoyao .meeting .handler a.kick:hover{color:#C00;}

9
taoyao-server/src/main/resources/static/javascript/app.js Normal file
View File

@@ -0,0 +1,9 @@
/** 桃夭WebRTC终端应用功能 */
// 样式操作
function classSwitch(e, className) {
if(e.className.indexOf(className) >= 0) {
e.className = e.className.replace(className, '').replace(/(^\s)|(\s$)/g, "");
} else {
e.className = e.className + ' ' + className;
}
}

43
taoyao-server/src/main/resources/static/javascript/taoyao.js
View File

@@ -1,6 +1,4 @@
/**
* 桃夭WebRTC终端示例
*/
/** 桃夭WebRTC终端核心功能 */
/** 配置 */
const config = {
// 当前终端SN
@@ -77,8 +75,10 @@ function Taoyao(
this.clientMedia = {};
/** 信令通道 */
this.signalChannel = null;
/** 初始 */
this.init = function() {
/** 发送信令 */
this.push = null;
/** 检查设备 */
this.checkDevice = function() {
let self = this;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
navigator.mediaDevices.enumerateDevices()
@@ -153,6 +153,10 @@ function Taoyao(
this.buildChannel = function(callback) {
this.signalChannel = signalChannel;
this.signalChannel.connect(this.webSocket, callback);
// 不能直接this.push = this.signalChannel.push这样导致this对象错误
this.push = function(data, callback) {
this.signalChannel.push(data, callback)
};
};
/** 本地媒体 */
this.buildLocalMedia = function() {
@@ -221,7 +225,7 @@ const protocol = {
},
"body": body
};
return JSON.stringify(message);
return message;
}
};
/** 信令消息 */
@@ -233,6 +237,8 @@ const signalChannel = {
address: null,
/** 回调 */
callback: null,
/** 回调事件 */
callbackMapping: new Map(),
/** 心跳时间 */
heartbeatTime: 10 * 1000,
/** 心跳定时器 */
@@ -256,7 +262,7 @@ const signalChannel = {
let self = this;
self.heartbeatTimer = setTimeout(function() {
if (self.channel && self.channel.readyState == WebSocket.OPEN) {
self.channel.send(protocol.buildProtocol(config.sn, protocol.pid.heartbeat));
self.push(protocol.buildProtocol(config.sn, protocol.pid.heartbeat));
self.heartbeat();
} else {
console.log('发送心跳失败', self.channel);
@@ -297,7 +303,7 @@ const signalChannel = {
self.channel = new WebSocket(address);
self.channel.onopen = function(e) {
console.log('信令通道打开', e);
self.channel.send(protocol.buildProtocol(
self.push(protocol.buildProtocol(
config.sn,
protocol.pid.register,
{
@@ -329,11 +335,30 @@ const signalChannel = {
};
self.channel.onmessage = function(e) {
console.log('信令消息', e.data);
let data = JSON.parse(e.data);
// 注册回调
if(callback) {
callback(JSON.parse(e.data));
callback(data);
}
// 请求回调
if(self.callbackMapping.has(data.header.id)) {
self.callbackMapping.get(data.header.id)();
self.callbackMapping.delete(data.header.id);
}
};
});
},
/** 信令消息 */
push: function(data, callback) {
// 注册回调
if(data && callback) {
this.callbackMapping.set(data.header.id, callback);
}
if(data && data.header) {
this.channel.send(JSON.stringify(data));
} else {
this.channel.send(data);
}
}
};
/*

49
taoyao-server/src/main/resources/static/meeting.html
View File

@@ -5,16 +5,17 @@
<title>会议</title>
<link rel="stylesheet" type="text/css" href="./css/font.min.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./javascript/app.js"></script>
<script type="text/javascript" src="./javascript/taoyao.js"></script>
</head>
<body>
<div class="taoyao">
<div class="handler">
<a class="create icon-svg" title="创建房间"></a>
<a class="invite icon-address-book" title="邀请房间"></a>
<a class="enter icon-enter" title="进入房间"></a>
<a class="leave icon-exit" title="离开房间"></a>
<a class="close icon-switch" title="关闭房间"></a>
<a class="create icon-svg" title="创建房间" onclick="create"></a>
<a class="invite icon-address-book" title="邀请房间" onclick="invite"></a>
<a class="enter icon-enter" title="进入房间" onclick="enter"></a>
<a class="leave icon-exit" title="离开房间" onclick="leave"></a>
<a class="close icon-switch" title="关闭房间" onclick="close"></a>
</div>
<div class="list" id="list">
<div class="meeting me">
@@ -22,10 +23,10 @@
<video id="local"></video>
</div>
<div class="handler">
<a class="audio icon-volume-medium" title="音频状态"></a>
<a class="video icon-play2" title="视频状态"></a>
<a class="record icon-radio-checked" title="录制视频"></a>
<a class="kick icon-cancel-circle" title="踢出房间"></a>
<a class="audio icon-volume-medium" title="音频状态" onclick="audio"></a>
<a class="video icon-play2" title="视频状态" onclick="video"></a>
<a class="record icon-radio-checked" title="录制视频" onclick="record(this)"></a>
<a class="kick icon-cancel-circle" title="踢出房间" onclick="kick"></a>
</div>
</div>
</div>
@@ -50,8 +51,8 @@
list.appendChild(child);
}
const taoyao = new Taoyao();
// 初始
taoyao.init();
// 检查设备
taoyao.checkDevice();
// 配置媒体
taoyao.request('/config/media', {}, 'GET', false)
.then(response => {
@@ -68,11 +69,35 @@
// 信令回调
function callback(data) {
switch(data.header.pid) {
case 1000:
case protocol.pid.heartbeat:
// 心跳
break;
case protocol.pid.register:
// 录制
break;
}
}
// 创建房间
function create() {
}
// 进入房间
function enter() {
}
// 声音控制
function audio() {
}
// 视频控制
function video() {
}
// 录制视频
function record(e) {
taoyao.push(protocol.buildProtocol(config.sn, protocol.pid.heartbeat), () => {
classSwitch(e, 'active');
});
}
// 踢出会议
function kick() {
}
// 信令通道
/*
taoyao.buildLocalMedia()