xbx #234
743
public/js/commonen.js
Normal file
743
public/js/commonen.js
Normal file
@ -0,0 +1,743 @@
|
||||
/* eslint-disable no-cond-assign */
|
||||
/* global $ TRTC presetting RtcClient ShareClient */
|
||||
/* eslint-disable require-jsdoc */
|
||||
let isCamOn = true;
|
||||
let isMicOn = true;
|
||||
let isScreenOn = false;
|
||||
let isJoined = true;
|
||||
let rtc = null;
|
||||
let share = null;
|
||||
let shareUserId = '';
|
||||
let cameraId = '';
|
||||
let micId = '';
|
||||
|
||||
function login() {
|
||||
|
||||
presetting.login(false, options => {
|
||||
rtc = new RtcClient(options);
|
||||
join();
|
||||
});
|
||||
presetting.login(true, options => {
|
||||
shareUserId = options.userId;
|
||||
share = new ShareClient(options);
|
||||
});
|
||||
}
|
||||
$(function (){
|
||||
login();
|
||||
|
||||
})
|
||||
function join() {
|
||||
rtc.join();
|
||||
$('#login-root').hide();
|
||||
$('#room-root').show();
|
||||
$('#header-roomId').html('roomid: ' + $('#roomId').val());
|
||||
$('#member-me')
|
||||
.find('.member-id')
|
||||
.html(window.uname + '(my)');
|
||||
}
|
||||
|
||||
function leave() {
|
||||
$('#mask_main').appendTo($('#main-video'));
|
||||
rtc.leave();
|
||||
share.leave();
|
||||
}
|
||||
|
||||
function publish() {
|
||||
rtc.publish();
|
||||
}
|
||||
|
||||
function unpublish() {
|
||||
rtc.unpublish();
|
||||
}
|
||||
|
||||
function muteAudio() {
|
||||
rtc.muteLocalAudio();
|
||||
}
|
||||
|
||||
function unmuteAudio() {
|
||||
rtc.unmuteLocalAudio();
|
||||
}
|
||||
|
||||
function muteVideo() {
|
||||
$('#mask_main').show();
|
||||
rtc.muteLocalVideo();
|
||||
}
|
||||
|
||||
function unmuteVideo() {
|
||||
rtc.unmuteLocalVideo();
|
||||
$('#mask_main').hide();
|
||||
}
|
||||
|
||||
function startSharing() {
|
||||
share.join();
|
||||
}
|
||||
|
||||
function stopSharing() {
|
||||
share.leave();
|
||||
}
|
||||
|
||||
function setBtnClickFuc() {
|
||||
//userid roomid规格
|
||||
//$('#userId').on('input', function(e) {
|
||||
// e.preventDefault();
|
||||
// console.log('userId input ' + e.target.value);
|
||||
// let val = $('#userId').val().slice(5);
|
||||
// $('#userId').val('user_'+val.replace(/[^\d]/g,''));
|
||||
//});
|
||||
$('#roomId').on('input', function(e) {
|
||||
e.preventDefault();
|
||||
console.log('roomId input ' + e.target.value);
|
||||
let val = $('#roomId').val();
|
||||
$('#roomId').val(val.replace(/[^\d]/g, ''));
|
||||
});
|
||||
//login
|
||||
$('#login-btn').click(() => {
|
||||
login();
|
||||
});
|
||||
//open or close camera
|
||||
$('#video-btn').on('click', () => {
|
||||
if (isCamOn) {
|
||||
$('#video-btn').attr('src', './img/big-camera-off.png');
|
||||
$('#video-btn').attr('title', 'Turn on the camera');
|
||||
$('#member-me')
|
||||
.find('.member-video-btn')
|
||||
.attr('src', 'img/camera-off.png');
|
||||
isCamOn = false;
|
||||
muteVideo();
|
||||
} else {
|
||||
$('#video-btn').attr('src', './img/big-camera-on.png');
|
||||
$('#video-btn').attr('title', 'Turn off the camera');
|
||||
$('#member-me')
|
||||
.find('.member-video-btn')
|
||||
.attr('src', 'img/camera-on.png');
|
||||
isCamOn = true;
|
||||
unmuteVideo();
|
||||
}
|
||||
});
|
||||
//open or close microphone
|
||||
$('#mic-btn').on('click', () => {
|
||||
if (isMicOn) {
|
||||
$('#mic-btn').attr('src', './img/big-mic-off.png');
|
||||
$('#mic-btn').attr('title', 'Turn on the microphone');
|
||||
$('#member-me')
|
||||
.find('.member-audio-btn')
|
||||
.attr('src', 'img/mic-off.png');
|
||||
isMicOn = false;
|
||||
muteAudio();
|
||||
} else {
|
||||
$('#mic-btn').attr('src', './img/big-mic-on.png');
|
||||
$('#mic-btn').attr('title', 'Close Microphone');
|
||||
$('#member-me')
|
||||
.find('.member-audio-btn')
|
||||
.attr('src', 'img/mic-on.png');
|
||||
isMicOn = true;
|
||||
unmuteAudio();
|
||||
}
|
||||
});
|
||||
//share screen or not
|
||||
$('#screen-btn').on(
|
||||
'click',
|
||||
throttle(() => {
|
||||
if (!TRTC.isScreenShareSupported()) {
|
||||
alert('The current browser does not support screen sharing');
|
||||
return;
|
||||
}
|
||||
if ($('#screen-btn').attr('src') == './img/screen-on.png') {
|
||||
$('#screen-btn').attr('src', './img/screen-off.png');
|
||||
stopSharing();
|
||||
isScreenOn = false;
|
||||
} else {
|
||||
$('#screen-btn').attr('src', './img/screen-on.png');
|
||||
startSharing();
|
||||
isScreenOn = true;
|
||||
}
|
||||
}, 2000)
|
||||
);
|
||||
//logout
|
||||
$('#logout-btn').on('click', () => {
|
||||
// window.location.hash='edit'
|
||||
// console.log(window.location.hash)
|
||||
// var x;
|
||||
// var r=confirm("您确认关闭吗？");
|
||||
// if (r==true){
|
||||
leave();
|
||||
$('#room-root').hide();
|
||||
$('#login-root').show();
|
||||
let promise = tim.dismissGroup(window.roomid);
|
||||
promise.then(function(imResponse) { // 解散成功
|
||||
console.log(imResponse.data.groupID); // 被解散的群组 ID
|
||||
}).catch(function(imError) {
|
||||
console.warn('dismissGroup error:', imError); // 解散群组失败的相关信息
|
||||
});
|
||||
// const jiekou = new Promise((res)=>{
|
||||
// $.ajax({
|
||||
// url: window.url + 'StopMCUMixTranscode?roomid=' + window.roomid,
|
||||
// headers: { "Authorization": "Bearer " + localStorage.getItem("token")},
|
||||
// success(){
|
||||
// res(1)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
const jieshu = new Promise((res)=>{
|
||||
$.ajax({
|
||||
url: window.url + 'live/' + window.liveid,
|
||||
headers: { "Authorization": "Bearer " + localStorage.getItem("token")},
|
||||
method:"PUT",
|
||||
data:{
|
||||
status: 2
|
||||
},
|
||||
success(){
|
||||
res(1)
|
||||
},
|
||||
error(){
|
||||
res(2)
|
||||
}
|
||||
})
|
||||
})
|
||||
// const jieshuh = new Promise((res)=>{
|
||||
// $.ajax({
|
||||
// url: window.url + 'StopMCUMixTranscode?roomid=' + window.roomid,
|
||||
// headers: { "Authorization": "Bearer " + localStorage.getItem("token")},
|
||||
// success(){
|
||||
// res(1)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
Promise.allSettled([promise,jieshu]).then(()=>{
|
||||
window.parent.location.href="/regime/livedetail?id=" + window.liveid;
|
||||
})
|
||||
|
||||
// }
|
||||
// else{
|
||||
// x="你按下了\"取消\"按钮!";
|
||||
// }
|
||||
// leave();
|
||||
// $('#room-root').hide();
|
||||
// $('#login-root').show();
|
||||
});
|
||||
//switch main video
|
||||
$('#main-video').on('click', () => {
|
||||
let mainVideo = $('.video-box').first();
|
||||
if ($('#main-video').is(mainVideo)) {
|
||||
return;
|
||||
}
|
||||
//释放main-video grid-area
|
||||
mainVideo.css('grid-area', 'auto/auto/auto/auto');
|
||||
exchangeView($('#main-video'), mainVideo);
|
||||
//将video-grid中第一个div设为main-video
|
||||
$('.video-box')
|
||||
.first()
|
||||
.css('grid-area', '1/1/3/4');
|
||||
//chromeM71以下会自动暂停，手动唤醒
|
||||
if (getBroswer().broswer == 'Chrome' && getBroswer().version < '72') {
|
||||
rtc.resumeStreams();
|
||||
}
|
||||
});
|
||||
|
||||
//chrome60以下不支持popover，防止error
|
||||
if (getBroswer().broswer == 'Chrome' && getBroswer().version < '60') return;
|
||||
//开启popover
|
||||
$(function() {
|
||||
$('[data-toggle="popover"]').popover();
|
||||
});
|
||||
$('#camera').popover({
|
||||
html: true,
|
||||
content: () => {
|
||||
return $('#camera-option').html();
|
||||
}
|
||||
});
|
||||
$('#microphone').popover({
|
||||
html: true,
|
||||
content: () => {
|
||||
return $('#mic-option').html();
|
||||
}
|
||||
});
|
||||
|
||||
$('#camera').on('click', () => {
|
||||
$('#microphone').popover('hide');
|
||||
$('.popover-body')
|
||||
.find('div')
|
||||
.attr('onclick', 'setCameraId(this)');
|
||||
});
|
||||
|
||||
$('#microphone').on('click', () => {
|
||||
$('#camera').popover('hide');
|
||||
$('.popover-body')
|
||||
.find('div')
|
||||
.attr('onclick', 'setMicId(this)');
|
||||
});
|
||||
|
||||
//点击body关闭popover
|
||||
$('body').click(() => {
|
||||
$('#camera').popover('hide');
|
||||
$('#microphone').popover('hide');
|
||||
});
|
||||
|
||||
//popover事件
|
||||
$('#camera').on('show.bs.popover', () => {
|
||||
$('#camera').attr('src', './img/camera-on.png');
|
||||
});
|
||||
$('#camera').on('hide.bs.popover', () => {
|
||||
$('#camera').attr('src', './img/camera.png');
|
||||
});
|
||||
|
||||
$('#microphone').on('show.bs.popover', () => {
|
||||
$('#microphone').attr('src', './img/mic-on.png');
|
||||
});
|
||||
$('#microphone').on('hide.bs.popover', () => {
|
||||
$('#microphone').attr('src', './img/mic.png');
|
||||
});
|
||||
}
|
||||
|
||||
function setCameraId(thisDiv) {
|
||||
cameraId = $(thisDiv).attr('id');
|
||||
console.log('setCameraId: ' + cameraId);
|
||||
}
|
||||
|
||||
function setMicId(thisDiv) {
|
||||
micId = $(thisDiv).attr('id');
|
||||
console.log('setMicId: ' + micId);
|
||||
}
|
||||
|
||||
function addVideoView(id, isLocal = false) {
|
||||
let div = $('<div/>', {
|
||||
id: id,
|
||||
class: 'video-box',
|
||||
style: 'justify-content: center'
|
||||
});
|
||||
div.appendTo('#video-grid');
|
||||
//设置监听
|
||||
div.click(() => {
|
||||
let mainVideo = $('.video-box').first();
|
||||
if (div.is(mainVideo)) {
|
||||
return;
|
||||
}
|
||||
//释放main-video grid-area
|
||||
mainVideo.css('grid-area', 'auto/auto/auto/auto');
|
||||
exchangeView(div, mainVideo);
|
||||
//将video-grid中第一个div设为main-video
|
||||
$('.video-box')
|
||||
.first()
|
||||
.css('grid-area', '1/1/3/4');
|
||||
//chromeM71以下会自动暂停，手动唤醒
|
||||
if (getBroswer().broswer == 'Chrome' && getBroswer().version < '72') {
|
||||
rtc.resumeStreams();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addMemberView(id) {
|
||||
if($("#" + id)[0]){
|
||||
return ;
|
||||
}
|
||||
let memberElm = $('#member-me').clone();
|
||||
memberElm.attr('id', id);
|
||||
// memberElm.attr('class', id);
|
||||
memberElm.css('display', 'flex');
|
||||
memberElm.find("#video-btn").click((el)=>{
|
||||
console.log(el)
|
||||
const src = $(el.target).attr("src") == "img/camera-on.png" ? 1 : 0
|
||||
console.log("video" + id);
|
||||
sendsx(id,src)
|
||||
window.message(src == 1 ? "Camera off successfully" : "Unlockable camera successfully")
|
||||
|
||||
})
|
||||
memberElm.find("#mic-btn").click((el)=>{
|
||||
const src = $(el.target).attr("src") == "img/mic-on.png" ? 1 : 0
|
||||
console.log("mic" + id);
|
||||
sendjinyan(id,src)
|
||||
window.message(src == 1 ? "Microphone off successful" : "Mic unblocked successfully")
|
||||
})
|
||||
memberElm.find("#video-btn").removeAttr("id")
|
||||
memberElm.find("#mic-btn").removeAttr("id")
|
||||
|
||||
console.log("移除")
|
||||
getname(id).then((res)=>{
|
||||
$("#" + id).find('div.member-id').html(res);
|
||||
|
||||
// console.log(.length)
|
||||
})
|
||||
memberElm.appendTo($('#member-list'));
|
||||
}
|
||||
|
||||
function removeView(id) {
|
||||
console.log("被删除")
|
||||
if ($('#' + id)[0]) {
|
||||
if(id.indexOf("-") != -1){
|
||||
$('#' + id).remove();
|
||||
}
|
||||
|
||||
//将video-grid中第一个div设为main-video
|
||||
$('.video-box')
|
||||
.first()
|
||||
.css('grid-area', '1/1/3/4');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function exchangeView(a, b) {
|
||||
var $div1 = $(a);
|
||||
var $div3 = $(b);
|
||||
var $temobj1 = $('<div></div>');
|
||||
var $temobj2 = $('<div></div>');
|
||||
$temobj1.insertBefore($div1);
|
||||
$temobj2.insertBefore($div3);
|
||||
$div1.insertAfter($temobj2);
|
||||
$div3.insertAfter($temobj1);
|
||||
$temobj1.remove();
|
||||
$temobj2.remove();
|
||||
}
|
||||
|
||||
function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod');
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
function getCameraId() {
|
||||
console.log('selected cameraId: ' + cameraId);
|
||||
return cameraId;
|
||||
}
|
||||
|
||||
function getMicrophoneId() {
|
||||
console.log('selected microphoneId: ' + micId);
|
||||
return micId;
|
||||
}
|
||||
|
||||
function throttle(func, delay) {
|
||||
var timer = null;
|
||||
var startTime = Date.now();
|
||||
return function() {
|
||||
var curTime = Date.now();
|
||||
var remaining = delay - (curTime - startTime);
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
clearTimeout(timer);
|
||||
if (remaining <= 0) {
|
||||
func.apply(context, args);
|
||||
startTime = Date.now();
|
||||
} else {
|
||||
timer = setTimeout(() => {
|
||||
console.log('duplicate click');
|
||||
}, remaining);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function resetView() {
|
||||
isCamOn = true;
|
||||
isMicOn = true;
|
||||
isScreenOn = false;
|
||||
isJoined = true;
|
||||
$('#main-video-btns').hide();
|
||||
$('#video-btn').attr('src', './img/big-camera-on.png');
|
||||
$('#mic-btn').attr('src', './img/big-mic-on.png');
|
||||
$('#screen-btn').attr('src', './img/screen-off.png');
|
||||
$('#member-me')
|
||||
.find('.member-video-btn')
|
||||
.attr('src', 'img/camera-on.png');
|
||||
$('#member-me')
|
||||
.find('.member-audio-btn')
|
||||
.attr('src', 'img/mic-on.png');
|
||||
$('.mask').hide();
|
||||
//清空member-list
|
||||
if ($('#member-list')) {
|
||||
$('#member-list')
|
||||
.find('.member')
|
||||
.each((index, element) => {
|
||||
if (
|
||||
$(element)
|
||||
.parent()
|
||||
.attr('id') != 'member-me'
|
||||
) {
|
||||
$(element)
|
||||
.parent()
|
||||
.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getBroswer() {
|
||||
var sys = {};
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
var s;
|
||||
(s = ua.match(/edge\/([\d.]+)/))
|
||||
? (sys.edge = s[1])
|
||||
: (s = ua.match(/rv:([\d.]+)\) like gecko/))
|
||||
? (sys.ie = s[1])
|
||||
: (s = ua.match(/msie ([\d.]+)/))
|
||||
? (sys.ie = s[1])
|
||||
: (s = ua.match(/firefox\/([\d.]+)/))
|
||||
? (sys.firefox = s[1])
|
||||
: (s = ua.match(/chrome\/([\d.]+)/))
|
||||
? (sys.chrome = s[1])
|
||||
: (s = ua.match(/opera.([\d.]+)/))
|
||||
? (sys.opera = s[1])
|
||||
: (s = ua.match(/version\/([\d.]+).*safari/))
|
||||
? (sys.safari = s[1])
|
||||
: 0;
|
||||
|
||||
if (sys.edge) return { broswer: 'Edge', version: sys.edge };
|
||||
if (sys.ie) return { broswer: 'IE', version: sys.ie };
|
||||
if (sys.firefox) return { broswer: 'Firefox', version: sys.firefox };
|
||||
if (sys.chrome) return { broswer: 'Chrome', version: sys.chrome };
|
||||
if (sys.opera) return { broswer: 'Opera', version: sys.opera };
|
||||
if (sys.safari) return { broswer: 'Safari', version: sys.safari };
|
||||
|
||||
return { broswer: '', version: '0' };
|
||||
}
|
||||
|
||||
function isHidden() {
|
||||
var hidden, visibilityChange;
|
||||
if (typeof document.hidden !== 'undefined') {
|
||||
hidden = 'hidden';
|
||||
visibilityChange = 'visibilitychange';
|
||||
} else if (typeof document.msHidden !== 'undefined') {
|
||||
hidden = 'msHidden';
|
||||
visibilityChange = 'msvisibilitychange';
|
||||
} else if (typeof document.webkitHidden !== 'undefined') {
|
||||
hidden = 'webkitHidden';
|
||||
visibilityChange = 'webkitvisibilitychange';
|
||||
}
|
||||
return document[hidden];
|
||||
}
|
||||
|
||||
function getIPAddress() {
|
||||
return new Promise(resolve => {
|
||||
window.RTCPeerConnection =
|
||||
window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
|
||||
let pc = new RTCPeerConnection({ iceServers: [] });
|
||||
let noop = function() {};
|
||||
let IPAddress = '';
|
||||
let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
|
||||
pc.createDataChannel(''); //create a bogus data channel
|
||||
pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
|
||||
//listen for candidate events
|
||||
pc.onicecandidate = function(ice) {
|
||||
if (
|
||||
!ice ||
|
||||
!ice.candidate ||
|
||||
!ice.candidate.candidate ||
|
||||
!ipRegex.exec(ice.candidate.candidate)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
IPAddress = ipRegex.exec(ice.candidate.candidate)[1];
|
||||
pc.onicecandidate = noop;
|
||||
resolve(IPAddress);
|
||||
};
|
||||
});
|
||||
}
|
||||
let isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i);
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry|BB10/i);
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||
},
|
||||
Opera: function() {
|
||||
return navigator.userAgent.match(/Opera Mini/i);
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i);
|
||||
},
|
||||
any: function() {
|
||||
return (
|
||||
isMobile.Android() ||
|
||||
isMobile.BlackBerry() ||
|
||||
isMobile.iOS() ||
|
||||
isMobile.Opera() ||
|
||||
isMobile.Windows()
|
||||
);
|
||||
},
|
||||
getOsName: function() {
|
||||
var osName = 'Unknown OS';
|
||||
if (isMobile.Android()) {
|
||||
osName = 'Android';
|
||||
}
|
||||
if (isMobile.BlackBerry()) {
|
||||
osName = 'BlackBerry';
|
||||
}
|
||||
if (isMobile.iOS()) {
|
||||
osName = 'iOS';
|
||||
}
|
||||
if (isMobile.Opera()) {
|
||||
osName = 'Opera Mini';
|
||||
}
|
||||
if (isMobile.Windows()) {
|
||||
osName = 'Windows';
|
||||
}
|
||||
return osName;
|
||||
}
|
||||
};
|
||||
function detectDesktopOS() {
|
||||
var unknown = '-';
|
||||
var nVer = navigator.appVersion;
|
||||
var nAgt = navigator.userAgent;
|
||||
var os = unknown;
|
||||
var clientStrings = [
|
||||
{
|
||||
s: 'Chrome OS',
|
||||
r: /CrOS/
|
||||
},
|
||||
{
|
||||
s: 'Windows 10',
|
||||
r: /(Windows 10.0|Windows NT 10.0)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 8.1',
|
||||
r: /(Windows 8.1|Windows NT 6.3)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 8',
|
||||
r: /(Windows 8|Windows NT 6.2)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 7',
|
||||
r: /(Windows 7|Windows NT 6.1)/
|
||||
},
|
||||
{
|
||||
s: 'Windows Vista',
|
||||
r: /Windows NT 6.0/
|
||||
},
|
||||
{
|
||||
s: 'Windows Server 2003',
|
||||
r: /Windows NT 5.2/
|
||||
},
|
||||
{
|
||||
s: 'Windows XP',
|
||||
r: /(Windows NT 5.1|Windows XP)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 2000',
|
||||
r: /(Windows NT 5.0|Windows 2000)/
|
||||
},
|
||||
{
|
||||
s: 'Windows ME',
|
||||
r: /(Win 9x 4.90|Windows ME)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 98',
|
||||
r: /(Windows 98|Win98)/
|
||||
},
|
||||
{
|
||||
s: 'Windows 95',
|
||||
r: /(Windows 95|Win95|Windows_95)/
|
||||
},
|
||||
{
|
||||
s: 'Windows NT 4.0',
|
||||
r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/
|
||||
},
|
||||
{
|
||||
s: 'Windows CE',
|
||||
r: /Windows CE/
|
||||
},
|
||||
{
|
||||
s: 'Windows 3.11',
|
||||
r: /Win16/
|
||||
},
|
||||
{
|
||||
s: 'Android',
|
||||
r: /Android/
|
||||
},
|
||||
{
|
||||
s: 'Open BSD',
|
||||
r: /OpenBSD/
|
||||
},
|
||||
{
|
||||
s: 'Sun OS',
|
||||
r: /SunOS/
|
||||
},
|
||||
{
|
||||
s: 'Linux',
|
||||
r: /(Linux|X11)/
|
||||
},
|
||||
{
|
||||
s: 'iOS',
|
||||
r: /(iPhone|iPad|iPod)/
|
||||
},
|
||||
{
|
||||
s: 'Mac OS X',
|
||||
r: /Mac OS X/
|
||||
},
|
||||
{
|
||||
s: 'Mac OS',
|
||||
r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/
|
||||
},
|
||||
{
|
||||
s: 'QNX',
|
||||
r: /QNX/
|
||||
},
|
||||
{
|
||||
s: 'UNIX',
|
||||
r: /UNIX/
|
||||
},
|
||||
{
|
||||
s: 'BeOS',
|
||||
r: /BeOS/
|
||||
},
|
||||
{
|
||||
s: 'OS/2',
|
||||
r: /OS\/2/
|
||||
},
|
||||
{
|
||||
s: 'Search Bot',
|
||||
r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/
|
||||
}
|
||||
];
|
||||
for (var i = 0, cs; (cs = clientStrings[i]); i++) {
|
||||
if (cs.r.test(nAgt)) {
|
||||
os = cs.s;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var osVersion = unknown;
|
||||
if (/Windows/.test(os)) {
|
||||
if (/Windows (.*)/.test(os)) {
|
||||
osVersion = /Windows (.*)/.exec(os)[1];
|
||||
}
|
||||
os = 'Windows';
|
||||
}
|
||||
switch (os) {
|
||||
case 'Mac OS X':
|
||||
if (/Mac OS X (10[/._\d]+)/.test(nAgt)) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
|
||||
}
|
||||
break;
|
||||
case 'Android':
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
if (/Android ([\.\_\d]+)/.test(nAgt)) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
|
||||
}
|
||||
break;
|
||||
case 'iOS':
|
||||
if (/OS (\d+)_(\d+)_?(\d+)?/.test(nAgt)) {
|
||||
osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
|
||||
osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return {
|
||||
osName: os + osVersion
|
||||
};
|
||||
}
|
||||
function getOS() {
|
||||
if (isMobile.any()) {
|
||||
return isMobile.getOsName();
|
||||
} else {
|
||||
return detectDesktopOS();
|
||||
}
|
||||
}
|
||||
607
public/zhiboen.html
Normal file
607
public/zhiboen.html
Normal file
@ -0,0 +1,607 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>TRTC实时音视频通话</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<link rel="stylesheet" href="./css/room.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
|
||||
<script>
|
||||
(function (designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
// maxWidth = maxWidth || 540; //不需要判断最大宽度
|
||||
// width > maxWidth && (width = maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
console.log(rem)
|
||||
|
||||
remStyle.innerHTML = 'html{font-size:' + rem / 100 + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function () {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function (e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(1366, 1024);
|
||||
</script>
|
||||
<style>
|
||||
video{
|
||||
position: unset !important;
|
||||
}
|
||||
#member-list > div{
|
||||
padding: 13rem;
|
||||
border-bottom: 1rem solid #EEEEEE;
|
||||
}
|
||||
.liaotian{
|
||||
grid-area: 3/1/4/5;
|
||||
margin-top: 28rem;
|
||||
height: 90%;
|
||||
margin-left: 10rem;
|
||||
width: 98%;
|
||||
background-color: #fff;
|
||||
border-radius: 17rem;
|
||||
padding: 24rem 28rem 14rem 28rem !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wenzi{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
.wenzi > div{
|
||||
width: 100%;
|
||||
font-size: 11rem;
|
||||
}
|
||||
.wenzi > div >p:first-child {
|
||||
margin-right: 33rem;
|
||||
}
|
||||
.wenzi > div >p span{
|
||||
color: #08AE98;
|
||||
}
|
||||
.fasongkuang{
|
||||
width: 100%;
|
||||
height: 29rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
border-top: 1rem solid #DCDFE0;
|
||||
}
|
||||
.fasongkuang input{
|
||||
font-size: 11rem;
|
||||
color: #333;
|
||||
width: 430rem;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.fasonganniu{
|
||||
display: flex;
|
||||
font-size: 11rem;
|
||||
color: #08AE98;
|
||||
align-items: center;
|
||||
}
|
||||
.fasonganniu img{
|
||||
width: 15rem;
|
||||
height: 12rem;
|
||||
margin-left: 7rem;
|
||||
}
|
||||
.fasongkuang input::placeholder{
|
||||
font-size: 11rem;
|
||||
}
|
||||
.fasongkuang input:focus{ border: none; background: #fff; outline: none;}
|
||||
.guanbibutton{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.guanbibutton > button {
|
||||
margin-left: 10rem;
|
||||
width: 40rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.modal-content{
|
||||
border-radius: 3rem;
|
||||
padding: 14rem;
|
||||
margin-top: 15rem;
|
||||
}
|
||||
.modal-content .title{
|
||||
width: 100%;
|
||||
font-size: 10rem;
|
||||
color: #595959;
|
||||
|
||||
}
|
||||
.modal-content .buttons{
|
||||
width: 100%;
|
||||
font-size: 8rem;
|
||||
color: #595959;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
.modal-content .buttons > div{
|
||||
border: 1px solid #D9D9D9;
|
||||
padding: 4rem 14rem;
|
||||
margin-left: 11rem;
|
||||
color: #595959;
|
||||
border-radius: 3rem;
|
||||
cursor:pointer;
|
||||
}
|
||||
.modal-content .buttons .back{
|
||||
background-color: #1890FF;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
|
||||
|
||||
<!-- 设备检测界面弹窗 -->
|
||||
<div id="device-testing-root" style="display: none;">
|
||||
<!-- 设备检测卡片 -->
|
||||
<div class="device-testing-card">
|
||||
<!-- 设备检测准备界面 -->
|
||||
<div id="device-testing-prepare" class="device-testing-prepare">
|
||||
<div class="testing-title">device attachment</div>
|
||||
<div class="testing-prepare-info">Please be sure to open the camera and microphone permission to the current page before device detection~</div>
|
||||
<div class="device-display">
|
||||
<div id="device-camera" class="device icon-normal">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shiping-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="device-voice" class="device icon-normal">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shengyin"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="device-mic" class="device icon-normal">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="device-network" class="device icon-normal">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-wangluo"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="device-loading" class="loading-background">
|
||||
<div class="device-loading"></div>
|
||||
</div>
|
||||
<!-- 连接结果提示 -->
|
||||
<div class="connect-info">
|
||||
<!-- 连接结果 -->
|
||||
<div id="connect-info"></div>
|
||||
<!-- 错误icon及错误解决指引 -->
|
||||
<div id="connect-attention-container" class="connect-attention-container" style="display: none;">
|
||||
<div id="connect-attention-icon" class="connect-attention-icon">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-warn"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="connect-attention-info" class="connect-attention-info" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备连接页面button -->
|
||||
<div class="testing-btn-display">
|
||||
<div id="start-test-btn" class="test-btn start-test start-gray">starting test</div>
|
||||
<div id="connect-again-btn" class="test-btn connect-again" style="display: none;">reconnect</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测tab页 -->
|
||||
<div id="device-testing" class="device-testing" style="display: none;">
|
||||
<div class="device-testing-title">
|
||||
<div id="camera-testing" class="testing icon-gray">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shiping-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="voice-testing" class="testing icon-gray">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shengyin"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="mic-testing" class="testing icon-gray">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="network-testing" class="testing icon-gray">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-wangluo"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测-摄像头检测 -->
|
||||
<div id="camera-testing-body" class="testing-body" style="display: none;">
|
||||
<div class="device-list camera-device-list">
|
||||
<div class="select-title" style="display: block;">Camera selection</div>
|
||||
<div class="select-list" style="display: block;">
|
||||
<select name="select" id="camera-select" class="device-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="camera-video" class="camera-video"></div>
|
||||
<div class="testing-info-container">
|
||||
<div class="testing-info">Can you see yourself clearly</div>
|
||||
<div class="button-list">
|
||||
<div id="camera-fail" class="fail-button">can't see</div>
|
||||
<div id="camera-success" class="success-button">can see</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测-播放器检测 -->
|
||||
<div id="voice-testing-body" class="testing-body" style="display: none;">
|
||||
<div class="device-list camera-device-list">
|
||||
<div class="select-title" style="display: block;">Loudspeaker</div>
|
||||
<div class="select-list" style="display: block;">
|
||||
<select name="select" id="voice-select" class="device-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-control">
|
||||
<div class="audio-control-info">Please turn up the volume of the device and click to play the audio below～</div>
|
||||
<audio id="audio-player" src="https://trtc-1252463788.cos.ap-guangzhou.myqcloud.com/web/assets/bgm-test.mp3" controls></audio>
|
||||
</div>
|
||||
<div class="testing-info-container">
|
||||
<div class="testing-info">Can you hear a sound</div>
|
||||
<div class="button-list">
|
||||
<div id="voice-fail" class="fail-button">can not hear</div>
|
||||
<div id="voice-success" class="success-button">can hear</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测-麦克风检测 -->
|
||||
<div id="mic-testing-body" class="testing-body" style="display: none;">
|
||||
<div class="device-list camera-device-list">
|
||||
<div class="select-title" style="display: block;">Microphone Selection</div>
|
||||
<div class="select-list" style="display: block;">
|
||||
<select name="select" id="mic-select" class="device-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mic-testing-container">
|
||||
<div class="mic-testing-info">Try saying 'Hello' into the microphone～</div>
|
||||
<div id="mic-bar-container" class="mic-bar-container"></div>
|
||||
<div id="audio-container"></div>
|
||||
</div>
|
||||
<div class="testing-info-container">
|
||||
<div class="testing-info">Can you see the volume icon jump</div>
|
||||
<div class="button-list">
|
||||
<div id="mic-fail" class="fail-button">can't see</div>
|
||||
<div id="mic-success" class="success-button">can see</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测-硬件及网速检测 -->
|
||||
<div id="network-testing-body" class="testing-body" style="display: none;">
|
||||
<div class="testing-index-list">
|
||||
<div class="testing-index-group">
|
||||
<div class="testing-index">OS</div>
|
||||
<div id="system"></div>
|
||||
</div>
|
||||
<div class="testing-index-group">
|
||||
<div class="testing-index">browsers</div>
|
||||
<div id="browser"></div>
|
||||
</div>
|
||||
<!-- <div class="testing-index-group">
|
||||
<div class="testing-index">IP地址</div>
|
||||
<div id="ip"></div>
|
||||
</div> -->
|
||||
<div class="testing-index-group">
|
||||
<div class="testing-index">Screen sharing capability</div>
|
||||
<div id="screen-share"></div>
|
||||
</div>
|
||||
<div class="testing-index-group">
|
||||
<div class="testing-index">network quality</div>
|
||||
<div id="uplink-network" class="network-loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testing-footer">
|
||||
<div id="testing-report-btn" class="test-btn">View test report</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测报告 -->
|
||||
<div id="device-testing-report" class="device-testing-report" style="display: none;">
|
||||
<div class="testing-title">document</div>
|
||||
<!-- 检测报告内容 -->
|
||||
<div class="device-report-list">
|
||||
<!-- 摄像头报告信息 -->
|
||||
<div class="device-report camera-report">
|
||||
<div class="device-info">
|
||||
<div class="report-icon">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shiping-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="camera-name" class="device-name"></div>
|
||||
</div>
|
||||
<div id="camera-testing-result" class="camera-testing-result"></div>
|
||||
</div>
|
||||
<!-- 扬声器报告信息 -->
|
||||
<div id="voice-report" class="device-report voice-report">
|
||||
<div class="device-info">
|
||||
<div class="report-icon">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shengyin"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="voice-name" class="device-name"></div>
|
||||
</div>
|
||||
<div id="voice-testing-result" class="voice-testing-result"></div>
|
||||
</div>
|
||||
<!-- 麦克风报告信息 -->
|
||||
<div class="device-report mic-report">
|
||||
<div class="device-info">
|
||||
<div class="report-icon">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="mic-name" class="device-name"></div>
|
||||
</div>
|
||||
<div id="mic-testing-result" class="mic-testing-result"></div>
|
||||
</div>
|
||||
<!-- 网络报告信息 -->
|
||||
<div class="device-report network-report">
|
||||
<div class="device-info">
|
||||
<div class="report-icon">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-wangluo"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="network-name" class="device-name"></div>
|
||||
</div>
|
||||
<div id="network-testing-result" class="network-testing-result"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-report-footer">
|
||||
<div id="testing-again" class="device-report-btn testing-agin">check back</div>
|
||||
<div id="testing-finish" class="device-report-btn testing-finish">accomplish</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备检测关闭按钮 -->
|
||||
<div id="device-testing-close-btn" class="device-testing-close-btn">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-baseline-close-px"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 聊天室页面 -->
|
||||
<div id="room-root" class="col-div">
|
||||
<!-- header -->
|
||||
<div class="row-div card" style="width: 100%; height: 65rem; justify-content: space-between;border-radius: 17rem;">
|
||||
<!-- 腾讯云logo -->
|
||||
<div class="row-div" style="height: 100%; width: 230rem; justify-content: center">
|
||||
|
||||
<div style="width: 86rem; height: 23rem; font-size: 18rem; color: #333333">Live</div>
|
||||
</div>
|
||||
<!-- 分享屏幕 退出 按钮 -->
|
||||
<div class="row-div" style="height: 100%; width: auto;margin-right: 28rem;">
|
||||
<img id="screen-btn" style="width: 45rem; height: 45rem" src="./img/screen-off.png" alt="">
|
||||
<div style="width: 20rem"></div>
|
||||
<!-- id="logout-btn" -->
|
||||
<!-- data-toggle="modal" data-target="#exampleModal" -->
|
||||
<img data-toggle="modal" data-target="#exampleModal" style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- content -->
|
||||
<div class="row-div" style="height: 100%; width: 100%; padding: 10rem">
|
||||
<div class="col-div" style="width: 340rem; height: 100%; padding: 10rem">
|
||||
<div class="col-div card" style="width: 100%; height: 100%; padding: 23rem;border-radius: 17rem;font-size: 14rem;">
|
||||
<!-- 成员列表 -->
|
||||
<div style="width: 100%;padding-bottom: 11rem;border-bottom: 1rem solid #EEEEEE;">School personnel</div>
|
||||
<div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
|
||||
<!-- member -->
|
||||
<div id="member-me" style="width: 100%; padding-left: 20rem;">
|
||||
<div class="row-div member"
|
||||
style="width: 100%; height: 50rem; justify-content: space-between">
|
||||
<div class="member-id">(my)</div>
|
||||
<div class="row-div" style="width:100rem; height: 20rem; justify-content: center">
|
||||
<img id="video-btn" class="member-video-btn" style="height: 100%" src="./img/camera-on.png"
|
||||
alt="">
|
||||
<div style="width: 18rem"></div>
|
||||
<img id="mic-btn" class="member-audio-btn" style="height: 100%" src="./img/mic-on.png"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频网格 -->
|
||||
<div id="video-grid" style="height: 100%; flex: 1">
|
||||
<!-- 主视频 -->
|
||||
<div id="main-video" class="video-box col-div" style="justify-content: flex-end">
|
||||
<!-- 主视频控制按钮 -->
|
||||
<!-- <div id="main-video-btns" class="row-div"
|
||||
style="width: 156rem; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
|
||||
<img id="video-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
|
||||
src="./img/big-camera-on.png" alt="" title="关闭摄像头">
|
||||
<img id="mic-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
|
||||
src="./img/big-mic-on.png" alt="" title="关闭麦克风">
|
||||
</div> -->
|
||||
<div id="mask_main" class="mask col-div">
|
||||
<!-- “摄像头未开启”遮罩 -->
|
||||
<div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
|
||||
<img style="width: 63rem; height: 69rem; z-index: 10;" src="./img/camera-max.png" alt="">
|
||||
<div style="height: 10rem"></div>
|
||||
<div style="z-index: 10">The camera is not on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="liaotian">
|
||||
<div class="wenzi" id="liaotianliebiao">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="fasongkuang">
|
||||
<input type="text" id="shurukuang" placeholder="Why don't you say something live" >
|
||||
<div class="fasonganniu" id="fasongxiaoxi">
|
||||
Send
|
||||
<img src="./img/fasong.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小视频 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button> -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="title">
|
||||
Are you sure you want to turn off live streaming
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div data-dismiss="modal">countermand</div>
|
||||
<div data-dismiss="modal" class="back" id="logout-btn">uncertain</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function GetRequest() {
|
||||
var url = location.search; //获取url中"?"符后的字串
|
||||
var theRequest = new Object();
|
||||
if(url.indexOf("?") != -1) {
|
||||
var str = url.substr(1);
|
||||
strs = str.split("&");
|
||||
for(var i = 0; i < strs.length; i++) {
|
||||
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
|
||||
}
|
||||
}
|
||||
return theRequest;
|
||||
};
|
||||
window.url = 'https://case.sy-my.net/beelink/public/home/'
|
||||
const urldata = GetRequest('roomid')
|
||||
window.roomid = urldata.roomid
|
||||
window.mid = urldata.memberid
|
||||
window.liveid = urldata.liveid
|
||||
window.uname = urldata.name
|
||||
</script>
|
||||
|
||||
|
||||
<script src="./js/jquery-3.2.1.min.js"></script>
|
||||
<script src="./js/popper.js"></script>
|
||||
<script src="./js/bootstrap-material-design.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('body').bootstrapMaterialDesign();
|
||||
});
|
||||
</script>
|
||||
<script src="./js/debug/GenerateTestUserSig.js"></script>
|
||||
<script src="./js/tim-js.js"></script>
|
||||
<script src="./js/iminit.js"></script>
|
||||
<script src="./js/lib-generate-test-usersig.min.js"></script>
|
||||
<script src="./js/iconfont.js"></script>
|
||||
<script src="./js/trtc.js"></script>
|
||||
<script src="./js/commonen.js"></script>
|
||||
<script src="./js/rtc-client.js"></script>
|
||||
<script src="./js/share-client.js"></script>
|
||||
<script src="./js/presetting.js"></script>
|
||||
<script src="./js/device-testing.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<a href="/regime/video" target="_top" id="navto"></a>
|
||||
<script>
|
||||
|
||||
setInterval(()=>{
|
||||
$.ajax({
|
||||
url: window.url + 'onExitRoom',
|
||||
headers: { "Authorization": "Bearer " + localStorage.getItem("token")},
|
||||
method:"POST",
|
||||
data:{
|
||||
type:1,
|
||||
memberid:window.mid,
|
||||
liveid:window.liveid,
|
||||
length:5
|
||||
},
|
||||
success(){
|
||||
|
||||
}
|
||||
})
|
||||
},5000)
|
||||
</script>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
},
|
||||
methods:{
|
||||
open(text){
|
||||
this.$message({
|
||||
message: text,
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
window.message = this.open
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -7,6 +7,7 @@
|
||||
<script lang="ts">
|
||||
import { getliveinfo, luzhi } from '@/api';
|
||||
import store from '@/store';
|
||||
import { useI18n } from '@/utils/i18n';
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
@ -15,10 +16,12 @@ export default defineComponent({
|
||||
setup(){
|
||||
const id = useRoute().query.id;
|
||||
const url = ref<string>()
|
||||
const lan: any = useI18n()
|
||||
if(id && typeof id == 'string'){
|
||||
getliveinfo(parseInt(id)).then((res: any)=>{
|
||||
// luzhi(res.roomid)
|
||||
url.value = `/zhibo.html?roomid=${res.roomid}&memberid=${res.memberid}&name=${escape(store.state.userinfo.name)}&liveid=${res.liveid}`
|
||||
const yuyan = lan.$s();
|
||||
url.value = yuyan == "zh" ? `/zhibo.html?roomid=${res.roomid}&memberid=${res.memberid}&name=${escape(store.state.userinfo.name)}&liveid=${res.liveid}` : `/zhiboen.html?roomid=${res.roomid}&memberid=${res.memberid}&name=${escape(store.state.userinfo.name)}&liveid=${res.liveid}`
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user