cnhis-design-vue 2.1.56 → 2.1.58

package/src/utils/kty-sdk.js

@@ -1,582 +1,582 @@
-import Kty from './kty.min-1.0.0';
-import io from 'socket.io-client';
-window.io = io; // kty 需要从 window上访问socket.io
-class Events {
-  constructor() {
-    this._events = {};
-  }
-  on(name, handle) {
-    let event = this._events[name];
-    if (!event) {
-      event = this._events[name] = [];
-    }
-    const old = event.find(fn => fn === handle);
-    if (old) return;
-    event.push(handle);
-  }
-  off(name, handle) {
-    let event = this._events[name];
-    if (!event) return;
-    if (handle) {
-      const index = event.findIndex(fn => fn === handle);
-      index >= 0 && event.splice(index, 1);
-    } else {
-      this._events[name] = null;
-    }
-  }
-  emit(name, ...args) {
-    let event = this._events[name];
-    if (event) {
-      event.forEach(fn => fn(...args));
-    }
-  }
-}
-// 预览流控制器
-class ViewStreamControl {
-  constructor(options, kty) {
-    this._isViewStream = true;
-    this._kty = kty;
-    this._videoStream = null;
-    this._audioStream = null;
-  }
-  createStream(type) {
-    if (type === 'video') {
-      return this._kty.createVideo().then(stream => {
-        this._videoStream = new Stream({}, stream);
-      });
-    } else if (type === 'audio') {
-      return this._kty.createAudio().then(stream => {
-        this._audioStream = new Stream({ type: 'audio' }, stream);
-      });
-    }
-  }
-  async removeStream(type) {
-    let stream;
-    if (type === 'video') {
-      stream = this._videoStream;
-    } else if (type === 'audio') {
-      stream = this._audioStream;
-    }
-    if (stream && this._kty) {
-      stream.stop();
-      await this._kty.clearLocalStream(stream);
-    }
-  }
-  async initialize() {
-    if (this._kty) {
-      return Promise.all([this.createStream('video'), this.createStream('audio')]);
-    } else {
-      return Promise.reject(false);
-    }
-  }
-  getLocalStream() {
-    const stream = this._videoStream?.getStream();
-    return { localStream: stream };
-  }
-  play(id) {
-    const dom = id instanceof HTMLElement ? id : document.getElementById(id);
-    if (!dom) return;
-    if (!this._dom) {
-      this._dom = document.createElement('div');
-      this._dom.style = 'width:100%;height:100%';
-    }
-    dom.appendChild(this._dom);
-    this._videoStream?.play(this._dom);
-    this._audioStream?.play(this._dom);
-  }
-  stop() {
-    this.muteVideo();
-    this.muteAudio();
-    this._dom?.parentNode?.removeChild(this._dom);
-    this._dom = null;
-  }
-  async close() {
-    this.stop();
-    if (this._kty) {
-      await Promise.all([this.removeStream('video'), this.removeStream('audio')]);
-    }
-    this._kty = null;
-  }
-  muteAudio() {
-    this._dom && this._audioStream?.stop(this._dom);
-  }
-  unmuteAudio() {
-    this._dom && this._audioStream?.play(this._dom);
-  }
-  muteVideo() {
-    this._dom && this._videoStream?.stop(this._dom);
-  }
-  unmuteVideo() {
-    this._dom && this._videoStream?.play(this._dom);
-  }
-  on(name, fn) {
-    const events = this.events || {};
-    if (!events[name]) {
-      events[name] = [];
-    }
-    if (events[name].indexOf(fn) < 0) {
-      events[name].push(fn);
-    }
-    this.events = events;
-  }
-  setVideoProfile() {}
-  switchDevice(type, id) {
-    const isVideo = type === 'video';
-    const list = isVideo ? TRTC.getCameras() : TRTC.getMicrophones();
-    return list.then(list => {
-      const target = list.find(item => item.deviceId === id);
-      if (target) {
-        const k = isVideo ? 'selectVideoInput' : 'selectAudioOutPut';
-        this._kty.setDevice({ [k]: target });
-        let stream = isVideo ? this._videoStream : this._audioStream;
-        const isPlay = stream.isPlay;
-        this.removeStream(type).then(() => {
-          this.createStream(type).then(() => {
-            if (isPlay && this._dom) {
-              stream = isVideo ? this._videoStream : this._audioStream;
-              stream.play(this._dom);
-            }
-          });
-        });
-      }
-      return target;
-    });
-  }
-}
-
-// 远端流控制器
-class RemoteStreamControl {
-  constructor(kty, callbacks) {
-    this._kty = kty;
-    this.ids = new Set();
-    this.streams = {};
-    this.userStreamIds = {};
-    this.callbacks = callbacks;
-  }
-  getUserId(id) {
-    if (!id) return void 0;
-    const allParticipants = this._kty.getAllParticipants();
-    const info = allParticipants.find(item => item.streamId === id || item.shareStreamId == id);
-    return info?.user;
-  }
-  addStream(id, stream, type) {
-    const { ids } = this;
-    if (!id || !stream || ids?.has(id)) return;
-    ids.add(id);
-    const user = this.getUserId(id);
-    const remoteStream = new Stream({ type, user }, { id, ...stream });
-    if (user) {
-      this.userStreamIds[user] = this.userStreamIds[user] || {};
-      const streamIds = this.userStreamIds[user];
-      const remove = this.callbacks?.removeStream;
-      if (remove) {
-        Object.keys(streamIds).forEach(k => {
-          // 全部删除 保证只接受单一类型 (为了做到屏幕共享和摄像头只存在一个)
-          const value = this.streams[streamIds[k]];
-          value && remove(value);
-        });
-      }
-      const key = remoteStream.getType();
-      if (key) {
-        streamIds[key] = id;
-      }
-    }
-    this.streams[id] = remoteStream;
-    // 流新增的回调
-    const add = this.callbacks?.addStream;
-    add && add(remoteStream);
-    return remoteStream;
-  }
-  removeStream(id) {
-    let value = this.streams && this.streams[id];
-    if (value && this.ids.has(id)) {
-      this.ids.delete(id);
-      this.streams[id] = null;
-      delete this.streams[id];
-
-      const type = value.getType();
-      const user = value.getUserId();
-      const streamIds = this.userStreamIds[user];
-      const remove = this.callbacks?.removeStream;
-      value && remove && remove(value);
-      if (streamIds && type) {
-        streamIds[type] = null;
-        delete streamIds[type];
-        const k = Object.keys(streamIds).pop();
-        if (k) {
-          // addStream时候会删除一些流 这时候如果有被删的恢复一个(为了做到屏幕共享和摄像头只存在一个)
-          const value = this.streams[streamIds[k]];
-          const add = this.callbacks?.addStream;
-          value && add && add(value);
-        }
-      }
-    }
-    return value;
-  }
-  destory() {
-    if (this.streams) {
-      Object.keys(this.streams).forEach(k => {
-        const stream = this.streams[k];
-        stream?.stop();
-      });
-    }
-    this._kty = null;
-    this.streams = null;
-    this.userStreamIds = null;
-    this.callbacks = null;
-    this.ids.clear();
-  }
-}
-
-// 直播流
-class Stream {
-  constructor(options, stream) {
-    this.options = options;
-    this._stream = stream;
-    Object.defineProperty(this, 'id_', {
-      configurable: true,
-      get() {
-        return this.getStream()?.id;
-      }
-    });
-    Object.defineProperty(this, 'userId_', {
-      configurable: true,
-      get() {
-        return this.getUserId();
-      }
-    });
-  }
-  getStream() {
-    return this._stream;
-  }
-  getId() {
-    return 'video_' + (this.id_ || '');
-  }
-  getType() {
-    return this.options?.type;
-  }
-  getUserId() {
-    return this.options?.user;
-  }
-  play(id) {
-    const stream = this.getStream();
-    if (stream && stream.mediaStream) {
-      const dom = id instanceof HTMLElement ? id : document.getElementById(id);
-      if (!dom) return;
-      let video = this._video;
-      if (!video) {
-        const isAudio = this.options?.type === 'audio';
-        video = document.createElement(isAudio ? 'audio' : 'video');
-        video.id = this.getId();
-        video.style = isAudio ? 'width:0,height:0' : 'width:100%;height:100%;object-fit:cover;background:#000';
-        video.setAttribute('autoplay', true);
-        !isAudio && video.setAttribute('muted', true);
-        video.setAttribute('playsInline', true);
-        video.srcObject = stream.mediaStream;
-        this._video = video;
-      }
-      dom.appendChild(video);
-      if (video.paused) {
-        video.play();
-      }
-      this.isPlay = 1;
-    }
-  }
-  stop() {
-    const video = this._video;
-    if (video) {
-      if (!video.paused) {
-        video.pause();
-      }
-      video.parentNode && video.parentNode.removeChild(video);
-      this._video = null;
-    }
-    this.isPlay = 0;
-  }
-  mute() {
-    if (this._video) {
-      this._video.srcObject = null;
-    }
-  }
-  unmute() {
-    if (this._video) {
-      this._video.srcObject = this.getStream()?.mediaStream || null;
-    }
-  }
-  close() {}
-  on() {}
-  setVideoProfile() {}
-}
-
-// 本地流
-class LocalStream extends Stream {
-  constructor(options, subKty) {
-    super(options, null);
-    this._subKty = subKty;
-  }
-  getStream() {
-    const stream = this._subKty.getLocalStream();
-    return this.options.screen ? stream.shareStream : stream.localStream;
-  }
-  getUserId() {
-    return this._subKty.getSelf()?.user;
-  }
-  on(name, fn) {
-    this._subKty.on(name, fn);
-  }
-  off(name) {
-    this._subKty.off(name);
-  }
-  initialize() {
-    return this._subKty.initConferenceStream();
-  }
-  muteAudio() {
-    return this._subKty.closeAudio();
-  }
-  unmuteAudio() {
-    return this._subKty.openAudio();
-  }
-  muteVideo() {
-    this.mute();
-    return this._subKty.closeVideo();
-  }
-  unmuteVideo() {
-    this.unmute();
-    return this._subKty.openVideo();
-  }
-  switchMode(screen = false) {
-    this.options.screen = screen;
-    const video = this._video;
-    if (video) {
-      const parent = video.parentNode;
-      this.stop();
-      parent && this.play(parent);
-    }
-  }
-  switchDevice(type, id) {
-    const list = type === 'video' ? TRTC.getCameras() : TRTC.getMicrophones();
-    return list.then(list => {
-      const target = list.find(item => item.deviceId === id);
-      if (target) {
-        const k = type === 'video' ? 'selectVideoInput' : 'selectAudioOutPut';
-        return this._subKty.setDevice({ [k]: target });
-      }
-      return target;
-    });
-  }
-  close() {
-    if (this._isPreview) {
-      this._subKty.close();
-    }
-  }
-  replaceKty(kty) {
-    this._subKty = kty;
-  }
-}
-
-// Kty 空扩展子类(封装一些方法 向 TRTC调用靠齐)
-class SubKty extends Kty {
-  constructor(options) {
-    super({
-      params: {
-        token: options.userSig,
-        user: options.userId,
-        key: options.roomId,
-        from: 'sdk'
-      },
-      platform: 'web',
-      host: (options.host || '').replace(/^http(s?):\/\//, ''),
-      showActiveStreamAfterShare: true,
-      showCameraListStreamAfterShare: true
-    });
-    this._playback = options && Object.prototype.hasOwnProperty.call(options, 'userDefineRecordId');
-    this._events = new Events();
-    const callbacks = {
-      addStream: stream => {
-        stream && this._events.emit('stream-subscribed', { stream });
-      },
-      removeStream: stream => {
-        stream && this._events.emit('stream-removed', { stream });
-      }
-    };
-    this._streamControl = new RemoteStreamControl(this, callbacks);
-  }
-  async join(data) {
-    // 事件监听
-    this.registerEvent();
-    const value = await this.joinConference(data.roomId);
-    const config = value.conferenceConfig;
-    // 拿回主持人身份
-    if (config.owner && !config.host) {
-      await this.assignHost(value.self.myId);
-    }
-    return value;
-  }
-  async leave() {
-    this._localStream?.stop();
-    this._streamControl.destory();
-    // 销毁声音流
-    this.renderMixStream(null);
-    const { shareStream } = this.getLocalStream();
-    if (shareStream) {
-      await this.stopShareScreen();
-    }
-    if (this._playback) {
-      this._playback = 0;
-      await this.stopRecord();
-    }
-    this.clearAllEventListener();
-    await this.conferenceLeave();
-  }
-  async publish() {
-    try {
-      // 发布流
-      const streamOptions = this._localStream?.options;
-      if (this._playback) {
-        this.startRecord();
-      }
-      // 音频
-      if (!streamOptions.video && !streamOptions.screen) {
-        console.log(`音频!!!!!`);
-        return this.openAudio();
-      }
-      // 共享
-      if (streamOptions.screen) {
-        console.log(`共享!!!!!!`);
-        return this.createShareStream().then(stream => {
-          return this.publishShareStream(stream);
-        });
-      }
-      // 视频
-      if (!streamOptions.audio) {
-        console.log(`视频!!!!!!!`);
-        return this.openVideo();
-      }
-      // 音视频
-      console.log(`音视频!!!!!!!`);
-      return this.openAudioVideo();
-    } catch (error) {
-      this._events.emit('kty-error', 'initializeError', error);
-    }
-  }
-  unpublish() {
-    return Promise.resolve();
-  }
-  subscribe() {}
-  on(name, fn) {
-    this._events.on(name, fn);
-  }
-  off(name, fn) {
-    this._events.off(name, fn);
-  }
-  // 注册事件监听
-  registerEvent() {
-    this.addEventListener('streamend', event => {
-      console.log(`streamend ===>`, event);
-      const id = event.stream.id;
-      this._streamControl.removeStream(id);
-    });
-
-    this.addEventListener('activeaudioinputchange', event => {
-      console.log(`activeaudioinputchange  ===>`, event.subscribeStream);
-      const { cameraList, mixedStream, shareStream } = event.subscribeStream;
-      this.renderMixStream(mixedStream);
-      const streamControl = this._streamControl;
-      cameraList.forEach(item => {
-        const { apply, stream } = item;
-        const from = apply?.from;
-        streamControl.addStream(from, stream, 'active');
-      });
-      if (shareStream) {
-        streamControl.addStream(shareStream.apply.from, shareStream.stream, 'share');
-      }
-    });
-    //  监听会中参会者音视频状态变化
-    this.addEventListener('videochange', data => {
-      const { id, status } = data;
-      const user = this.getAllParticipants().find(item => item.id === id);
-      const streamId = user?.streamId;
-      const stream = streamId && this._streamControl.streams?.[streamId];
-      if (stream) {
-        status ? stream.unmute() : stream.mute();
-      }
-    });
-    // 屏幕共享
-    this.addEventListener('shareend', data => {
-      const origin = data.stream.origin;
-      if (origin && origin === this.getSelf().myId) {
-        this._events.emit('screen-sharing-stopped', false);
-      }
-    });
-  }
-  // 处理总 音频流
-  renderMixStream(mediaObj) {
-    const destroy = () => {
-      let ele = this._mixEle;
-      if (!ele) return;
-      ele.pause();
-      ele.parentNode && ele.parentNode.removeChild(ele);
-      ele = this._mixEle = null;
-    };
-    if (mediaObj === null) {
-      return destroy();
-    }
-    // 渲染声音流
-    if (mediaObj && mediaObj.apply.from) {
-      let ele = this._mixEle;
-      if (ele && ele.dataset.id !== mediaObj.apply.from) {
-        destroy();
-        ele = null;
-      }
-      if (!ele) {
-        const video = document.createElement('video');
-        video.style = 'width:1px;height:1px;position:fixed;top:-9999px;left:-9999px';
-        video.setAttribute('data-id', mediaObj.apply.from);
-        video.setAttribute('autoplay', true);
-        video.setAttribute('playsInline', true);
-        document.body.appendChild(video);
-        video.srcObject = mediaObj.stream.mediaStream;
-        video.play();
-        this._mixEle = video;
-      }
-    }
-  }
-  // 创建本地流
-  createStream(options) {
-    this._localStream = this._localStream || new LocalStream(options, this);
-    return this._localStream;
-  }
-}
-class TRTC {
-  static createClient(options) {
-    const ktyInstance = new SubKty(options);
-    ktyInstance.setMode('grid');
-    ktyInstance.setShowCameraListLength(40);
-    ktyInstance.setCameraListResolution(720);
-    return ktyInstance;
-  }
-  static createStream(options, subKty) {
-    return subKty.createStream(options);
-  }
-  static checkSystemRequirements() {
-    return Promise.resolve(true);
-  }
-  static isScreenShareSupported() {
-    return !!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia);
-  }
-  static getCameras() {
-    return SubKty.prototype.getDevices().then(res => {
-      return res?.videoinput;
-    });
-  }
-  static getMicrophones() {
-    return SubKty.prototype.getDevices().then(res => {
-      return res?.audioinput;
-    });
-  }
-  static createViewStream(options, subKty) {
-    return new ViewStreamControl(options, subKty);
-  }
-}
-
-export default TRTC;
+import Kty from './kty.min-1.0.0';
+import io from 'socket.io-client';
+window.io = io; // kty 需要从 window上访问socket.io
+class Events {
+  constructor() {
+    this._events = {};
+  }
+  on(name, handle) {
+    let event = this._events[name];
+    if (!event) {
+      event = this._events[name] = [];
+    }
+    const old = event.find(fn => fn === handle);
+    if (old) return;
+    event.push(handle);
+  }
+  off(name, handle) {
+    let event = this._events[name];
+    if (!event) return;
+    if (handle) {
+      const index = event.findIndex(fn => fn === handle);
+      index >= 0 && event.splice(index, 1);
+    } else {
+      this._events[name] = null;
+    }
+  }
+  emit(name, ...args) {
+    let event = this._events[name];
+    if (event) {
+      event.forEach(fn => fn(...args));
+    }
+  }
+}
+// 预览流控制器
+class ViewStreamControl {
+  constructor(options, kty) {
+    this._isViewStream = true;
+    this._kty = kty;
+    this._videoStream = null;
+    this._audioStream = null;
+  }
+  createStream(type) {
+    if (type === 'video') {
+      return this._kty.createVideo().then(stream => {
+        this._videoStream = new Stream({}, stream);
+      });
+    } else if (type === 'audio') {
+      return this._kty.createAudio().then(stream => {
+        this._audioStream = new Stream({ type: 'audio' }, stream);
+      });
+    }
+  }
+  async removeStream(type) {
+    let stream;
+    if (type === 'video') {
+      stream = this._videoStream;
+    } else if (type === 'audio') {
+      stream = this._audioStream;
+    }
+    if (stream && this._kty) {
+      stream.stop();
+      await this._kty.clearLocalStream(stream);
+    }
+  }
+  async initialize() {
+    if (this._kty) {
+      return Promise.all([this.createStream('video'), this.createStream('audio')]);
+    } else {
+      return Promise.reject(false);
+    }
+  }
+  getLocalStream() {
+    const stream = this._videoStream?.getStream();
+    return { localStream: stream };
+  }
+  play(id) {
+    const dom = id instanceof HTMLElement ? id : document.getElementById(id);
+    if (!dom) return;
+    if (!this._dom) {
+      this._dom = document.createElement('div');
+      this._dom.style = 'width:100%;height:100%';
+    }
+    dom.appendChild(this._dom);
+    this._videoStream?.play(this._dom);
+    this._audioStream?.play(this._dom);
+  }
+  stop() {
+    this.muteVideo();
+    this.muteAudio();
+    this._dom?.parentNode?.removeChild(this._dom);
+    this._dom = null;
+  }
+  async close() {
+    this.stop();
+    if (this._kty) {
+      await Promise.all([this.removeStream('video'), this.removeStream('audio')]);
+    }
+    this._kty = null;
+  }
+  muteAudio() {
+    this._dom && this._audioStream?.stop(this._dom);
+  }
+  unmuteAudio() {
+    this._dom && this._audioStream?.play(this._dom);
+  }
+  muteVideo() {
+    this._dom && this._videoStream?.stop(this._dom);
+  }
+  unmuteVideo() {
+    this._dom && this._videoStream?.play(this._dom);
+  }
+  on(name, fn) {
+    const events = this.events || {};
+    if (!events[name]) {
+      events[name] = [];
+    }
+    if (events[name].indexOf(fn) < 0) {
+      events[name].push(fn);
+    }
+    this.events = events;
+  }
+  setVideoProfile() {}
+  switchDevice(type, id) {
+    const isVideo = type === 'video';
+    const list = isVideo ? TRTC.getCameras() : TRTC.getMicrophones();
+    return list.then(list => {
+      const target = list.find(item => item.deviceId === id);
+      if (target) {
+        const k = isVideo ? 'selectVideoInput' : 'selectAudioOutPut';
+        this._kty.setDevice({ [k]: target });
+        let stream = isVideo ? this._videoStream : this._audioStream;
+        const isPlay = stream.isPlay;
+        this.removeStream(type).then(() => {
+          this.createStream(type).then(() => {
+            if (isPlay && this._dom) {
+              stream = isVideo ? this._videoStream : this._audioStream;
+              stream.play(this._dom);
+            }
+          });
+        });
+      }
+      return target;
+    });
+  }
+}
+
+// 远端流控制器
+class RemoteStreamControl {
+  constructor(kty, callbacks) {
+    this._kty = kty;
+    this.ids = new Set();
+    this.streams = {};
+    this.userStreamIds = {};
+    this.callbacks = callbacks;
+  }
+  getUserId(id) {
+    if (!id) return void 0;
+    const allParticipants = this._kty.getAllParticipants();
+    const info = allParticipants.find(item => item.streamId === id || item.shareStreamId == id);
+    return info?.user;
+  }
+  addStream(id, stream, type) {
+    const { ids } = this;
+    if (!id || !stream || ids?.has(id)) return;
+    ids.add(id);
+    const user = this.getUserId(id);
+    const remoteStream = new Stream({ type, user }, { id, ...stream });
+    if (user) {
+      this.userStreamIds[user] = this.userStreamIds[user] || {};
+      const streamIds = this.userStreamIds[user];
+      const remove = this.callbacks?.removeStream;
+      if (remove) {
+        Object.keys(streamIds).forEach(k => {
+          // 全部删除 保证只接受单一类型 (为了做到屏幕共享和摄像头只存在一个)
+          const value = this.streams[streamIds[k]];
+          value && remove(value);
+        });
+      }
+      const key = remoteStream.getType();
+      if (key) {
+        streamIds[key] = id;
+      }
+    }
+    this.streams[id] = remoteStream;
+    // 流新增的回调
+    const add = this.callbacks?.addStream;
+    add && add(remoteStream);
+    return remoteStream;
+  }
+  removeStream(id) {
+    let value = this.streams && this.streams[id];
+    if (value && this.ids.has(id)) {
+      this.ids.delete(id);
+      this.streams[id] = null;
+      delete this.streams[id];
+
+      const type = value.getType();
+      const user = value.getUserId();
+      const streamIds = this.userStreamIds[user];
+      const remove = this.callbacks?.removeStream;
+      value && remove && remove(value);
+      if (streamIds && type) {
+        streamIds[type] = null;
+        delete streamIds[type];
+        const k = Object.keys(streamIds).pop();
+        if (k) {
+          // addStream时候会删除一些流 这时候如果有被删的恢复一个(为了做到屏幕共享和摄像头只存在一个)
+          const value = this.streams[streamIds[k]];
+          const add = this.callbacks?.addStream;
+          value && add && add(value);
+        }
+      }
+    }
+    return value;
+  }
+  destory() {
+    if (this.streams) {
+      Object.keys(this.streams).forEach(k => {
+        const stream = this.streams[k];
+        stream?.stop();
+      });
+    }
+    this._kty = null;
+    this.streams = null;
+    this.userStreamIds = null;
+    this.callbacks = null;
+    this.ids.clear();
+  }
+}
+
+// 直播流
+class Stream {
+  constructor(options, stream) {
+    this.options = options;
+    this._stream = stream;
+    Object.defineProperty(this, 'id_', {
+      configurable: true,
+      get() {
+        return this.getStream()?.id;
+      }
+    });
+    Object.defineProperty(this, 'userId_', {
+      configurable: true,
+      get() {
+        return this.getUserId();
+      }
+    });
+  }
+  getStream() {
+    return this._stream;
+  }
+  getId() {
+    return 'video_' + (this.id_ || '');
+  }
+  getType() {
+    return this.options?.type;
+  }
+  getUserId() {
+    return this.options?.user;
+  }
+  play(id) {
+    const stream = this.getStream();
+    if (stream && stream.mediaStream) {
+      const dom = id instanceof HTMLElement ? id : document.getElementById(id);
+      if (!dom) return;
+      let video = this._video;
+      if (!video) {
+        const isAudio = this.options?.type === 'audio';
+        video = document.createElement(isAudio ? 'audio' : 'video');
+        video.id = this.getId();
+        video.style = isAudio ? 'width:0,height:0' : 'width:100%;height:100%;object-fit:cover;background:#000';
+        video.setAttribute('autoplay', true);
+        !isAudio && video.setAttribute('muted', true);
+        video.setAttribute('playsInline', true);
+        video.srcObject = stream.mediaStream;
+        this._video = video;
+      }
+      dom.appendChild(video);
+      if (video.paused) {
+        video.play();
+      }
+      this.isPlay = 1;
+    }
+  }
+  stop() {
+    const video = this._video;
+    if (video) {
+      if (!video.paused) {
+        video.pause();
+      }
+      video.parentNode && video.parentNode.removeChild(video);
+      this._video = null;
+    }
+    this.isPlay = 0;
+  }
+  mute() {
+    if (this._video) {
+      this._video.srcObject = null;
+    }
+  }
+  unmute() {
+    if (this._video) {
+      this._video.srcObject = this.getStream()?.mediaStream || null;
+    }
+  }
+  close() {}
+  on() {}
+  setVideoProfile() {}
+}
+
+// 本地流
+class LocalStream extends Stream {
+  constructor(options, subKty) {
+    super(options, null);
+    this._subKty = subKty;
+  }
+  getStream() {
+    const stream = this._subKty.getLocalStream();
+    return this.options.screen ? stream.shareStream : stream.localStream;
+  }
+  getUserId() {
+    return this._subKty.getSelf()?.user;
+  }
+  on(name, fn) {
+    this._subKty.on(name, fn);
+  }
+  off(name) {
+    this._subKty.off(name);
+  }
+  initialize() {
+    return this._subKty.initConferenceStream();
+  }
+  muteAudio() {
+    return this._subKty.closeAudio();
+  }
+  unmuteAudio() {
+    return this._subKty.openAudio();
+  }
+  muteVideo() {
+    this.mute();
+    return this._subKty.closeVideo();
+  }
+  unmuteVideo() {
+    this.unmute();
+    return this._subKty.openVideo();
+  }
+  switchMode(screen = false) {
+    this.options.screen = screen;
+    const video = this._video;
+    if (video) {
+      const parent = video.parentNode;
+      this.stop();
+      parent && this.play(parent);
+    }
+  }
+  switchDevice(type, id) {
+    const list = type === 'video' ? TRTC.getCameras() : TRTC.getMicrophones();
+    return list.then(list => {
+      const target = list.find(item => item.deviceId === id);
+      if (target) {
+        const k = type === 'video' ? 'selectVideoInput' : 'selectAudioOutPut';
+        return this._subKty.setDevice({ [k]: target });
+      }
+      return target;
+    });
+  }
+  close() {
+    if (this._isPreview) {
+      this._subKty.close();
+    }
+  }
+  replaceKty(kty) {
+    this._subKty = kty;
+  }
+}
+
+// Kty 空扩展子类(封装一些方法 向 TRTC调用靠齐)
+class SubKty extends Kty {
+  constructor(options) {
+    super({
+      params: {
+        token: options.userSig,
+        user: options.userId,
+        key: options.roomId,
+        from: 'sdk'
+      },
+      platform: 'web',
+      host: (options.host || '').replace(/^http(s?):\/\//, ''),
+      showActiveStreamAfterShare: true,
+      showCameraListStreamAfterShare: true
+    });
+    this._playback = options && Object.prototype.hasOwnProperty.call(options, 'userDefineRecordId');
+    this._events = new Events();
+    const callbacks = {
+      addStream: stream => {
+        stream && this._events.emit('stream-subscribed', { stream });
+      },
+      removeStream: stream => {
+        stream && this._events.emit('stream-removed', { stream });
+      }
+    };
+    this._streamControl = new RemoteStreamControl(this, callbacks);
+  }
+  async join(data) {
+    // 事件监听
+    this.registerEvent();
+    const value = await this.joinConference(data.roomId);
+    const config = value.conferenceConfig;
+    // 拿回主持人身份
+    if (config.owner && !config.host) {
+      await this.assignHost(value.self.myId);
+    }
+    return value;
+  }
+  async leave() {
+    this._localStream?.stop();
+    this._streamControl.destory();
+    // 销毁声音流
+    this.renderMixStream(null);
+    const { shareStream } = this.getLocalStream();
+    if (shareStream) {
+      await this.stopShareScreen();
+    }
+    if (this._playback) {
+      this._playback = 0;
+      await this.stopRecord();
+    }
+    this.clearAllEventListener();
+    await this.conferenceLeave();
+  }
+  async publish() {
+    try {
+      // 发布流
+      const streamOptions = this._localStream?.options;
+      if (this._playback) {
+        this.startRecord();
+      }
+      // 音频
+      if (!streamOptions.video && !streamOptions.screen) {
+        console.log(`音频!!!!!`);
+        return this.openAudio();
+      }
+      // 共享
+      if (streamOptions.screen) {
+        console.log(`共享!!!!!!`);
+        return this.createShareStream().then(stream => {
+          return this.publishShareStream(stream);
+        });
+      }
+      // 视频
+      if (!streamOptions.audio) {
+        console.log(`视频!!!!!!!`);
+        return this.openVideo();
+      }
+      // 音视频
+      console.log(`音视频!!!!!!!`);
+      return this.openAudioVideo();
+    } catch (error) {
+      this._events.emit('kty-error', 'initializeError', error);
+    }
+  }
+  unpublish() {
+    return Promise.resolve();
+  }
+  subscribe() {}
+  on(name, fn) {
+    this._events.on(name, fn);
+  }
+  off(name, fn) {
+    this._events.off(name, fn);
+  }
+  // 注册事件监听
+  registerEvent() {
+    this.addEventListener('streamend', event => {
+      console.log(`streamend ===>`, event);
+      const id = event.stream.id;
+      this._streamControl.removeStream(id);
+    });
+
+    this.addEventListener('activeaudioinputchange', event => {
+      console.log(`activeaudioinputchange  ===>`, event.subscribeStream);
+      const { cameraList, mixedStream, shareStream } = event.subscribeStream;
+      this.renderMixStream(mixedStream);
+      const streamControl = this._streamControl;
+      cameraList.forEach(item => {
+        const { apply, stream } = item;
+        const from = apply?.from;
+        streamControl.addStream(from, stream, 'active');
+      });
+      if (shareStream) {
+        streamControl.addStream(shareStream.apply.from, shareStream.stream, 'share');
+      }
+    });
+    //  监听会中参会者音视频状态变化
+    this.addEventListener('videochange', data => {
+      const { id, status } = data;
+      const user = this.getAllParticipants().find(item => item.id === id);
+      const streamId = user?.streamId;
+      const stream = streamId && this._streamControl.streams?.[streamId];
+      if (stream) {
+        status ? stream.unmute() : stream.mute();
+      }
+    });
+    // 屏幕共享
+    this.addEventListener('shareend', data => {
+      const origin = data.stream.origin;
+      if (origin && origin === this.getSelf().myId) {
+        this._events.emit('screen-sharing-stopped', false);
+      }
+    });
+  }
+  // 处理总 音频流
+  renderMixStream(mediaObj) {
+    const destroy = () => {
+      let ele = this._mixEle;
+      if (!ele) return;
+      ele.pause();
+      ele.parentNode && ele.parentNode.removeChild(ele);
+      ele = this._mixEle = null;
+    };
+    if (mediaObj === null) {
+      return destroy();
+    }
+    // 渲染声音流
+    if (mediaObj && mediaObj.apply.from) {
+      let ele = this._mixEle;
+      if (ele && ele.dataset.id !== mediaObj.apply.from) {
+        destroy();
+        ele = null;
+      }
+      if (!ele) {
+        const video = document.createElement('video');
+        video.style = 'width:1px;height:1px;position:fixed;top:-9999px;left:-9999px';
+        video.setAttribute('data-id', mediaObj.apply.from);
+        video.setAttribute('autoplay', true);
+        video.setAttribute('playsInline', true);
+        document.body.appendChild(video);
+        video.srcObject = mediaObj.stream.mediaStream;
+        video.play();
+        this._mixEle = video;
+      }
+    }
+  }
+  // 创建本地流
+  createStream(options) {
+    this._localStream = this._localStream || new LocalStream(options, this);
+    return this._localStream;
+  }
+}
+class TRTC {
+  static createClient(options) {
+    const ktyInstance = new SubKty(options);
+    ktyInstance.setMode('grid');
+    ktyInstance.setShowCameraListLength(40);
+    ktyInstance.setCameraListResolution(720);
+    return ktyInstance;
+  }
+  static createStream(options, subKty) {
+    return subKty.createStream(options);
+  }
+  static checkSystemRequirements() {
+    return Promise.resolve(true);
+  }
+  static isScreenShareSupported() {
+    return !!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia);
+  }
+  static getCameras() {
+    return SubKty.prototype.getDevices().then(res => {
+      return res?.videoinput;
+    });
+  }
+  static getMicrophones() {
+    return SubKty.prototype.getDevices().then(res => {
+      return res?.audioinput;
+    });
+  }
+  static createViewStream(options, subKty) {
+    return new ViewStreamControl(options, subKty);
+  }
+}
+
+export default TRTC;