Javascript 使用google drive api将MediaStream记录器区块上载到google drive？

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

当MediaRecorder生成视频块时，如何持续上传到google drive

谷歌驱动API似乎只能一个一个上传文件

前

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

我参考了塔奈克的文章

这是我的密码

我上传的部分都卡住了

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) })

---

请编辑您的问题，包括您的代码，并描述您的代码存在的问题。例如，当已知文件大小时（例如，首先，设置了最大大小，剩余数据由静默数据嵌入），我认为可恢复上载可能可以用作解决方法。但在当前阶段，无法使用异步进程运行可恢复上载。所以我不确定这是否是更好的方向。对此我深表歉意。如何实现实时记录和上传的特定代码？正如@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) => {

})