mirror of
https://github.com/tl-open-source/tl-rtc-file.git
synced 2025-11-03 11:10:56 +08:00
feat: ui交互界面改版
feat: 支持发布公告 feat: 修复一些已知问题
This commit is contained in:
iamtsm
@@ -17,13 +17,12 @@
|
|||||||
|
|
||||||
#### 说明 ： 示例网站是在公网环境中，为了更好的展示传输功能，所以默认开启了中继服务，如果各位是验证能否走p2p传输，只需关闭中继服务，且p2p检测后，如果能看到内网环境ip，webrtc连接大概率可以走p2p，跑到10M/s轻轻松松，公网环境下的内网用户一般情况下来说也会自动识别到的，如果内网速度慢，可以反馈留言，会尽快优化处理
|
#### 说明 ： 示例网站是在公网环境中，为了更好的展示传输功能，所以默认开启了中继服务，如果各位是验证能否走p2p传输，只需关闭中继服务，且p2p检测后，如果能看到内网环境ip，webrtc连接大概率可以走p2p，跑到10M/s轻轻松松，公网环境下的内网用户一般情况下来说也会自动识别到的，如果内网速度慢，可以反馈留言，会尽快优化处理
|
||||||
|
|
||||||
####
|
|
||||||
|
|
||||||
#### 体验 ： https://im.iamtsm.cn/file
|
#### 体验 ： https://im.iamtsm.cn/file
|
||||||
|
|
||||||
|
|
||||||
**qq交流群 : 624214498**
|
**qq交流群 : 624214498**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 准备
|
## 准备
|
||||||
|
|
||||||
安装node，npm后进入项目目录
|
安装node，npm后进入项目目录
|
||||||
|
|||||||
@@ -62,7 +62,18 @@ module.exports = {
|
|||||||
optimization: {
|
optimization: {
|
||||||
minimize: true,
|
minimize: true,
|
||||||
minimizer: [
|
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',
|
filename: '[name].min.css',
|
||||||
ignoreOrder: false,
|
ignoreOrder: false,
|
||||||
}),
|
}),
|
||||||
new watchNewEntry(),
|
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [
|
extensions: [
|
||||||
@@ -62,7 +61,46 @@ module.exports = {
|
|||||||
optimization: {
|
optimization: {
|
||||||
minimize: true,
|
minimize: true,
|
||||||
minimizer: [
|
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,
|
||||||
|
},
|
||||||
|
})
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
1268
res/css/index.css
1268
res/css/index.css
File diff suppressed because it is too large
Load Diff
@@ -17,7 +17,7 @@
|
|||||||
font-family: Rubik,Fallback;
|
font-family: Rubik,Fallback;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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{
|
.layui-nav{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
top: 15px;
|
top: 15px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight:bolder;
|
font-weight:bolder;
|
||||||
-webkit-text-stroke:1px #ffffff;
|
-webkit-text-stroke:1px black;
|
||||||
-webkit-text-fill-color:transparent;
|
-webkit-text-fill-color:transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
@@ -48,13 +48,13 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.tl-rtc-file-intro-main{
|
.tl-rtc-file-intro-main{
|
||||||
color: #fcfcfc;
|
color: black;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
.tl-rtc-file-intro-tag{
|
.tl-rtc-file-intro-tag{
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
color: #fcfcfc;
|
color: black;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
.tl-rtc-file-goto-btn{
|
.tl-rtc-file-goto-btn{
|
||||||
width: 20%;
|
width: 20%;
|
||||||
padding: 0 25px;
|
padding: 0 25px;
|
||||||
background-color: #b6c95e;
|
background-color: #5963af;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -133,17 +133,17 @@
|
|||||||
|
|
||||||
<body class="layui-layout-body">
|
<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">
|
<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">
|
<li class="layui-nav-item">
|
||||||
<a href="https://github.com/iamtsm/tl-rtc-file" style="margin-left: 20px;" target="_blank">
|
<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">
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
|
|
||||||
<div class="tl-rtc-file-intro-content">
|
<div class="tl-rtc-file-intro-content">
|
||||||
@@ -174,7 +174,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tl-rtc-file-foot-content">
|
<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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
@@ -196,7 +196,7 @@
|
|||||||
, btnAlign: 'c'
|
, btnAlign: 'c'
|
||||||
, moveType: 1
|
, moveType: 1
|
||||||
, content: `
|
, 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;">如需支持功能定制，或技术支持，加群联系我即可</div>
|
||||||
<div style="text-align: center;line-height: 40px;">
|
<div style="text-align: center;line-height: 40px;">
|
||||||
qq群交流群 :
|
qq群交流群 :
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
font-family: Rubik,Fallback;
|
font-family: Rubik,Fallback;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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{
|
.layui-nav{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
top: 15px;
|
top: 15px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight:bolder;
|
font-weight:bolder;
|
||||||
-webkit-text-stroke:1px #ffffff;
|
-webkit-text-stroke:1px black;
|
||||||
-webkit-text-fill-color:transparent;
|
-webkit-text-fill-color:transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
@@ -48,13 +48,13 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.tl-rtc-file-intro-main{
|
.tl-rtc-file-intro-main{
|
||||||
color: #fcfcfc;
|
color: black;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
.tl-rtc-file-intro-tag{
|
.tl-rtc-file-intro-tag{
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
color: #fcfcfc;
|
color: black;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
.tl-rtc-file-goto-btn{
|
.tl-rtc-file-goto-btn{
|
||||||
width: 20%;
|
width: 20%;
|
||||||
padding: 0 25px;
|
padding: 0 25px;
|
||||||
background-color: #b6c95e;
|
background-color: #5963af;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -134,15 +134,15 @@
|
|||||||
|
|
||||||
<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">
|
<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">
|
<li class="layui-nav-item">
|
||||||
<a href="https://github.com/iamtsm/tl-rtc-file" style="margin-left: 20px;" target="_blank">
|
<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">
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
|
|
||||||
<div class="tl-rtc-file-intro-content">
|
<div class="tl-rtc-file-intro-content">
|
||||||
@@ -199,7 +199,7 @@
|
|||||||
, btnAlign: 'c'
|
, btnAlign: 'c'
|
||||||
, moveType: 1
|
, moveType: 1
|
||||||
, content: `
|
, 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: 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;">
|
<div style="text-align: center;line-height: 40px;">
|
||||||
qq number :
|
qq number :
|
||||||
|
|||||||
1090
res/index.html
1090
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
|
/(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 stream = node.srcObject;
|
||||||
let nodeId = node.id.substr(0, node.id.length - 5);
|
let nodeId = node.id.substr(0, node.id.length - 5);
|
||||||
if (window.layer) {
|
if (window.layer) {
|
||||||
layer.closeAll()
|
layer.closeAll()
|
||||||
}
|
}
|
||||||
$("#mediaShareRoomList").append(`
|
$(`${type === 'screen' ? '#mediaScreenRoomList': '#mediaVideoRoomList'}`).append(`
|
||||||
<div class="swiper-slide mediaShareBlock">
|
<div class="tl-rtc-file-mask-media-video">
|
||||||
<video id="${nodeId}" autoplay playsinline onclick="tlrtcfile.openFullVideo(this,'${type}')"></video>
|
<video id="${nodeId}" autoplay playsinline onclick="tlrtcfile.openFullVideo(this,'${type}', '${from}')"></video>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
var video = document.querySelector("#" + nodeId);
|
var video = document.querySelector("#" + nodeId);
|
||||||
video.srcObject = stream
|
video.srcObject = stream
|
||||||
// ios 微信浏览器兼容问题
|
|
||||||
video.play();
|
video.addEventListener('loadedmetadata', function() {
|
||||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
// ios 微信浏览器兼容问题
|
||||||
video.play();
|
video.play();
|
||||||
}, false);
|
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||||
|
video.play();
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
openFullVideo: function (node, type) {
|
openFullVideo: function (node, type, from) {
|
||||||
let stream = node.srcObject;
|
let stream = node.srcObject;
|
||||||
let nodeId = node.id + "_full";
|
let nodeId = node.id + "_full";
|
||||||
if (window.layer) {
|
if (window.layer) {
|
||||||
layer.open({
|
layer.open({
|
||||||
type: 1,
|
type: 1,
|
||||||
title: false,
|
title: false,
|
||||||
area: [`80%`],
|
area: ["95%", "auto"],
|
||||||
shade: 0.3,
|
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) {
|
success: function (layero) {
|
||||||
document.querySelector("#" + nodeId).parentElement.style.height = "auto"
|
document.querySelector("#" + nodeId).parentElement.style.height = "auto"
|
||||||
|
|
||||||
let video = document.querySelector("#" + nodeId);
|
let video = document.querySelector("#" + nodeId);
|
||||||
video.srcObject = stream;
|
video.srcObject = stream;
|
||||||
// ios 微信浏览器兼容问题
|
video.addEventListener('loadedmetadata', function() {
|
||||||
video.play();
|
// ios 微信浏览器兼容问题
|
||||||
document.addEventListener('WeixinJSBridgeReady', function () {
|
|
||||||
video.play();
|
video.play();
|
||||||
}, false);
|
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||||
|
video.play();
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
//并且需要移除父节点
|
//并且需要移除父节点
|
||||||
document.querySelector("#" + node.id).parentElement.remove();
|
document.querySelector("#" + node.id).parentElement.remove();
|
||||||
},
|
},
|
||||||
cancel: function () {
|
cancel: function () {
|
||||||
tlrtcfile.closeFullVideo(document.querySelector("#" + nodeId), type);
|
tlrtcfile.closeFullVideo(document.querySelector("#" + nodeId), type, from);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -224,6 +233,58 @@ window.tlrtcfile = {
|
|||||||
animateScroll()
|
animateScroll()
|
||||||
}, timeout);
|
}, 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 () {
|
genNickName: function () {
|
||||||
let {adjectives, nouns} = this.nameDatabase()
|
let {adjectives, nouns} = this.nameDatabase()
|
||||||
let adjectiveIndex = Math.floor(Math.random() * adjectives.length);
|
let adjectiveIndex = Math.floor(Math.random() * adjectives.length);
|
||||||
|
|||||||
1410
res/js/index.js
1410
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(() => {
|
this.interverlId = setInterval(() => {
|
||||||
that.times += 1;
|
that.times += 1;
|
||||||
window.Bus.$emit("changeScreenTimes", that.times)
|
window.Bus.$emit("changeScreenTimes", that.times)
|
||||||
$("#screen").css("color","#fb0404")
|
$("#screenIcon").css("color","#fb0404")
|
||||||
$("#screenTimes").css("color","#fb0404")
|
$("#screenTimes").css("color","#fb0404")
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$("#screen").css("color","#ffffff")
|
$("#screenIcon").css("color","#000000")
|
||||||
$("#screenTimes").css("color","#ffffff")
|
$("#screenTimes").css("color","#000000")
|
||||||
}, 500)
|
}, 500)
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
@@ -113,6 +113,10 @@ var screen = new Vue({
|
|||||||
layer.msg("录制完成，请在接收文件列表查看")
|
layer.msg("录制完成，请在接收文件列表查看")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$("#screenIcon").css("color","#000000")
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -53,28 +53,30 @@ var screenShare = new Vue({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#mediaShareRoomList").append(`
|
$("#mediaScreenRoomList").append(`
|
||||||
<div class="swiper-slide mediaShareBlock">
|
<div class="tl-rtc-file-mask-media-video">
|
||||||
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'screen')"></video>
|
<video style="width:100%;height:30%;" id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'screen', 'self')"></video>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
var video = document.querySelector("#selfMediaShareVideo");
|
var video = document.querySelector("#selfMediaShareVideo");
|
||||||
video.srcObject = this.stream
|
video.srcObject = this.stream
|
||||||
// ios 微信浏览器兼容问题
|
video.addEventListener('loadedmetadata', function() {
|
||||||
video.play();
|
// ios 微信浏览器兼容问题
|
||||||
document.addEventListener('WeixinJSBridgeReady',function(){
|
|
||||||
video.play();
|
video.play();
|
||||||
},false);
|
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||||
|
video.play();
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
//计算时间
|
//计算时间
|
||||||
this.interverlId = setInterval(() => {
|
this.interverlId = setInterval(() => {
|
||||||
that.times += 1;
|
that.times += 1;
|
||||||
window.Bus.$emit("changeScreenShareTimes", that.times)
|
window.Bus.$emit("changeScreenShareTimes", that.times)
|
||||||
$("#screenShare").css("fill","#fb0404")
|
$("#screenShareIcon").css("color","#fb0404")
|
||||||
$("#screenShareTimes").css("fill","#fb0404")
|
$("#screenShareTimes").css("color","#fb0404")
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$("#screenShare").css("fill","#ffffff")
|
$("#screenShareIcon").css("color","#ffffff")
|
||||||
$("#screenShareTimes").css("fill","#ffffff")
|
$("#screenShareTimes").css("color","#ffffff")
|
||||||
}, 500)
|
}, 500)
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
@@ -102,6 +104,10 @@ var screenShare = new Vue({
|
|||||||
layer.msg("屏幕共享结束，本次共享时长 "+this.times+"秒")
|
layer.msg("屏幕共享结束，本次共享时长 "+this.times+"秒")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$("#screenShareIcon").css("color", "#000000")
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
this.stream = null;
|
this.stream = null;
|
||||||
this.times = 0;
|
this.times = 0;
|
||||||
|
|
||||||
|
|||||||
@@ -20,15 +20,19 @@ var videoShare = new Vue({
|
|||||||
facingMode: true ? "user" : "environment",
|
facingMode: true ? "user" : "environment",
|
||||||
// 分辨率
|
// 分辨率
|
||||||
width: {
|
width: {
|
||||||
ideal : 1280
|
ideal : parseInt((document.documentElement.clientWidth - 20) / 2),
|
||||||
|
max : document.documentElement.clientWidth,
|
||||||
|
min : 100
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
ideal : 720
|
ideal : parseInt((document.documentElement.clientHeight - 20) / 2),
|
||||||
|
max : document.documentElement.clientHeight,
|
||||||
|
min : 100
|
||||||
},
|
},
|
||||||
// 码率
|
// 码率
|
||||||
frameRate: {
|
frameRate: {
|
||||||
ideal: 10,
|
ideal: 30,
|
||||||
max: 15
|
max: 50
|
||||||
},
|
},
|
||||||
// 指定设备
|
// 指定设备
|
||||||
// deviceId: "",
|
// deviceId: "",
|
||||||
@@ -79,28 +83,30 @@ var videoShare = new Vue({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#mediaShareRoomList").append(`
|
$("#mediaVideoRoomList").append(`
|
||||||
<div class="swiper-slide mediaShareBlock">
|
<div class="tl-rtc-file-mask-media-video">
|
||||||
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'video')"></video>
|
<video id="selfMediaShareVideo" autoplay playsinline onclick="tlrtcfile.openFullVideo(this, 'video', 'self')"></video>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
var video = document.querySelector("#selfMediaShareVideo");
|
var video = document.querySelector("#selfMediaShareVideo");
|
||||||
video.srcObject = this.stream
|
video.srcObject = this.stream
|
||||||
// ios 微信浏览器兼容问题
|
video.addEventListener('loadedmetadata', function() {
|
||||||
video.play();
|
// ios 微信浏览器兼容问题
|
||||||
document.addEventListener('WeixinJSBridgeReady',function(){
|
|
||||||
video.play();
|
video.play();
|
||||||
},false);
|
document.addEventListener('WeixinJSBridgeReady', function () {
|
||||||
|
video.play();
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
//计算时间
|
//计算时间
|
||||||
this.interverlId = setInterval(() => {
|
this.interverlId = setInterval(() => {
|
||||||
that.times += 1;
|
that.times += 1;
|
||||||
window.Bus.$emit("changeVideoShareTimes", that.times)
|
window.Bus.$emit("changeVideoShareTimes", that.times)
|
||||||
|
|
||||||
$("#videoShare").css("color", "#fb0404")
|
$("#videoShareIcon").css("color", "#fb0404")
|
||||||
$("#videoShareTimes").css("color", "#fb0404")
|
$("#videoShareTimes").css("color", "#fb0404")
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$("#videoShare").css("color", "#ffffff")
|
$("#videoShareIcon").css("color", "#ffffff")
|
||||||
$("#videoShareTimes").css("color", "#ffffff")
|
$("#videoShareTimes").css("color", "#ffffff")
|
||||||
}, 500)
|
}, 500)
|
||||||
}, 1000);
|
}, 1000);
|
||||||
@@ -123,11 +129,14 @@ var videoShare = new Vue({
|
|||||||
|
|
||||||
clearInterval(this.interverlId);
|
clearInterval(this.interverlId);
|
||||||
|
|
||||||
window.Bus.$emit("changeVideoShareTimes", 0)
|
window.Bus.$emit("changeVideoShareTimes", 0);
|
||||||
|
|
||||||
if (window.layer) {
|
if (window.layer) {
|
||||||
layer.msg("音视频通话结束，本次通话时长 " + this.times + "秒")
|
layer.msg("音视频通话结束，本次通话时长 " + this.times + "秒")
|
||||||
}
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
$("#videoShareIcon").css("color", "#000000")
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
this.stream = null;
|
this.stream = null;
|
||||||
this.times = 0;
|
this.times = 0;
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ let tokens = [];
|
|||||||
// sql操作
|
// sql操作
|
||||||
let sql = {};
|
let sql = {};
|
||||||
// 公共聊天数据
|
// 公共聊天数据
|
||||||
let chating = []
|
let chatingComm = []
|
||||||
// 开关数据
|
// 开关数据
|
||||||
let cacheSwitchData = {};
|
let cacheSwitchData = {};
|
||||||
// 通知事件定义
|
// 通知事件定义
|
||||||
@@ -89,7 +89,7 @@ async function excute(tabs, sequelize, config) {
|
|||||||
config.ws.beforeInit();
|
config.ws.beforeInit();
|
||||||
}
|
}
|
||||||
|
|
||||||
chating = await getDogChating10Info({
|
chatingComm = await getDogChating10Info({
|
||||||
tables: tables,
|
tables: tables,
|
||||||
sql: sql,
|
sql: sql,
|
||||||
});
|
});
|
||||||
@@ -196,7 +196,7 @@ function listen(io) {
|
|||||||
handler._message({
|
handler._message({
|
||||||
emitType: "commData",
|
emitType: "commData",
|
||||||
switchData: switchData,
|
switchData: switchData,
|
||||||
chatingData: chating,
|
chatingCommData: chatingComm,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -390,8 +390,7 @@ function listen(io) {
|
|||||||
if(switchData){
|
if(switchData){
|
||||||
cacheSwitchData = switchData
|
cacheSwitchData = switchData
|
||||||
}
|
}
|
||||||
handler._message({
|
handler._commDataChange({
|
||||||
emitType: "commData",
|
|
||||||
switchData: switchData,
|
switchData: switchData,
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -621,7 +620,7 @@ function listen(io) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 公共聊天频道
|
// 公共聊天频道
|
||||||
socket.on('chating', async function (message) {
|
socket.on('chatingComm', async function (message) {
|
||||||
try {
|
try {
|
||||||
if(!cacheSwitchData.openCommRoom){
|
if(!cacheSwitchData.openCommRoom){
|
||||||
handler._message({
|
handler._message({
|
||||||
@@ -634,14 +633,14 @@ function listen(io) {
|
|||||||
}
|
}
|
||||||
message.time = new Date().toLocaleString()
|
message.time = new Date().toLocaleString()
|
||||||
|
|
||||||
if (chating.length < 10) {
|
if (chatingComm.length < 10) {
|
||||||
chating.push(message)
|
chatingComm.push(message)
|
||||||
} else {
|
} else {
|
||||||
chating.shift()
|
chatingComm.shift()
|
||||||
chating.push(message)
|
chatingComm.push(message)
|
||||||
}
|
}
|
||||||
|
|
||||||
handler._chating(message, {})
|
handler._chatingComm(message, {})
|
||||||
|
|
||||||
let handshake = socket.handshake
|
let handshake = socket.handshake
|
||||||
let userAgent = handshake.headers['user-agent'].toString().substr(0, 255);
|
let userAgent = handshake.headers['user-agent'].toString().substr(0, 255);
|
||||||
|
|||||||
@@ -7,14 +7,27 @@
|
|||||||
this.socket = socket;
|
this.socket = socket;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 后台修改配置广播
|
||||||
|
* @param {*} message
|
||||||
|
* @param {*} params
|
||||||
|
*/
|
||||||
|
_commDataChange( message, params){
|
||||||
|
try{
|
||||||
|
this.sockets.emit("commData", message)
|
||||||
|
}catch(e){
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 公共聊天频道
|
* 公共聊天频道
|
||||||
* @param {*} message
|
* @param {*} message
|
||||||
* @param {*} params
|
* @param {*} params
|
||||||
*/
|
*/
|
||||||
_chating( message, params){
|
_chatingComm( message, params){
|
||||||
try{
|
try{
|
||||||
this.sockets.emit("chating", message)
|
this.sockets.emit("chatingComm", message)
|
||||||
}catch(e){
|
}catch(e){
|
||||||
console.log(e)
|
console.log(e)
|
||||||
}
|
}
|
||||||
@@ -225,7 +238,7 @@
|
|||||||
if(emitType === 'commData'){
|
if(emitType === 'commData'){
|
||||||
this.socket.emit('commData',{
|
this.socket.emit('commData',{
|
||||||
switchData : message.switchData,
|
switchData : message.switchData,
|
||||||
chatingData : message.chatingData
|
chatingCommData : message.chatingCommData
|
||||||
});
|
});
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -238,7 +251,7 @@
|
|||||||
otherSocket.emit(emitType, message);
|
otherSocket.emit(emitType, message);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(from != otherSocket.id ){
|
if(from != otherSocket.id){
|
||||||
otherSocket.emit(emitType, message);
|
otherSocket.emit(emitType, message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user