[*] 删除房间
This commit is contained in:
acgist
@@ -21,9 +21,6 @@ input[type=text]:focus,textarea:focus,input[type=text]:hover,textarea:hover{bord
|
||||
input::-webkit-calendar-picker-indicator{color:#1155AA;background:none;}
|
||||
/**容器*/
|
||||
.taoyao{text-align:center;}
|
||||
/**直播*/
|
||||
.taoyao .live > .video{width:100%;height:100%;}
|
||||
.taoyao .live .handler{position:fixed;width:100%;bottom:2rem;font-size:2rem;}
|
||||
/**会议*/
|
||||
.taoyao .handler a{cursor:pointer;}
|
||||
.taoyao > .handler{font-size:2rem;padding:1rem 0;width:100%;}
|
||||
|
||||
@@ -2,17 +2,127 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>桃夭</title>
|
||||
<title>会议</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/font.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css" />
|
||||
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
|
||||
<script type="text/javascript" src="./javascript/taoyao.js"></script>
|
||||
<style type="text/css">
|
||||
a{width:50%;height:100%;position:fixed;text-align:center;line-height:100%;font-size:4rem;display:flex;align-items:center;justify-content:center;}
|
||||
a:last-child{left:50%;}
|
||||
a:hover{color:#fff;background:#060;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="./live.html">直播</a>
|
||||
<a href="./meeting.html">会议</a>
|
||||
<div class="taoyao" id="app">
|
||||
<div class="handler">
|
||||
<a class="create icon-make-group" title="创建会议" @click="create"></a>
|
||||
<a class="invite icon-address-book" title="邀请会议" @click="invite"></a>
|
||||
<a class="enter icon-enter" title="进入会议" @click="enter"></a>
|
||||
<a class="leave icon-exit" title="离开会议" @click="leave"></a>
|
||||
<a class="close icon-switch" title="关闭会议" @click="close"></a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="meeting me">
|
||||
<div class="video">
|
||||
<video id="local"></video>
|
||||
</div>
|
||||
<div class="handler">
|
||||
<a class="audio icon-volume-medium" title="音频状态" @click="audioSelf"></a>
|
||||
<a class="video icon-play2" title="视频状态" @click="videoSelf"></a>
|
||||
<a class="record icon-radio-checked" title="录制视频" @click="recordSelf"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meeting" v-for="client in this.remoteClient" :key="client.sn">
|
||||
<div class="video">
|
||||
<video v-bind:id="client.sn"></video>
|
||||
</div>
|
||||
<div class="handler">
|
||||
<a class="audio" title="音频状态" v-bind:class="client.audioStatus?'icon-volume-medium':'icon-volume-mute2'" @click="audio(client.sn)"></a>
|
||||
<a class="video" title="视频状态" v-bind:class="client.videoStatus?'icon-play2':'icon-stop'" @click="video(client.sn)"></a>
|
||||
<a class="record icon-radio-checked" title="录制视频" v-bind:class="client.recordStatus?'active':''" @click="record(client.sn)"></a>
|
||||
<a class="expel icon-cancel-circle" title="踢出会议" @click="expel(client.sn)"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
taoyao: null,
|
||||
remoteClient: [],
|
||||
meetingId: null
|
||||
},
|
||||
mounted() {
|
||||
// 设置帐号
|
||||
let sn = prompt('你的账号', signalConfig.sn);
|
||||
signalConfig.sn = sn;
|
||||
// 加载桃夭
|
||||
let self = this;
|
||||
this.taoyao = new Taoyao('local');
|
||||
this.remoteClient = this.taoyao.remoteClient;
|
||||
// 打开信令通道
|
||||
this.taoyao
|
||||
.buildChannel(self.callback)
|
||||
.then(e => console.debug('信令通道连接成功'));
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
// 信令回调：true表示已经处理；false表示没有处理；
|
||||
callback: function(data) {
|
||||
let self = this;
|
||||
switch(data.header.pid) {
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 创建会议
|
||||
create: function(event) {
|
||||
let self = this;
|
||||
this.taoyao.meetingCreate(data => {
|
||||
self.taoyao.meetingEnter(data.body.id);
|
||||
return true;
|
||||
});
|
||||
},
|
||||
// 会议邀请
|
||||
invite: function(sn) {
|
||||
},
|
||||
// 进入会议
|
||||
enter: function(sn) {
|
||||
let id = prompt('房间标识');
|
||||
let password = prompt('房间密码');
|
||||
if(id) {
|
||||
this.taoyao.meetingEnter(id);
|
||||
}
|
||||
},
|
||||
// 离开会议
|
||||
leave: function(sn) {
|
||||
},
|
||||
// 关闭会议
|
||||
close: function(sn) {
|
||||
},
|
||||
// 控制音频
|
||||
audio: function(sn) {
|
||||
this.client(sn).audio = !this.client(sn).audio;
|
||||
},
|
||||
// 控制视频
|
||||
video: function(sn) {
|
||||
this.client(sn).video = !this.client(sn).video;
|
||||
},
|
||||
// 录制视频
|
||||
record: function(sn) {
|
||||
this.client(sn).record = !this.client(sn).record;
|
||||
},
|
||||
// 踢出会议
|
||||
expel: function(sn) {
|
||||
},
|
||||
// 控制音频
|
||||
audioSelf: function(sn) {
|
||||
},
|
||||
// 控制视频
|
||||
videoSelf: function(sn) {
|
||||
},
|
||||
// 录制视频
|
||||
recordSelf: function(sn) {
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -69,9 +69,6 @@ const signalConfig = {
|
||||
};
|
||||
/** 信令协议 */
|
||||
const signalProtocol = {
|
||||
/** 直播信令 */
|
||||
live: {
|
||||
},
|
||||
/** 媒体信令 */
|
||||
media: {
|
||||
/** 发布 */
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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/taoyao.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="taoyao" id="taoyao">
|
||||
<div class="live">
|
||||
<div class="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="close icon-switch" title="关闭直播"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const live = document.getElementById('taoyao');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,128 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>会议</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/font.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css" />
|
||||
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
|
||||
<script type="text/javascript" src="./javascript/taoyao.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="taoyao" id="app">
|
||||
<div class="handler">
|
||||
<a class="create icon-make-group" title="创建会议" @click="create"></a>
|
||||
<a class="invite icon-address-book" title="邀请会议" @click="invite"></a>
|
||||
<a class="enter icon-enter" title="进入会议" @click="enter"></a>
|
||||
<a class="leave icon-exit" title="离开会议" @click="leave"></a>
|
||||
<a class="close icon-switch" title="关闭会议" @click="close"></a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="meeting me">
|
||||
<div class="video">
|
||||
<video id="local"></video>
|
||||
</div>
|
||||
<div class="handler">
|
||||
<a class="audio icon-volume-medium" title="音频状态" @click="audioSelf"></a>
|
||||
<a class="video icon-play2" title="视频状态" @click="videoSelf"></a>
|
||||
<a class="record icon-radio-checked" title="录制视频" @click="recordSelf"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meeting" v-for="client in this.remoteClient" :key="client.sn">
|
||||
<div class="video">
|
||||
<video v-bind:id="client.sn"></video>
|
||||
</div>
|
||||
<div class="handler">
|
||||
<a class="audio" title="音频状态" v-bind:class="client.audioStatus?'icon-volume-medium':'icon-volume-mute2'" @click="audio(client.sn)"></a>
|
||||
<a class="video" title="视频状态" v-bind:class="client.videoStatus?'icon-play2':'icon-stop'" @click="video(client.sn)"></a>
|
||||
<a class="record icon-radio-checked" title="录制视频" v-bind:class="client.recordStatus?'active':''" @click="record(client.sn)"></a>
|
||||
<a class="expel icon-cancel-circle" title="踢出会议" @click="expel(client.sn)"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
taoyao: null,
|
||||
remoteClient: [],
|
||||
meetingId: null
|
||||
},
|
||||
mounted() {
|
||||
// 设置帐号
|
||||
let sn = prompt('你的账号', signalConfig.sn);
|
||||
signalConfig.sn = sn;
|
||||
// 加载桃夭
|
||||
let self = this;
|
||||
this.taoyao = new Taoyao('local');
|
||||
this.remoteClient = this.taoyao.remoteClient;
|
||||
// 打开信令通道
|
||||
this.taoyao
|
||||
.buildChannel(self.callback)
|
||||
.then(e => console.debug('信令通道连接成功'));
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
// 信令回调：true表示已经处理；false表示没有处理；
|
||||
callback: function(data) {
|
||||
let self = this;
|
||||
switch(data.header.pid) {
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 创建会议
|
||||
create: function(event) {
|
||||
let self = this;
|
||||
this.taoyao.meetingCreate(data => {
|
||||
self.taoyao.meetingEnter(data.body.id);
|
||||
return true;
|
||||
});
|
||||
},
|
||||
// 会议邀请
|
||||
invite: function(sn) {
|
||||
},
|
||||
// 进入会议
|
||||
enter: function(sn) {
|
||||
let id = prompt('房间标识');
|
||||
let password = prompt('房间密码');
|
||||
if(id) {
|
||||
this.taoyao.meetingEnter(id);
|
||||
}
|
||||
},
|
||||
// 离开会议
|
||||
leave: function(sn) {
|
||||
},
|
||||
// 关闭会议
|
||||
close: function(sn) {
|
||||
},
|
||||
// 控制音频
|
||||
audio: function(sn) {
|
||||
this.client(sn).audio = !this.client(sn).audio;
|
||||
},
|
||||
// 控制视频
|
||||
video: function(sn) {
|
||||
this.client(sn).video = !this.client(sn).video;
|
||||
},
|
||||
// 录制视频
|
||||
record: function(sn) {
|
||||
this.client(sn).record = !this.client(sn).record;
|
||||
},
|
||||
// 踢出会议
|
||||
expel: function(sn) {
|
||||
},
|
||||
// 控制音频
|
||||
audioSelf: function(sn) {
|
||||
},
|
||||
// 控制视频
|
||||
videoSelf: function(sn) {
|
||||
},
|
||||
// 录制视频
|
||||
recordSelf: function(sn) {
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user