// /**
//  * 视频聊天弹框
//  */
// import React from 'react';
// import { Modal } from 'antd';
// import { Util, } from 'tools/index';
// import TRTC from 'trtc-js-sdk';
// import LibGenerateTestUserSig from '../../../../public/lib-generate-test-usersig.min.js';
// import $ from './js/jquery-3.2.1.min.js';
// import { Presetting } from './js/presetting.js';
// import { $http } from 'containers/config/https';
// import '../style/index.less';


// const SDKAPPID = 1400356700;
// const image1 = require('../image/big-camera-on.png');
// const image2 = require('../image/big-mic-on.png');
// const image3 = require('../image/camera-max.png');
// let isCamOn = true;
// let isMicOn = true;
// let isScreenOn = false;
// let isJoined = true;
// let rtc = null;
// let share = null;
// let shareUserId = '';
// let cameraId = '';
// let micId = '';

// /**
//  * 签名过期时间，建议不要设置的过短
//  * <p>
//  * 时间单位：秒
//  * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
//  */
// const EXPIRETIME = 604800;

// /**
//  * 计算签名用的加密密钥
//  */
// const SECRETKEY = '15b67dc9207e4fa74e8b82a65f0e44abd1e9785829b35cc683fcebc0b1923fc6';

// class ShowVideoCallModal extends React.Component {

//     constructor(props) {
//         super(props);
//         var userData = JSON.parse(sessionStorage.getItem('userData'));
//         this.state = {
//             userData: userData,
//         }
//     }

//     componentWillReceiveProps(nextProp) {
//         if (nextProp.isShow === true) {
//             this.initData()
//             this.setBtnClickFuc()
//             // this.login()
//             // this.initStream()
//             this.loadLogin()
//         } else if (this.props.isShow === false) {
//         }
//     }

//     componentDidMount() {

//         this.isJoined_ = false;
//         this.isPublished_ = false;
//         this.isAudioMuted = false;
//         this.isVideoMuted = false;
//         this.localStream_ = null;
//         this.remoteStreams_ = [];
//         this.members_ = new Map();
//         TRTC.Logger.setLogLevel(TRTC.Logger.LogLevel.DEBUG);
//         TRTC.Logger.enableUploadLog();

//         TRTC.getDevices()
//             .then(devices => {
//                 devices.forEach(item => {
//                     console.log('device: ' + item.kind + ' ' + item.label + ' ' + item.deviceId);
//                 });
//             })
//             .catch(error => console.error('getDevices error observed ' + error));

//         // populate camera options
//         TRTC.getCameras().then(devices => {
//             devices.forEach(device => {
//                 if (!cameraId) {
//                     cameraId = device.deviceId;
//                 }
//                 let div = $('<div></div>');
//                 div.attr('id', device.deviceId);
//                 div.html(device.label);
//                 div.appendTo('#camera-option');
//             });
//         });

//         // populate microphone options
//         TRTC.getMicrophones().then(devices => {
//             devices.forEach(device => {
//                 if (!micId) {
//                     micId = device.deviceId;
//                 }
//                 let div = $('<div></div>');
//                 div.attr('id', device.deviceId);
//                 div.html(device.label);
//                 div.appendTo('#mic-option');
//             });
//         });
//     }

//     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);
//             }
//         };
//     }


//     muteAudio() {
//         this.localStream_.muteAudio();
//     }

//     unmuteAudio() {
//         this.localStream_.unmuteAudio();
//     }

//     muteVideo() {
//         this.localStream_.muteVideo();
//     }

//     unmuteVideo() {
//         this.localStream_.unmuteVideo();
//     }

//     setCameraId(thisDiv) {
//         cameraId = $(thisDiv).attr('id');
//         console.log('setCameraId: ' + cameraId);
//     }

//     setMicId(thisDiv) {
//         micId = $(thisDiv).attr('id');
//         console.log('setMicId: ' + micId);
//     }

//     handleVideo(){
//         $('#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;
//                 this.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;
//                 this.unmuteVideo();
//             }
//         });
//     }

//     handleMicPhone(){
//         $('#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;
//                 this.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;
//                 this.unmuteAudio();
//             }
//         });
//     }

//     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
//         //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;
//                 this.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;
//                 this.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;
//                 this.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;
//                 this.unmuteAudio();
//             }
//         });
//         //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');
//             this.exchangeView($('#main-video'), mainVideo);
//             //将video-grid中第一个div设为main-video
//             $('.video-box').first().css('grid-area', '1/1/3/4');
//             //chromeM71以下会自动暂停，手动唤醒
//             if (this.getBroswer().broswer == 'Chrome' && this.getBroswer().version < '72') {
//                 rtc.resumeStreams();
//             }
//         });

//         //chrome60以下不支持popover，防止error
//         if (this.getBroswer().broswer == 'Chrome' && this.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');
//         });
//     }

//     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();
//     }

//     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" };
//     }

//     loadLogin() {
//         var roomId = '1000';
//         this.client_
//             .join({ roomId })
//             .catch(error => {
//                 console.log('进房失败 ' + error);
//             })
//             .then(() => {
//                 // console.log('进房成功');
//                 // this.localStream()
//                 this.join();
//             });
//     }

//     initData() {
//         const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
//         const userSig = generator.genTestUserSig(this.state.userData.userName);
//         this.client_ = TRTC.createClient({
//             mode: 'videoCall',
//             sdkAppId: SDKAPPID,
//             userId: this.state.userData.userName,
//             userSig: userSig
//         });
//         this.handleEvents();
//     }

//     getCameraId() {
//         console.log('selected cameraId: ' + cameraId);
//         return cameraId;
//     }

//     getMicrophoneId() {
//         console.log('selected microphoneId: ' + micId);
//         return micId;
//     }


//     async join() {
//         if (this.isJoined_) {
//             console.warn('duplicate RtcClient.join() observed');
//             return;
//         }
//         try {
//             console.log('join room success');
//             this.isJoined_ = true;
//             this.localStream_ = TRTC.createStream({
//                 userId: this.state.userData.userName, audio: true, video: true, mirror: false,
//                 cameraId: this.getCameraId(), microphoneId: this.getMicrophoneId(),
//             });
//             this.localStream_
//                 .initialize()
//                 .catch(error => {
//                     console.log('初始化本地流失败 ' + error);
//                 })
//                 .then(() => {
//                     console.log('初始化本地流成功');
//                     // this.loadLocalStaem(this.localStream_)
//                 });
//             try {
//                 await this.localStream_.initialize();
//                 console.log('initialize local stream success');

//                 this.localStream_.on('player-state-changed', event => {
//                     console.log(`local stream ${event.type} player is ${event.state}`);
//                 });
//                 //设置1080p视频
//                 this.localStream_.setVideoProfile({ width: 1920, height: 1080, frameRate: 15, bitrate: 2000 /* kpbs */});
//                 // publish the local stream
//                 await this.publish();

//                 this.localStream_.play('main-video');
//                 $('#main-video-btns').show();
//                 $('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
//                 // });


//             } catch (e) {
//                 console.error('failed to initialize local stream - ' + e);
//             }
//         } catch (e) {
//             console.error('join room failed! ' + e);
//         }
//         //更新成员状态
//         let states = this.client_.getRemoteMutedState();
//         for (let state of states) {
//             if (state.audioMuted) {
//                 $('#' + state.userId)
//                     .find('.member-audio-btn')
//                     .attr('src', './img/mic-off.png');
//             }
//             if (state.videoMuted) {
//                 $('#' + state.userId)
//                     .find('.member-video-btn')
//                     .attr('src', './img/camera-off.png');
//                 $('#mask_' + this.members_.get(state.userId).getId()).show();
//             }
//         }
//     }

//     async leave() {
//         if (!this.isJoined_) {
//             console.warn('leave() - please join() firstly');
//             return;
//         }
//         // ensure the local stream is unpublished before leaving.
//         await this.unpublish();

//         // leave the room
//         await this.client_.leave();

//         this.localStream_.stop();
//         this.localStream_.close();
//         this.localStream_ = null;
//         this.isJoined_ = false;
//         this.resetView();
//     }

//     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();
//                     }
//                 });
//         }
//     }

//     async publish() {
//         if (!this.isJoined_) {
//             console.warn('publish() - please join() firstly');
//             return;
//         }
//         if (this.isPublished_) {
//             console.warn('duplicate RtcClient.publish() observed');
//             return;
//         }
//         try {
//             // await this.client_.publish(this.localStream_);
//             await this.client_
//                 .publish(this.localStream_)
//                 .catch(error => {
//                     console.log('本地流发布失败 ' + error);
//                 })
//                 .then(() => {
//                     console.log('本地流发布成功');
//                     // this.initLocalSteam(localStream)
//                 });
//         } catch (e) {
//             console.error('failed to publish local stream ' + e);
//             this.isPublished_ = false;
//         }

//         this.isPublished_ = true;
//     }

//     async unpublish() {
//         if (!this.isJoined_) {
//             console.warn('unpublish() - please join() firstly');
//             return;
//         }
//         if (!this.isPublished_) {
//             console.warn('RtcClient.unpublish() called but not published yet');
//             return;
//         }

//         await this.client_.unpublish(this.localStream_);
//         this.isPublished_ = false;
//     }

//     muteLocalAudio() {
//         this.localStream_.muteAudio();
//     }

//     unmuteLocalAudio() {
//         this.localStream_.unmuteAudio();
//     }

//     muteLocalVideo() {
//         this.localStream_.muteVideo();
//     }

//     unmuteLocalVideo() {
//         this.localStream_.unmuteVideo();
//     }

//     resumeStreams() {
//         this.localStream_.resume();
//         for (let stream of this.remoteStreams_) {
//             stream.resume();
//         }
//     }

//     addMemberView(id) {
//         let memberElm = $('#member-me').clone();
//         memberElm.attr('id', id);
//         memberElm.find('div.member-id').html(id);
//         memberElm.css('display', 'flex');
//         memberElm.appendTo($('#member-list'));
//     }

//     removeView(id) {
//         if ($('#' + id)[0]) {
//             $('#' + id).remove();
//             //将video-grid中第一个div设为main-video
//             $('.video-box').first().css('grid-area', '1/1/3/4');
//         }
//     }

//     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');
//             this.exchangeView(div, mainVideo);
//             //将video-grid中第一个div设为main-video
//             $('.video-box').first().css('grid-area', '1/1/3/4');
//             //chromeM71以下会自动暂停，手动唤醒
//             if (this.getBroswer().broswer == 'Chrome' && this.getBroswer().version < '72') {
//                 rtc.resumeStreams();
//             }
//         });
//     }

//     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];
//     }

//     handleEvents() {
//         this.client_.on('error', err => {
//             console.error(err);
//             alert(err);
//             location.reload();
//         });
//         this.client_.on('client-banned', err => {
//             console.error('client has been banned for ' + err);
//             if (!this.isHidden()) {
//                 alert('您已被踢出房间');
//                 location.reload();
//             } else {
//                 document.addEventListener(
//                     'visibilitychange',
//                     () => {
//                         if (!this.isHidden()) {
//                             alert('您已被踢出房间');
//                             location.reload();
//                         }
//                     },
//                     false
//                 );
//             }
//         });
//         // fired when a remote peer is joining the room
//         this.client_.on('peer-join', evt => {
//             const userId = evt.userId;
//             console.log('peer-join ' + userId);
//             if (userId !== shareUserId) {
//                 this.addMemberView(userId);
//             }
//         });
//         // fired when a remote peer is leaving the room
//         this.client_.on('peer-leave', evt => {
//             const userId = evt.userId;
//             this.removeView(userId);
//             console.log('peer-leave ' + userId);
//         });
//         // fired when a remote stream is added
//         this.client_.on('stream-added', evt => {
//             const remoteStream = evt.stream;
//             const id = remoteStream.getId();
//             const userId = remoteStream.getUserId();
//             this.members_.set(userId, remoteStream);
//             console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
//             if (remoteStream.getUserId() === shareUserId) {
//                 // don't need screen shared by us
//                 this.client_.unsubscribe(remoteStream);
//             } else {
//                 console.log('subscribe to this remote stream');
//                 this.client_.subscribe(remoteStream);
//             }
//         });
//         // fired when a remote stream has been subscribed
//         this.client_.on('stream-subscribed', evt => {
//             const uid = evt.userId;
//             const remoteStream = evt.stream;
//             const id = remoteStream.getId();
//             this.remoteStreams_.push(remoteStream);
//             remoteStream.on('player-state-changed', event => {
//                 console.log(`${event.type} player is ${event.state}`);
//                 if (event.type == 'video' && event.state == 'STOPPED') {
//                     $('#mask_' + remoteStream.getId()).show();
//                     $('#' + remoteStream.getUserId())
//                         .find('.member-video-btn')
//                         .attr('src', 'img/camera-off.png');
//                 }
//                 if (event.type == 'video' && event.state == 'PLAYING') {
//                     $('#mask_' + remoteStream.getId()).hide();
//                     $('#' + remoteStream.getUserId())
//                         .find('.member-video-btn')
//                         .attr('src', 'img/camera-on.png');
//                 }
//             });
//             this.addVideoView(id);
//             // objectFit 为播放的填充模式，详细参考：https://trtc-1252463788.file.myqcloud.com/web/docs/Stream.html#play
//             remoteStream.play(id, { objectFit: 'contain' });
//             //添加“摄像头未打开”遮罩
//             let mask = $('#mask_main').clone();
//             mask.attr('id', 'mask_' + id);
//             mask.appendTo($('#player_' + id));
//             mask.hide();
//             if (!remoteStream.hasVideo()) {
//                 mask.show();
//                 $('#' + remoteStream.getUserId())
//                     .find('.member-video-btn')
//                     .attr('src', 'img/camera-off.png');
//             }
//             console.log('stream-subscribed ID: ', id);
//         });
//         // fired when the remote stream is removed, e.g. the remote user called Client.unpublish()
//         this.client_.on('stream-removed', evt => {
//             const remoteStream = evt.stream;
//             const id = remoteStream.getId();
//             remoteStream.stop();
//             this.remoteStreams_ = this.remoteStreams_.filter(stream => {
//                 return stream.getId() !== id;
//             });
//             this.removeView(id);
//             console.log(`stream-removed ID: ${id}  type: ${remoteStream.getType()}`);
//         });

//         this.client_.on('stream-updated', evt => {
//             const remoteStream = evt.stream;
//             let uid = this.getUidByStreamId(remoteStream.getId());
//             if (!remoteStream.hasVideo()) {
//                 $('#' + uid)
//                     .find('.member-video-btn')
//                     .attr('src', 'img/camera-off.png');
//             }
//             console.log(
//                 'type: ' +
//                 remoteStream.getType() +
//                 ' stream-updated hasAudio: ' +
//                 remoteStream.hasAudio() +
//                 ' hasVideo: ' +
//                 remoteStream.hasVideo() +
//                 ' uid: ' +
//                 uid
//             );
//         });

//         this.client_.on('mute-audio', evt => {
//             console.log(evt.userId + ' mute audio');
//             $('#' + evt.userId)
//                 .find('.member-audio-btn')
//                 .attr('src', 'img/mic-off.png');
//         });
//         this.client_.on('unmute-audio', evt => {
//             console.log(evt.userId + ' unmute audio');
//             $('#' + evt.userId)
//                 .find('.member-audio-btn')
//                 .attr('src', 'img/mic-on.png');
//         });
//         this.client_.on('mute-video', evt => {
//             console.log(evt.userId + ' mute video');
//             $('#' + evt.userId)
//                 .find('.member-video-btn')
//                 .attr('src', 'img/camera-off.png');
//             let streamId = this.members_.get(evt.userId).getId();
//             if (streamId) {
//                 $('#mask_' + streamId).show();
//             }
//         });
//         this.client_.on('unmute-video', evt => {
//             console.log(evt.userId + ' unmute video');
//             $('#' + evt.userId)
//                 .find('.member-video-btn')
//                 .attr('src', 'img/camera-on.png');
//             const stream = this.members_.get(evt.userId);
//             if (stream) {
//                 let streamId = stream.getId();
//                 if (streamId) {
//                     $('#mask_' + streamId).hide();
//                 }
//             }
//         });
//     }

//     showStreamState(stream) {
//         console.log('has audio: ' + stream.hasAudio() + ' has video: ' + stream.hasVideo());
//     }

//     getUidByStreamId(streamId) {
//         for (let [uid, stream] of this.members_) {
//             if (stream.getId() == streamId) {
//                 return uid;
//             }
//         }
//     }

//     closeModal(name) {
//         // this.client_
//         //     .leave()
//         //     .then(() => {
//         //         // 退房成功，可再次调用client.join重新进房开启新的通话。
//         //     })
//         //     .catch(error => {
//         //         console.log('退房失败 ' + error);
//         //         // 错误不可恢复，需要刷新页面。
//         //     });
//         this.leave()
//         let { onHide } = this.props;
//         onHide && onHide();
//     }

//     render() {
//         // modal 是否弹框标记
//         return <div>
//             <Modal className='video-component-modal'
//                 title={'视频通话'}
//                 maskClosable={false}
//                 visible={this.props.isShow}
//                 onCancel={this.closeModal.bind(this)}
//                 footer={null}>
//                 {/**主视频 */}
//                 <div id="video-grid" style={{ height: '100%', flex: '1' }}>
//                     <div id="main-video" className="video-box col-div">
//                         {/**主视频控制按钮 */}
//                         {/* <div id="main-video-btns" className="row-div"
//                             style={{ width: 156, position: 'absolute', zIndex: '10', justifyContent: 'center', alignSelf: 'flex-end' }}>
//                             <img id="video-btn" style={{ width: 68, height: 68 }} onClick={this.handleVideo.bind(this)}
//                                 src={image1} alt="" title="关闭摄像头" />
//                             <img id="mic-btn" style={{ width: 68, height: 68 }} onClick={this.handleMicPhone.bind(this)}
//                                 src={image2} alt="" title="关闭麦克风" />
//                         </div> */}
//                         <div id="mask_main" className="mask col-div">
//                             {/**摄像头未开启”遮罩 */}
//                             <div></div>
//                             {/* <img style={{ width: 63, height: 69, zIndex: 10 }} src={image3} alt="" />
//                             <div style={{ height: 10 }}></div>
//                             <div style={{ zIndex: 10 }}>摄像头未打开</div> */}
//                             {/* <div style={{height:'100%',width:'100%',position:'absolute',backgroundColor:'#D8D8D8'}}></div>
//                             <img style={{ width: 63, height: 69, zIndex: 10 }} src="./img/camera-max.png" alt=""/>
//                             <div style={{ height: 10 }}></div>
//                             <div style={{ zIndex: 10 }}>摄像头未打开</div> */}
//                         </div>
//                     </div></div>

//             </Modal></div>
//     }
// }

// export default ShowVideoCallModal;