beelink/public/js/common.js
2020-11-27 11:37:44 +08:00

677 lines
16 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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').val());
$('#member-me')
.find('.member-id')
.html($('#userId').val() + '(我)');
}
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', '打开摄像头');
$('#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', '关闭摄像头');
$('#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', '打开麦克风');
$('#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', '关闭麦克风');
$('#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('当前浏览器不支持屏幕分享!');
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', () => {
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) {
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)
})
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)
})
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]) {
$('#' + 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();
}
}