mirror of
https://github.com/tl-open-source/tl-rtc-file.git
synced 2025-11-01 19:12:34 +08:00
feat: ui交互界面改版
feat: 支持发布公告 feat: 修复一些已知问题
This commit is contained in:
iamtsm
@@ -17,13 +17,12 @@
|
||||
|
||||
#### 说明 ： 示例网站是在公网环境中，为了更好的展示传输功能，所以默认开启了中继服务，如果各位是验证能否走p2p传输，只需关闭中继服务，且p2p检测后，如果能看到内网环境ip，webrtc连接大概率可以走p2p，跑到10M/s轻轻松松，公网环境下的内网用户一般情况下来说也会自动识别到的，如果内网速度慢，可以反馈留言，会尽快优化处理
|
||||
|
||||
####
|
||||
|
||||
#### 体验 ： https://im.iamtsm.cn/file
|
||||
|
||||
|
||||
**qq交流群 : 624214498**
|
||||
|
||||
|
||||
|
||||
## 准备
|
||||
|
||||
安装node，npm后进入项目目录
|
||||
|
||||
@@ -62,7 +62,18 @@ module.exports = {
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [
|
||||
new UglifyJSPlugin()
|
||||
new UglifyJSPlugin({
|
||||
uglifyOptions: {
|
||||
output: {
|
||||
comments: true,
|
||||
beautify: true,
|
||||
},
|
||||
compress: {
|
||||
collapse_vars: false,
|
||||
reduce_vars: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
@@ -46,7 +46,6 @@ module.exports = {
|
||||
filename: '[name].min.css',
|
||||
ignoreOrder: false,
|
||||
}),
|
||||
new watchNewEntry(),
|
||||
],
|
||||
resolve: {
|
||||
extensions: [
|
||||
@@ -62,7 +61,46 @@ module.exports = {
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [
|
||||
new UglifyJSPlugin()
|
||||
new UglifyJSPlugin({
|
||||
uglifyOptions: {
|
||||
output: {
|
||||
comments: false, // 移除所有注释
|
||||
beautify: false, // 不要美化输出，以使其更加紧凑
|
||||
},
|
||||
compress: {
|
||||
booleans: true,
|
||||
collapse_vars: true,
|
||||
comparisons: true,
|
||||
conditionals: true,
|
||||
dead_code: true,
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
evaluate: true,
|
||||
hoist_funs: true,
|
||||
hoist_props: true,
|
||||
hoist_vars: true,
|
||||
if_return: true,
|
||||
inline: true,
|
||||
join_vars: true,
|
||||
keep_infinity: true,
|
||||
loops: true,
|
||||
negate_iife: true,
|
||||
properties: true,
|
||||
reduce_funcs: true,
|
||||
reduce_vars: true,
|
||||
sequences: true,
|
||||
side_effects: true,
|
||||
switches: true,
|
||||
toplevel: true,
|
||||
typeofs: true,
|
||||
unused: true,
|
||||
},
|
||||
mangle: {
|
||||
toplevel: true,
|
||||
},
|
||||
extractComments: true,
|
||||
},
|
||||
})
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
1282
res/css/index.css
1282
res/css/index.css
File diff suppressed because it is too large
Load Diff
@@ -17,7 +17,7 @@
|
||||
font-family: Rubik,Fallback;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgb(128 117 103), rgb(252, 182, 159));
|
||||
background-image: linear-gradient(to right, #C5EDFF, #E6F7FF, #E6F7FF, #E6F7FF, #E6F7FF, #C5EDFF, #C5EDFF);
|
||||
}
|
||||
.layui-nav{
|
||||
text-align: right;
|
||||
@@ -31,7 +31,7 @@
|
||||
top: 15px;
|
||||
font-size: 20px;
|
||||
font-weight:bolder;
|
||||
-webkit-text-stroke:1px #ffffff;
|
||||
-webkit-text-stroke:1px black;
|
||||
-webkit-text-fill-color:transparent;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
@@ -48,13 +48,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
.tl-rtc-file-intro-main{
|
||||
color: #fcfcfc;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.tl-rtc-file-intro-tag{
|
||||
margin-top: 30px;
|
||||
color: #fcfcfc;
|
||||
color: black;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
width: 70%;
|
||||
@@ -82,7 +82,7 @@
|
||||
.tl-rtc-file-goto-btn{
|
||||
width: 20%;
|
||||
padding: 0 25px;
|
||||
background-color: #b6c95e;
|
||||
background-color: #5963af;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
@@ -133,17 +133,17 @@
|
||||
|
||||
<body class="layui-layout-body">
|
||||
|
||||
<a href="#" class="tl-rtc-file-logo"> tl-rtc-file </a>
|
||||
<a href="#" class="tl-rtc-file-logo" > tl-rtc-file </a>
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item"><a target="_blank" onclick="donate()">获取捐赠版</a></li>
|
||||
<li class="layui-nav-item"><a target="_blank" onclick="donate()" style="color: black; font-weight: bold;">获取捐赠版</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://github.com/iamtsm/tl-rtc-file" style="margin-left: 20px;" target="_blank">
|
||||
<svg class="tl-rtc-file-github-logo" viewBox="0 0 1024 1024" p-id="1341" width="128" height="128">
|
||||
<path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#ffffff" p-id="1342"></path>
|
||||
<path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#000000" p-id="1342"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="home_en.html">EN</a></li>
|
||||
<li class="layui-nav-item" ><a style="color: black; font-weight: bold;" href="home_en.html">EN</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tl-rtc-file-intro-content">
|
||||
@@ -174,7 +174,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tl-rtc-file-foot-content">
|
||||
<a href="https://github.com/iamtsm" target="_blank">Copyright @ 2021 iamtsm</a>
|
||||
<a href="https://github.com/iamtsm" target="_blank">Copyright @ 2021 ~ 2023 iamtsm</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
@@ -196,7 +196,7 @@
|
||||
, btnAlign: 'c'
|
||||
, moveType: 1
|
||||
, content: `
|
||||
<div style="padding: 30px; line-height: 22px; background-color: #ad4f4f; color: #fff; font-weight: bold;">
|
||||
<div style="padding: 30px; line-height: 22px; background-color: #475a97; color: #fff; font-weight: bold;">
|
||||
<div style="text-align: center;line-height: 40px;">如需支持功能定制，或技术支持，加群联系我即可</div>
|
||||
<div style="text-align: center;line-height: 40px;">
|
||||
qq群交流群 :
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
font-family: Rubik,Fallback;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgb(128 117 103), rgb(252, 182, 159));
|
||||
background-image: linear-gradient(to right, #C5EDFF, #E6F7FF, #E6F7FF, #E6F7FF, #E6F7FF, #C5EDFF, #C5EDFF);
|
||||
}
|
||||
.layui-nav{
|
||||
text-align: right;
|
||||
@@ -31,7 +31,7 @@
|
||||
top: 15px;
|
||||
font-size: 20px;
|
||||
font-weight:bolder;
|
||||
-webkit-text-stroke:1px #ffffff;
|
||||
-webkit-text-stroke:1px black;
|
||||
-webkit-text-fill-color:transparent;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
@@ -48,13 +48,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
.tl-rtc-file-intro-main{
|
||||
color: #fcfcfc;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.tl-rtc-file-intro-tag{
|
||||
margin-top: 30px;
|
||||
color: #fcfcfc;
|
||||
color: black;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
width: 70%;
|
||||
@@ -82,7 +82,7 @@
|
||||
.tl-rtc-file-goto-btn{
|
||||
width: 20%;
|
||||
padding: 0 25px;
|
||||
background-color: #b6c95e;
|
||||
background-color: #5963af;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
@@ -134,15 +134,15 @@
|
||||
|
||||
<a href="#" class="tl-rtc-file-logo"> tl-rtc-file </a>
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item"><a target="_blank" onclick="donate()">Donat</a></li>
|
||||
<li class="layui-nav-item"><a target="_blank" onclick="donate()" style="color: black; font-weight: bold;">Donat</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://github.com/iamtsm/tl-rtc-file" style="margin-left: 20px;" target="_blank">
|
||||
<svg class="tl-rtc-file-github-logo" viewBox="0 0 1024 1024" p-id="1341" width="128" height="128">
|
||||
<path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#ffffff" p-id="1342"></path>
|
||||
<path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#000000" p-id="1342"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="home.html">中文</a></li>
|
||||
<li class="layui-nav-item"><a style="color: black; font-weight: bold;" href="home.html">中文</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tl-rtc-file-intro-content">
|
||||
@@ -199,7 +199,7 @@
|
||||
, btnAlign: 'c'
|
||||
, moveType: 1
|
||||
, content: `
|
||||
<div style="padding: 30px; line-height: 22px; background-color: #ad4f4f; color: #fff; font-weight: bold;">
|
||||
<div style="padding: 30px; line-height: 22px; background-color: #475a97; color: #fff; font-weight: bold;">
|
||||
<div style="text-align: center;line-height: 30px;">If you need support or feature customization or help, just add a qq group to contact me</div>
|
||||
<div style="text-align: center;line-height: 40px;">
|
||||
qq number :
|
||||
|
||||
1098
res/index.html
1098
res/index.html
File diff suppressed because it is too large
Load Diff
@@ -137,51 +137,60 @@ window.tlrtcfile = {
|
||||
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
||||
);
|
||||
},
|
||||
closeFullVideo: function (node, type) {
|
||||
closeFullVideo: function (node, type, from) {
|
||||
let stream = node.srcObject;
|
||||
let nodeId = node.id.substr(0, node.id.length - 5);
|
||||
if (window.layer) {
|
||||
layer.closeAll()
|
||||
}
|
||||
$("#mediaShareRoomList").append(`
|
||||
<div class="swiper-slide mediaShareBlock">
|
||||
<video id="${nodeId}" autoplay playsinline onclick="tlrtcfile.openFullVideo(this,'${type}')"></video>
|
||||
$(`${type === 'screen' ? '#mediaScreenRoomList': '#mediaVideoRoomList'}`).append(`
|
||||
<div class="tl-rtc-file-mask-media-video">
|
||||
<video id="${nodeId}" autoplay playsinline onclick="tlrtcfile.openFullVideo(this,'${type}', '${from}')"></video>
|
||||
</div>
|
||||
`);
|
||||
var video = document.querySelector("#" + nodeId);
|
||||
video.srcObject = stream
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
|
||||
video.addEventListener('loadedmetadata', function() {
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
}, false);
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
video.play();
|
||||
}, false);
|
||||
});
|
||||
|
||||
},
|
||||
openFullVideo: function (node, type) {
|
||||
openFullVideo: function (node, type, from) {
|
||||
let stream = node.srcObject;
|
||||
let nodeId = node.id + "_full";
|
||||
if (window.layer) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
area: [`80%`],
|
||||
area: ["95%", "auto"],
|
||||
shade: 0.3,
|
||||
content: `<video id="${nodeId}" autoplay playsinline onclick="tlrtcfile.closeFullVideo(this, '${type}')"></video>`,
|
||||
content: `
|
||||
${from === 'self' ? '<b style="position: absolute;left: 5px; top: 8px;">自己</b>' : ''}
|
||||
<video style="width:100%;height:100%;border-radius:8px;" id="${nodeId}" autoplay playsinline onclick="tlrtcfile.closeFullVideo(this, '${type}', '${from}')"></video>
|
||||
`,
|
||||
success: function (layero) {
|
||||
document.querySelector("#" + nodeId).parentElement.style.height = "auto"
|
||||
|
||||
let video = document.querySelector("#" + nodeId);
|
||||
video.srcObject = stream;
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
video.addEventListener('loadedmetadata', function() {
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
}, false);
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
video.play();
|
||||
}, false);
|
||||
});
|
||||
|
||||
//并且需要移除父节点
|
||||
document.querySelector("#" + node.id).parentElement.remove();
|
||||
},
|
||||
cancel: function () {
|
||||
tlrtcfile.closeFullVideo(document.querySelector("#" + nodeId), type);
|
||||
tlrtcfile.closeFullVideo(document.querySelector("#" + nodeId), type, from);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -224,6 +233,58 @@ window.tlrtcfile = {
|
||||
animateScroll()
|
||||
}, timeout);
|
||||
},
|
||||
leakBucketQueue : function(){
|
||||
let max, pretime, queueThreshold, queueRate, queue, queueId;
|
||||
|
||||
function init(options = {
|
||||
max : 500, // 最多处理任务数量
|
||||
pretime : Date.now(), // 上次处理任务时间
|
||||
queueThreshold : 20, // 最多并发任务数量，超过进入队列
|
||||
queueRate : 1000, // 队列处理单个任务时间间隔, 单位ms
|
||||
}){
|
||||
this.max = options.max;
|
||||
this.pretime = options.pretime;
|
||||
this.queueThreshold = options.queueThreshold;
|
||||
this.queueRate = options.queueRate;
|
||||
return this;
|
||||
}
|
||||
|
||||
async function doFunc(func, callback){
|
||||
await new Promise(resolve=>{ resolve(func()) })
|
||||
callback();
|
||||
}
|
||||
|
||||
async function addQueue(func, callback){
|
||||
// 1s 超过queueThreshold个任务 ，进入队列
|
||||
if((Date.now() - this.preTime) < 1000 && this.queue > this.queueThreshold){
|
||||
// 队列超过max，丢弃
|
||||
if(this.queue.length > this.max){
|
||||
return
|
||||
}
|
||||
this.queue.push({
|
||||
func : func,
|
||||
callback : callback
|
||||
})
|
||||
return
|
||||
}
|
||||
this.preTime = Date.now();
|
||||
await doFunc();
|
||||
return this;
|
||||
}
|
||||
|
||||
function delQueue(){
|
||||
let that = this;
|
||||
// 定时任务
|
||||
this.queueId = setInterval(async () => {
|
||||
if(that.queue.length > 0){
|
||||
let {func, callback} = that.queue.shift();
|
||||
await doFunc(func, callback);
|
||||
console.log("queue : ",that.queue.length)
|
||||
}
|
||||
}, that.queueRate);
|
||||
return this;
|
||||
}
|
||||
},
|
||||
genNickName: function () {
|
||||
let {adjectives, nouns} = this.nameDatabase()
|
||||
let adjectiveIndex = Math.floor(Math.random() * adjectives.length);
|
||||
|
||||
1414
res/js/index.js
1414
res/js/index.js
File diff suppressed because it is too large
Load Diff
@@ -62,11 +62,11 @@ var screen = new Vue({
|
||||
this.interverlId = setInterval(() => {
|
||||
that.times += 1;
|
||||
window.Bus.$emit("changeScreenTimes", that.times)
|
||||
$("#screen").css("color","#fb0404")
|
||||
$("#screenIcon").css("color","#fb0404")
|
||||
$("#screenTimes").css("color","#fb0404")
|
||||
setTimeout(() => {
|
||||
$("#screen").css("color","#ffffff")
|
||||
$("#screenTimes").css("color","#ffffff")
|
||||
$("#screenIcon").css("color","#000000")
|
||||
$("#screenTimes").css("color","#000000")
|
||||
}, 500)
|
||||
}, 1000);
|
||||
|
||||
@@ -113,6 +113,10 @@ var screen = new Vue({
|
||||
layer.msg("录制完成，请在接收文件列表查看")
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
$("#screenIcon").css("color","#000000")
|
||||
}, 1000);
|
||||
|
||||
return;
|
||||
},
|
||||
},
|
||||
|
||||
@@ -41,7 +41,7 @@ var screenShare = new Vue({
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.stream == null) {
|
||||
if (window.layer) {
|
||||
layer.msg("获取设备屏幕录制权限失败")
|
||||
@@ -53,28 +53,30 @@ var screenShare = new Vue({
|
||||
return;
|
||||
}
|
||||
|
||||
$("#mediaShareRoomList").append(`
|
||||
<div class="swiper-slide mediaShareBlock">
|
||||
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'screen')"></video>
|
||||
$("#mediaScreenRoomList").append(`
|
||||
<div class="tl-rtc-file-mask-media-video">
|
||||
<video style="width:100%;height:30%;" id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'screen', 'self')"></video>
|
||||
</div>
|
||||
`);
|
||||
var video = document.querySelector("#selfMediaShareVideo");
|
||||
video.srcObject = this.stream
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
document.addEventListener('WeixinJSBridgeReady',function(){
|
||||
video.addEventListener('loadedmetadata', function() {
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
},false);
|
||||
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
video.play();
|
||||
}, false);
|
||||
});
|
||||
|
||||
//计算时间
|
||||
this.interverlId = setInterval(() => {
|
||||
that.times += 1;
|
||||
window.Bus.$emit("changeScreenShareTimes", that.times)
|
||||
$("#screenShare").css("fill","#fb0404")
|
||||
$("#screenShareTimes").css("fill","#fb0404")
|
||||
$("#screenShareIcon").css("color","#fb0404")
|
||||
$("#screenShareTimes").css("color","#fb0404")
|
||||
setTimeout(() => {
|
||||
$("#screenShare").css("fill","#ffffff")
|
||||
$("#screenShareTimes").css("fill","#ffffff")
|
||||
$("#screenShareIcon").css("color","#ffffff")
|
||||
$("#screenShareTimes").css("color","#ffffff")
|
||||
}, 500)
|
||||
}, 1000);
|
||||
|
||||
@@ -102,6 +104,10 @@ var screenShare = new Vue({
|
||||
layer.msg("屏幕共享结束，本次共享时长 "+this.times+"秒")
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
$("#screenShareIcon").css("color", "#000000")
|
||||
}, 1000);
|
||||
|
||||
this.stream = null;
|
||||
this.times = 0;
|
||||
|
||||
|
||||
@@ -20,15 +20,19 @@ var videoShare = new Vue({
|
||||
facingMode: true ? "user" : "environment",
|
||||
// 分辨率
|
||||
width: {
|
||||
ideal : 1280
|
||||
ideal : parseInt((document.documentElement.clientWidth - 20) / 2),
|
||||
max : document.documentElement.clientWidth,
|
||||
min : 100
|
||||
},
|
||||
height: {
|
||||
ideal : 720
|
||||
ideal : parseInt((document.documentElement.clientHeight - 20) / 2),
|
||||
max : document.documentElement.clientHeight,
|
||||
min : 100
|
||||
},
|
||||
// 码率
|
||||
frameRate: {
|
||||
ideal: 10,
|
||||
max: 15
|
||||
ideal: 30,
|
||||
max: 50
|
||||
},
|
||||
// 指定设备
|
||||
// deviceId: "",
|
||||
@@ -79,28 +83,30 @@ var videoShare = new Vue({
|
||||
return;
|
||||
}
|
||||
|
||||
$("#mediaShareRoomList").append(`
|
||||
<div class="swiper-slide mediaShareBlock">
|
||||
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'video')"></video>
|
||||
</div>
|
||||
$("#mediaVideoRoomList").append(`
|
||||
<div class="tl-rtc-file-mask-media-video">
|
||||
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'video', 'self')"></video>
|
||||
</div>
|
||||
`);
|
||||
var video = document.querySelector("#selfMediaShareVideo");
|
||||
video.srcObject = this.stream
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
document.addEventListener('WeixinJSBridgeReady',function(){
|
||||
video.addEventListener('loadedmetadata', function() {
|
||||
// ios 微信浏览器兼容问题
|
||||
video.play();
|
||||
},false);
|
||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||
video.play();
|
||||
}, false);
|
||||
});
|
||||
|
||||
//计算时间
|
||||
this.interverlId = setInterval(() => {
|
||||
that.times += 1;
|
||||
window.Bus.$emit("changeVideoShareTimes", that.times)
|
||||
|
||||
$("#videoShare").css("color", "#fb0404")
|
||||
$("#videoShareIcon").css("color", "#fb0404")
|
||||
$("#videoShareTimes").css("color", "#fb0404")
|
||||
setTimeout(() => {
|
||||
$("#videoShare").css("color", "#ffffff")
|
||||
$("#videoShareIcon").css("color", "#ffffff")
|
||||
$("#videoShareTimes").css("color", "#ffffff")
|
||||
}, 500)
|
||||
}, 1000);
|
||||
@@ -123,11 +129,14 @@ var videoShare = new Vue({
|
||||
|
||||
clearInterval(this.interverlId);
|
||||
|
||||
window.Bus.$emit("changeVideoShareTimes", 0)
|
||||
window.Bus.$emit("changeVideoShareTimes", 0);
|
||||
|
||||
if (window.layer) {
|
||||
layer.msg("音视频通话结束，本次通话时长 " + this.times + "秒")
|
||||
}
|
||||
setTimeout(() => {
|
||||
$("#videoShareIcon").css("color", "#000000")
|
||||
}, 1000);
|
||||
|
||||
this.stream = null;
|
||||
this.times = 0;
|
||||
|
||||
@@ -48,7 +48,7 @@ let tokens = [];
|
||||
// sql操作
|
||||
let sql = {};
|
||||
// 公共聊天数据
|
||||
let chating = []
|
||||
let chatingComm = []
|
||||
// 开关数据
|
||||
let cacheSwitchData = {};
|
||||
// 通知事件定义
|
||||
@@ -89,7 +89,7 @@ async function excute(tabs, sequelize, config) {
|
||||
config.ws.beforeInit();
|
||||
}
|
||||
|
||||
chating = await getDogChating10Info({
|
||||
chatingComm = await getDogChating10Info({
|
||||
tables: tables,
|
||||
sql: sql,
|
||||
});
|
||||
@@ -196,7 +196,7 @@ function listen(io) {
|
||||
handler._message({
|
||||
emitType: "commData",
|
||||
switchData: switchData,
|
||||
chatingData: chating,
|
||||
chatingCommData: chatingComm,
|
||||
})
|
||||
})
|
||||
|
||||
@@ -390,8 +390,7 @@ function listen(io) {
|
||||
if(switchData){
|
||||
cacheSwitchData = switchData
|
||||
}
|
||||
handler._message({
|
||||
emitType: "commData",
|
||||
handler._commDataChange({
|
||||
switchData: switchData,
|
||||
})
|
||||
|
||||
@@ -621,7 +620,7 @@ function listen(io) {
|
||||
});
|
||||
|
||||
// 公共聊天频道
|
||||
socket.on('chating', async function (message) {
|
||||
socket.on('chatingComm', async function (message) {
|
||||
try {
|
||||
if(!cacheSwitchData.openCommRoom){
|
||||
handler._message({
|
||||
@@ -634,14 +633,14 @@ function listen(io) {
|
||||
}
|
||||
message.time = new Date().toLocaleString()
|
||||
|
||||
if (chating.length < 10) {
|
||||
chating.push(message)
|
||||
if (chatingComm.length < 10) {
|
||||
chatingComm.push(message)
|
||||
} else {
|
||||
chating.shift()
|
||||
chating.push(message)
|
||||
chatingComm.shift()
|
||||
chatingComm.push(message)
|
||||
}
|
||||
|
||||
handler._chating(message, {})
|
||||
handler._chatingComm(message, {})
|
||||
|
||||
let handshake = socket.handshake
|
||||
let userAgent = handshake.headers['user-agent'].toString().substr(0, 255);
|
||||
|
||||
@@ -7,14 +7,27 @@
|
||||
this.socket = socket;
|
||||
}
|
||||
|
||||
/**
|
||||
* 后台修改配置广播
|
||||
* @param {*} message
|
||||
* @param {*} params
|
||||
*/
|
||||
_commDataChange( message, params){
|
||||
try{
|
||||
this.sockets.emit("commData", message)
|
||||
}catch(e){
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 公共聊天频道
|
||||
* @param {*} message
|
||||
* @param {*} params
|
||||
*/
|
||||
_chating( message, params){
|
||||
_chatingComm( message, params){
|
||||
try{
|
||||
this.sockets.emit("chating", message)
|
||||
this.sockets.emit("chatingComm", message)
|
||||
}catch(e){
|
||||
console.log(e)
|
||||
}
|
||||
@@ -225,7 +238,7 @@
|
||||
if(emitType === 'commData'){
|
||||
this.socket.emit('commData',{
|
||||
switchData : message.switchData,
|
||||
chatingData : message.chatingData
|
||||
chatingCommData : message.chatingCommData
|
||||
});
|
||||
return
|
||||
}
|
||||
@@ -238,7 +251,7 @@
|
||||
otherSocket.emit(emitType, message);
|
||||
return;
|
||||
}
|
||||
if(from != otherSocket.id ){
|
||||
if(from != otherSocket.id){
|
||||
otherSocket.emit(emitType, message);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user