Question

我正在尝试录制视频，并希望使用Dropbox保护程序按钮将其上传到Dropbox。

这是我的代码。

<!DOCTYPE html>

<video id="myVideo" class="video-js vjs-default-skin"></video>
<script>
  var dataUri;
  var videoData;
    var player = videojs("myVideo", {
    controls: true,
    width: 320,
    height: 240,
    fluid: false,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: 100,
            debug: true
        }
    }
}, function(){
    // print version information at startup
    videojs.log('Using video.js', videojs.VERSION,
        'with videojs-record', videojs.getPluginVersion('record'),
        'and recordrtc', RecordRTC.version);
});
// error handling
player.on('deviceError', function() {
    console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
    console.log('error:', error);
});
// user clicked the record button and started recording
player.on('startRecord', function() {
    console.log('started recording!');
});
// user completed recording and stream is available
player.on('finishRecord', function() {

    // Dropbox.popupSize(760,500);
    // console.log("aftzr popup")
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('player : ', player.recordedData.video.name);
    videoData = player.recordedData;
    console.log('finished recording: ', player.recordedData);
    //dataUri = "data:text/plain;base64," + btoa(player.recordedData);
    // blobToDataURL(player.recordedData.video, 
    //   function(result) {
    //     console.log("DATAURI completed: " + result);
    //     dataUri = result;
    //   });
    // console.log('dataUri: ',dataUri);
    blobToDataURL(player.recordedData.video, 
      function(result) {
        console.log("DATAURI completed: " + result);
        dataUri = result;
      });
    console.log('dataUri: ',dataUri);
    player.record().saveAs({'video': 'my-video-file-name.mp4'});   
}

);

function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}


function saveToDropboxCustom() {
    var options = {
        files: [
            // You can specify up to 100 files.
            {'url': dataUri, 'filename': 'video.mp4'}
            // ...
        ],

        // Success is called once all files have been successfully added to the user's
        // Dropbox, although they may not have synced to the user's devices yet.
        success: function () {
            // Indicate to the user that the files have been saved.
            alert("Success! Files saved to your Dropbox.");
        },

        // Progress is called periodically to update the application on the progress
        // of the user's downloads. The value passed to this callback is a float
        // between 0 and 1. The progress callback is guaranteed to be called at least
        // once with the value 1.
        progress: function (progress) {},

        // Cancel is called if the user presses the Cancel button or closes the Saver.
        cancel: function () {},

        // Error is called in the event of an unexpected response from the server
        // hosting the files, such as not being able to find a file. This callback is
        // also called if there is an error on Dropbox or if the user is over quota.
        error: function (errorMessage) {}
    };

    Dropbox.save(options);

}
</script>


<div ng-controller="RecordVideoCtrl">
    <div class="">
        <input type="file" ng-file-select="onFileSelect($files)"><button href="datauri" onclick="saveToDropboxCustom()" class="dropbox-saver">Dropbox</button>
        <div class="drop-box" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function" ng-show="dropSupported">{{ 'attachments_drop' | translate }}</div>
        <div ng-file-drop-available="dropSupported=true" ng-show="!dropSupported">{{ 'attachments_drop_notSupported' | translate }}</div>
        <progressbar ng-if="progress>=0" animate="true" value="progress" type="success"><b>{{progress}} %</b>
        </progressbar>
    </div>
</div>


<!-- 
// function getVideoData()
// {
//     return videoData;
// }
// </script>
// <button id="record" onClick="getVideoData();" ng-model="onFileSelect()"></button> -->

当我运行项目时，它会记录视频并生成正确的数据URI。我将此数据URI传递给dropbox saver按钮，以将视频上传到Dropbox。它会打开Dropbox进行登录，但是当我点击“保存”时，会出现错误，如“无法加载资源：服务器响应状态为413（）https://www.dropbox.com/dropins/save_url_batch”。

我在互联网上搜索，我得到的错误信息是请求实体太大。但我的1秒视频不会是一个大文件。

Answer 1

Dropbox Saver不正式支持从数据URI保存，但我会将其作为功能请求传递。

尽管如此，它可能在某些情况下有效，但是在这种情况下你会遇到相对较小的有效尺寸限制。

获取413“无法加载资源：服务器在将文件上传到Dropbox时响应状态为413（）”

1 个答案: