I'm trying to record a video and want to upload it to the Dropbox with the Dropbox saver button.
Here is my code.
<!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> -->
When I run the Project, It records the video and generated the proper data URI. I pass this data URI to dropbox saver button to upload video to Dropbox. It opens the Dropbox for login but when I click on save it gives the error like "Failed to load resource: the server responded with a status of 413 () https://www.dropbox.com/dropins/save_url_batch ".
I searched on the Internet and I got that the error message is for request entity is too large. But my video of 1 second won't be a big file.
The Dropbox Saver doesn't officially support saving from data URIs, but I'll pass this along as a feature request.
That said, it may work in some cases, but there will be a relatively small effective size limit, which you're hitting in this case.