Skip to content

Instantly share code, notes, and snippets.

@jack2jm

jack2jm/Video - Audio Recoder Js

Created May 1, 2024 09:51
Show Gist options
  • Save jack2jm/c90ba25504531b3f5f75012bd9d50db7 to your computer and use it in GitHub Desktop.
Save jack2jm/c90ba25504531b3f5f75012bd9d50db7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Video - Audio Recoder Js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://unpkg.com/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
<link href="https://unpkg.com/videojs-record/dist/css/videojs.record.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.10.0/dist/video.min.js"></script>
<script src="https://unpkg.com/recordrtc/RecordRTC.js"></script>
<script src="https://unpkg.com/webrtc-adapter/out/adapter.js"></script>
<script src="https://unpkg.com/videojs-record/dist/videojs.record.min.js"></script>
<script src="https://collab-project.github.io/videojs-record/demo/browser-workarounds.js"></script>
</head>
<body>
<div style="text-align: center;">
<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
window.options = {
// video.js options
controls: true,
bigPlayButton: false,
loop: false,
fluid: false,
width: 320,
height: 240,
plugins: {
// videojs-record plugin options
record: {
image: false,
audio: false,
video: true,
maxLength: 5,
displayMilliseconds: false,
debug: true
}
}
};
$(function() {
let player = videojs('myVideo', options, function() {
// print version information at startup
const msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record');
videojs.log(msg);
console.log("videojs-record is ready!");
});
player.on('finishRecord', function() {
console.log('finished recording: ', player.recordedData);
player.record().saveAs({'video': 'my-video-file-name.webm'});
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording:', player.recordedData);
var data = player.recordedData;
var serverUrl = '/upload';
var formData = new FormData();
formData.append('file', data, data.name);
console.log('uploading recording:', data.name);
fetch(serverUrl, {
method: 'POST',
body: formData
}).then(
success => console.log('recording upload complete.')
).catch(
error => console.error('an upload error occurred!')
);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment