let videoPlayer = document.querySelector('video#player')
let recvideo = document.querySelector('video#recvideo')
let btnRecord = document.querySelector('button#record')
let btnPlay = document.querySelector('button#play')
let btnDown = document.querySelector('button#down')


let gotMediaStream = (stream) => {
    videoPlayer.srcObject = stream
    // 将getUserMedia获取的stream放入window中
    window.stream = stream
}

let handleError = (err) => {
    console.log(`getusermedia error:${err}`)
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log('getusermedia is not supported!')
} else {
    let constrants = {
        video: true,
        audio: true
    }
    navigator.mediaDevices.getUserMedia(constrants)
    .then(gotMediaStream)
    .catch(handleError)
}

var buffer;
var mediaRecorder;

let handleDataAvailable = (e) => {
    // 如果有数据且数据有效，放入buffer中
    if(e && e.data && e.data.size > 0){
        buffer.push(e.data)
    }
}
// 开始录制函数
let startRecord = () => {
    buffer = []
    let options = {
        mimeType: 'video/webm;codecs=vp8'
    }
    // MediaRecorder.isTypeSupported 判断是否支持设置的视频格式
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.error(`${options.mimeType} is not supported!`)
        return
    }

    // 创建一个视频录制对象
    try{
        mediaRecorder = new MediaRecorder(window.stream, options)
    }catch (e) {
        console.error('Failed to create MediaRecorder:', e)
        return
    }

    // 监听 当有数据时，将数据存入缓冲区
    mediaRecorder.ondataavailable = handleDataAvailable
    mediaRecorder.start(10)
}
// 停止录制
let stopRecord = () => {
    mediaRecorder.stop()
}

btnRecord.onclick = () => {
    if (btnRecord.textContent === 'start record') {
        btnRecord.textContent = 'stop record'
        startRecord()
    }else {
        btnRecord.textContent = 'start record'
        stopRecord()
    }
}

btnPlay.onclick = () => {
    // 将buffer中数据写入blob中，并生成可播放的src
    let blob = new Blob(buffer, {type: 'video/webm'})
    recvideo.src = window.URL.createObjectURL(blob)
    recvideo.srcObject = null
}

btnDown.onclick = () => {
    let blob = new Blob(buffer, {type: 'video/webm'})
    let url = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.href = url
    a.style.display = 'none'
    a.download = 'aa.webm'
    a.click()
}