diff --git a/public/js/commonen.js b/public/js/commonen.js
new file mode 100644
index 0000000..2da9f33
--- /dev/null
+++ b/public/js/commonen.js
@@ -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();
+  }
+}
diff --git a/public/zhiboen.html b/public/zhiboen.html
new file mode 100644
index 0000000..5baeab4
--- /dev/null
+++ b/public/zhiboen.html
@@ -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">&times;</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>
\ No newline at end of file
diff --git a/src/views/regime/Liveing.vue b/src/views/regime/Liveing.vue
index 1b6878d..6bcbf79 100644
--- a/src/views/regime/Liveing.vue
+++ b/src/views/regime/Liveing.vue
@@ -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}`
             })
 
         }