javascript - 使用 google drive api 将 MediaStream Recorder 块上传到 Google Drive？

Question

我使用 MediaStream Recording API 来录制视频。

MediaRecorder生成视频块时如何连续上传到谷歌驱动器？

Google Drive API 好像只能一个一个上传文件？

前任。

MediaRecorder.addEventListener('dataavailable', function(e) {

  // e.data is video chunk (blob)
  // How to upload to google drive
  console.log(e.data)

})

我尝试了很多方法，但都失败了

我参考了你的 tanaike 的文章

这是我的代码

我的上传部分都卡住了

fetch(videoResumableUrl,
            {
                method: 'PUT',
                headers: {
                    'Content-Length': blob.size,
                    'Content-Range': conter_range
                },
                // video chunk
                body: blob
            }
        ).then((res) => {
            console.log(res)
        }).catch(err => { console.log(err) })

let total = 0;
let start = 0;
let end = 0;
let endLock = true;
var videoResumableUrl = null;

async function createResumableUrl() {

    let response = await fetch('https://www.googleapis.com/drive/v3/files', {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer ' + oAuth2Client.credentials.access_token,
            'Content-Type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
            name: 'videofile.webm',
            mimeType: 'video/webm'
        })
    })
    let fileid = await response.json()

    let resumableRes = await fetch('https://www.googleapis.com/upload/drive/v3/files/' + fileid.id + '?uploadType=resumable', {
        method: 'PATCH',
        headers: {
            'Authorization': 'Bearer ' + oAuth2Client.credentials.access_token,
            'Content-Type': 'application/json; charset=UTF-8'
        }
    })

    videoResumableUrl = resumableRes.headers.get('Location')
}

createResumableUrl()

startBtn.onclick = () => {
    mediaRecorder.start(5000)
    //every 5 seconds create video chunk
}

stopBtn.onclick = () => {
    endLock = false
    mediaRecorder.stop()
}

// stream is my navigator.mediaDevices.getUserMedia promise callback stream
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=VP9', })

// recoder start Listener
// every 5 seconds create video chunk
mediaRecorder.addEventListener('dataavailable', (e) => {

    // e.data is video blob chunk
    let reader = new FileReader()
    reader.onload = function () {

        total += blob.size

        let conter_range = ''

        if (!end)
            end += blob.size - 1
        else
            end += blob.size


        // recodering unknown total file size
        if (endLock) {
            conter_range = 'bytes ' + start + '-' + end + '/*'
            console.log(conter_range)
        }

        // if my click stop btn i get total file size
        if (!endLock) {
            conter_range = 'bytes ' + start + '-' + end + '/' + total
            console.log(conter_range)
        }

        fetch(videoResumableUrl,
            {
                method: 'PUT',
                headers: {
                    'Content-Length': blob.size,
                    'Content-Range': conter_range
                },
                body: blob
            }
        ).then((res) => {
            console.log(res)
        }).catch(err => { console.log(err) })

        start = end + 1
    }

    reader.readAsArrayBuffer(blob)

})

// recoder stop Listener
mediaRecorder.addEventListener('stop', (e) => {

})

标签： javascriptgoogle-drive-api