iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
422 lines (399 loc) • 13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _rkWebIcon = require('rk-web-icon');
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _audioDom = require('./audioDom');
var _audioDom2 = _interopRequireDefault(_audioDom);
var _vueTypes = require('../../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'WebRtcPanel',
props: {
neCall: _vueTypes2['default'].object,
person: _vueTypes2['default'].object.def({
name: '',
avatar: '',
account: '',
password: ''
}),
getToken: _vueTypes2['default'].func,
callTimeout: _vueTypes2['default'].number.def(1000 * 60)
},
directives: {
DragBox: {
inserted: function inserted(el, binding) {
el.onmousedown = function (e) {
e.stopPropagation();
e.preventDefault();
var disX = e.pageX - el.offsetLeft;
var disY = e.pageY - el.offsetTop;
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
document.onmousemove = function (moveEvent) {
var elWidth = el.clientWidth;
var elHeight = el.clientHeight;
var touchX = moveEvent.pageX - disX;
var touchY = moveEvent.pageY - disY;
if (touchX - elWidth * 0.5 < 0) {
touchX = elWidth * 0.5;
}
if (touchX > winWidth - elWidth * 0.5) {
touchX = winWidth - elWidth * 0.5;
}
if (touchY - elHeight * 0.5 < 0) {
touchY = elHeight * 0.5;
}
if (touchY > winHeight - elHeight * 0.5) {
touchY = winHeight - elHeight * 0.5;
}
el.style.left = touchX + 'px';
el.style.top = touchY + 'px';
// if (binding.arg === 2) {
//
// }
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
};
}
}
},
data: function data() {
return {
isStart: false,
toolsIndex: 2,
isFull: false,
isSwitch: false,
audio: undefined,
isMute: false,
tools: [{
type: 'min',
title: '最小化',
icon: 'basic_linear_button_reduce4',
show: true
}, {
type: 'max',
title: '最大化',
icon: 'basic_linear_button_plus4',
show: true
}, {
type: 'close',
title: '关闭',
icon: 'basic_linear_button_close',
show: true
}],
time: 0,
timer: null
};
},
mounted: function mounted() {
var _this = this;
document.body.appendChild(this.$el);
if (this.neCall && this.person && this.person.account) {
this.neCall.setTokenService(function (uid) {
return new Promise(function (resolve) {
_this.$props.getToken({
uid: uid,
expireAt: 2 * 60 * 60
}).then(function (ret) {
console.log(ret);
resolve(ret.data.token);
});
});
});
this.neCall.setCallProfile({
resolution: 16,
frameRate: 5,
quality: 'music_standard'
});
this.neCall.call({
userId: this.person.account,
type: '2',
attachment: JSON.stringify({
call: 'testValue',
callType: 0
})
}).then(function (ret) {
_this.audio.play();
console.log('邀请成功...');
})['catch'](function (err) {
console.log(err);
});
this.neCall.setCallTimeout(this.$props.callTimeout);
this.neCall.addDelegate('onJoinChannel', function (res) {
_this.neCall.setupLocalView(_this.$refs.cameraAssist);
});
this.neCall.addDelegate('onCallEnd', function () {
_this.closeWebRtc().then(function () {
_this.$emit('close');
});
});
this.neCall.addDelegate('onError', function (error) {
var _console;
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
(_console = console).log.apply(_console, ['onError 信息', error].concat(args));
});
this.neCall.addDelegate('onUserAccept', function (userId) {
console.log('远端用户接受邀请事件', userId);
_this.audio.pause();
_this.isStart = true;
_this.startTime();
});
this.neCall.addDelegate('onUserEnter', function (userId) {
_this.neCall.enableLocalAudio(true);
_this.neCall.enableLocalVideo(true);
_this.neCall.setupRemoteView(userId, _this.$refs.cameraMain);
});
this.neCall.addDelegate('onUserReject', function (userId) {
_this.$message.error('用户已拒绝');
_this.closeWebRtc().then(function () {
_this.$emit('close');
});
});
this.neCall.addDelegate('onUserLeave', function (userId) {
_this.$message.error('用户已断开');
_this.closeWebRtc().then(function () {
_this.$emit('close');
});
});
this.neCall.addDelegate('onUserBusy', function (userId) {
_this.$message.error('用户占线');
_this.closeWebRtc().then(function () {
_this.$emit('close');
});
});
this.neCall.addDelegate('onCallingTimeOut', function (reason) {
_this.$message.error('呼叫超时');
_this.closeWebRtc().then(function () {
_this.$emit('close');
});
});
}
},
destroyed: function destroyed() {
if (this.$el.parentNode) this.$el.parentNode.removeChild(this.$el);
},
beforeDestroy: function beforeDestroy() {
var _this2 = this;
this.audio.pause();
this.neCall.hangup();
setTimeout(function () {
_this2.time = 0;
clearInterval(_this2.timer);
}, 100);
},
methods: {
startTime: function startTime() {
var _this3 = this;
this.timer = setInterval(function () {
_this3.time++;
}, 1000);
},
formatTime: function formatTime(e) {
var miss = e * 1000;
var hours = parseInt(miss % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
var minutes = parseInt(miss % (1000 * 60 * 60) / (1000 * 60));
var seconds = miss % (1000 * 60) / 1000;
return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
},
closeWebRtc: function closeWebRtc() {
var _this4 = this;
return new Promise(function (resolve) {
try {
_this4.toolsIndex = 2;
resolve();
} catch (e) {
resolve();
}
});
},
loadAudio: function loadAudio(e) {
this.audio = e;
},
handleTools: function handleTools(event, e) {
var _this5 = this;
if (event) {
event.stopPropagation();
event.preventDefault();
}
if (e === 1) {
this.toolsIndex = 1;
this.tools[this.toolsIndex - 1].show = false;
} else if (e === 2) {
this.toolsIndex = this.toolsIndex === 3 ? 2 : 3;
} else {
this.closeWebRtc().then(function () {
_this5.$emit('close');
});
}
},
handleWinReset: function handleWinReset() {
if (this.toolsIndex !== 1) {
return false;
}
this.toolsIndex = 2;
this.tools[0].show = true;
},
handleMute: function handleMute() {
this.isMute = !this.isMute;
this.neCall.enableLocalAudio(!this.isMute);
}
},
render: function render() {
var _this6 = this;
var h = arguments[0];
var toolsNodes = this.tools.map(function (item, index) {
return item.show ? h(
'div',
{
'class': 'webRtc-panel-tools-item',
attrs: { title: item.title
},
on: {
'click': function click(event) {
return _this6.handleTools(event, index + 1);
}
}
},
[h(_rkWebIcon.IepIcon, {
attrs: { type: item.icon }
})]
) : null;
});
var webRtcClas = (0, _classnames2['default'])(['webRtc-panel', this.toolsIndex === 1 ? 'webRtc-panel-min' : null, this.toolsIndex === 3 ? 'webRtc-panel-max' : null]);
return h(
'div',
(0, _babelHelperVueJsxMergeProps2['default'])([{
'class': webRtcClas
}, {
directives: [{
name: 'DragBox',
arg: this.toolsIndex
}]
}]),
[h(_audioDom2['default'], {
on: {
'load': function load(e) {
return _this6.loadAudio(e);
}
}
}), h(
'div',
{ 'class': 'webRtc-panel-tools', on: {
'click': function click() {
return _this6.handleWinReset();
}
}
},
[this.toolsIndex === 2 && this.isStart ? h(
'div',
{ 'class': 'webRtc-panel-tools-left' },
['\u6B63\u5728\u4E0E', this.person.name || '未知', '\u89C6\u9891\u901A\u8BDD\u4E2D...']
) : null, h(
'div',
{ 'class': 'webRtc-panel-tools-right' },
[toolsNodes]
)]
), this.isStart ? h(
'div',
{ 'class': 'webRtc-panel-camera' },
[h(
'div',
{ 'class': 'webRtc-panel-camera-view' },
[h('div', { 'class': 'webRtc-panel-camera-view-main', ref: 'cameraMain' }), h('div', { 'class': 'webRtc-panel-camera-view-assist', ref: 'cameraAssist' })]
), this.time > 0 ? h(
'div',
{ 'class': 'webRtc-panel-camera-time' },
[this.formatTime(this.time)]
) : null, h(
'div',
{ 'class': 'webRtc-panel-camera-tools tools-group' },
[h(
'div',
{ 'class': 'tools-group-item' },
[h(
'div',
{ 'class': 'tools-group-item-btn', on: {
'click': function click() {
return _this6.handleMute();
}
}
},
[h('i', { 'class': this.isMute ? 'iconfont icon-mute_no' : 'iconfont icon-mute' })]
), this.isMute ? h('span', ['\u89E3\u9664\u9759\u97F3']) : h('span', ['\u9759\u97F3'])]
), h(
'div',
{ 'class': 'tools-group-item' },
[h(
'div',
{
'class': 'tools-group-item-btn',
on: {
'click': function click() {
_this6.neCall.hangup();
_this6.closeWebRtc().then(function () {
_this6.$emit('close');
});
}
}
},
[h('i', { 'class': 'iconfont icon-hangup' })]
), h('span', ['\u6302\u65AD'])]
)]
)]
) : h(
'div',
{ 'class': 'webRtc-panel-wrapper' },
[h('div', { 'class': 'webRtc-panel-wrapper-bg', attrs: { id: 'bgView' },
ref: 'bgView' }), h(
'div',
{ 'class': 'webRtc-panel-wrapper-mask' },
[h(
'div',
{ 'class': 'webRtc-panel-wrapper-user' },
[this.toolsIndex === 2 && this.person.avatar ? h('img', {
attrs: { src: this.person.avatar }
}) : null, h('span', [this.person.name || '未知']), h(
'div',
{ 'class': 'spinner-text' },
[h('span', ['\u6B63\u5728\u7B49\u5F85\u5BF9\u65B9\u63A5\u542C']), h(
'div',
{ 'class': 'spinner' },
[h('div', { 'class': 'bounce1' }), h('div', { 'class': 'bounce2' }), h('div', { 'class': 'bounce3' })]
)]
)]
), h(
'div',
{ 'class': 'webRtc-panel-wrapper-tools' },
[h(
'div',
{
'class': 'webRtc-panel-wrapper-tools-btn',
on: {
'click': function click() {
if (_this6.neCall) {
_this6.neCall.cancel();
}
_this6.closeWebRtc().then(function () {
_this6.$emit('close');
});
}
}
},
[h('i', { 'class': 'iconfont icon-hangup' })]
), h('span', ['\u53D6\u6D88'])]
)]
)]
)]
);
}
};