this.player.domId.play() // 播放
this.player.domId.pause() // 静音
this.player.domId.requestFullscreen() // 全屏

const loadedData = (event) => {
  let video = event.target
  let canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 110
  canvas.getContext('2d').drawImage(video, 0, 0, 200, 110)
  let img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = canvas.toDataURL('image/png')
  video.parentNode.insertBefore(img, video)
}

let myVideo = document.querySelector('#myVideo')
myVideo.muted = true

// 初始声音大小
voiceValue: 50, // 初始声音大小

// 获取video dom
let video = document.getElementById('myVideo')
video.volume = this.voiceValue / 100
video.currentTime = this.changeTime
this.videoprogress = (video.currentTime / video.duration) * 100

function onPlayerEnded() {
  // 当播放结束的时候，展示重新播放
  this.playState = 'replay'
}

function initStart(params) {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log(`your browser not support  navigator.mediaDevices.getUserMedia`)
  } else {
    const constraints = {
      video: {
        width: 400,
        height: 300,
        frameRate: 30, // 帧率
      }, // 是否视频
      audio: {}, // 是否音频
    }
    navigator.mediaDevices
      // 获取用户媒体
      .getUserMedia(constraints)
      // 获取媒体流
      .then(getMediaStream)
      // 获取设备的列表
      .then(getListDevices)
      // 异常了
      .catch(handleError)
  }
}

function getMediaStream(stream) {
  // 同意访问音视频数据
  try {
    const player = getEle('#player')
    player.srcObject = stream
    // 获取视频流成功之后然后创建设备选择
    return navigator.mediaDevices.enumerateDevices()
  } catch (error) {}
}

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log(`your browser not support`)
} else {
  // navigator.mediaDevices
  //   .enumerateDevices()
  //   .then(getListDevices)
  //   .catch(handleError)
}

/**
 * 设备分组
 * @param {*} deviceInfos
 */
function getListDevices(deviceInfos) {
  const sortList = handleGrouping(deviceInfos)
  console.log(sortList)
}

const video = document.getElementById('video') // 视频播放器本身 即是video标签
const play = document.getElementById('play') // 播放按钮
const stop = document.getElementById('stop') // 停止按钮
const progress = document.getElementById('progress') // 进度条滑动
const timestamp = document.getElementById('timestamp') // 进度时间

// 播放或者暂停视频
function toggleVideoStatus() {
  if (video.paused) {
    video.play()
  } else {
    video.pause()
  }
}
// 更新图标的状态
function updatePlayIcon() {
  if (video.paused) {
    play.innerHTML = `<i class="fa fa-stop fa-2x"></i>`
  } else {
    play.innerHTML = `<i class="fa fa-pause fa-2x"></i>`
  }
}

// 更新进度条

function updateProgress() {
  // 视频当前播放的时间点 / 视频的总时长
  progress.value = (video.currentTime / video.duration) * 100
  // 换算成分钟
  let mins = Math.floor(video.currentTime / 60)
  // 前面补0
  if (mins < video.duration) {
    mins = '0' + String(mins)
  }

  // 得到秒
  let secs = Math.floor(video.currentTime % 60)
  if (secs < video.duration) {
    secs = '0' + String(secs)
  }

  timestamp.innerHTML = `${mins}:${secs}`
}

// 设置视频的时间和进度条
function setVideoProgress() {
  video.currentTime = (+progress.value * video.duration) / 100
}
// 停止视频

function stopVideo() {
  video.currentTime = 0
  video.pause()
}

video.addEventListener('click', toggleVideoStatus)
video.addEventListener('pause', updatePlayIcon)
video.addEventListener('play', updatePlayIcon)
video.addEventListener('timeupdate', updateProgress)

play.addEventListener('click', toggleVideoStatus)
stop.addEventListener('click', stopVideo)

progress.addEventListener('change', setVideoProgress)