
class ZlmRtcPlayer {
  constructor(options) {
    this.webrtcPlayer = null;
    this.playerEl = null;
    this.config = Object.assign({
      debug: false,
      simulecast: false,
      useCamera: false,
      audioEnable: false,
      videoEnable: false,
      recvOnly: true,
    }, options)
  }
  eventcallbacK (e, msg) {
    if (this.config['on' + e]) {
      this.config['on' + e](msg);
    }
  }
  //全屏
  setFullscreen () {
    // this.playerEl.setFullscreen()
    const el = this.playerEl;
    function launchFullScreen () {
      var element = el;
      if (element.requestFullScreen) {
        element.requestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
    }
    launchFullScreen();
  }
  setMuted (open) {
    this.playerEl.volume = open ? 1 : 0;
  }
  setVolume (val) {
    this.playerEl.volume = val;
  }
  getVideoSize(){
    let height = this.playerEl.videoHeight
    let width =  this.playerEl.videoWidth
    return {
      width,height
    }
  }
  snap (cb) {
    let canvas = document.createElement('canvas');
    canvas.setAttribute('width', this.playerEl.videoWidth);
    canvas.setAttribute('height', this.playerEl.videoHeight);
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this.playerEl, 0, 0, canvas.width, canvas.height);
    canvas.toBlob(function (blob) {
      canvas = null;
      cb(blob)
    });
  }
  destroy () {
    this.webrtcPlayer.close();
    this.playerEl.remove();
  }
  init () {
    return new Promise((resolve) => {
      resolve();
    })
  }
  resize () { }
  pause(){
    this.playerEl.pause()
  }
  replay(){
    this.playerEl.play()
  }
  play (url) {
    // console.log(url,"play预置位配置url")
    var ZLMRTCClient = window.ZLMRTCClient;
    const player = document.createElement('video');
    this.playerEl = player;
    const me = this
    // player.setAttribute('controls', 'controls');
    player.setAttribute('autoplay', 'autoplay');
    player.setAttribute('playsinline', 'playsinline');
    player.setAttribute('stretch', 'stretch');
    player.setAttribute('crossorigin', 'anonymous');
    player.addEventListener('pause', () => {
      me.eventcallbacK("pause", "暂停")
    })
    player.classList.add('video_player_zlm')
    // player.setAttribute('id', 'v_' + this.config.container.id);
    this.config.container.innerHtml = '';
    this.config.container.appendChild(player);
    this.webrtcPlayer = new ZLMRTCClient.Endpoint({
      element: player,// video 标签
      debug: this.config.debug,// 是否打印日志
      zlmsdpUrl: url,//流地址
      // zlmsdpUrl:document.location.protocol+"//"+window.location.host + "/wuhan/videoMonitor2/index/api/webrtc?app=live&stream=stream"+"&type=play",
      simulecast: this.config.simulecast,
      useCamera: this.config.useCamera,
      audioEnable: this.config.audioEnable,
      videoEnable: this.config.videoEnable,
      recvOnly: this.config.recvOnly,
    })
    this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, () => {// ICE 协商出错
      // console.error('ICE 协商出错', e)
      this.eventcallbacK("ICE ERROR", "ICE 协商出错")
    });

    this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (stream) => {//获取到了远端流，可以播放
      console.log(stream)
      player.volume = 0;
      this.eventcallbacK("playing", "播放成功")
    });

    this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败
      // console.error('offer anwser 交换失败', e)
      this.eventcallbacK("OFFER ANSWER ERROR", "offer anwser 交换失败")
      if (e.code == -400 && e.msg == "流不存在") {
        this.timer = setTimeout(() => {
          this.webrtcPlayer.close();
          this.play(url);
        }, 100)
      }
    });

    this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, () => {// 获取到了本地流
      this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
    });
  }
}
export default ZlmRtcPlayer
