Skip to content

Instantly share code, notes, and snippets.

@ninadpchaudhari

ninadpchaudhari/index.html

Created February 20, 2018 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ninadpchaudhari/2945450825cec086f0f2611a284bc8c5 to your computer and use it in GitHub Desktop.
Save ninadpchaudhari/2945450825cec086f0f2611a284bc8c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image-only Example - Record Plugin for Video.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/2.1.0/css/videojs.record.css" rel="stylesheet">
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.2/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/recordrtc@5.4.6/RecordRTC.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/adapterjs/0.15.0/adapter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js@2.0.4/dist/wavesurfer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js@2.0.4/dist/plugin/wavesurfer.microphone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-wavesurfer@2.2.1/dist/videojs.wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/2.1.1/videojs.record.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
/* change player background color */
#myImage {
background-color: #efc3e6;
}
#myAudio {
background-color: #9FD6BA;
}
</style>
</head>
<body>
<div class="container">
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/38839/preview.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Media Library
</a>
</nav>
<br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<img src="http://via.placeholder.com/300x300" alt="..." class="img-thumbnail">
</div>
<div class="col-md-8">
<h1>Ronald Smith</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently wi</p>
</div>
</div>
</div>
<br>
<div class="container">
<div class="card">
<div class="card-body">
<h2 class="card-title text-center">Make a Post</h2>
<br>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4"><video id="myImage" class="video-js vjs-default-skin"></video></div>
<div class="col-md-6"><audio id="myAudio" class="video-js vjs-default-skin"></audio></div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="card">
<div class="card-body">
<div class="card-title">
<h2>Earlier Posts</h2>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://via.placeholder.com/300x300" alt="..." class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/300x300" alt="..." class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/300x300" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
<script>
var player = videojs("myImage", {
controls: true,
width: 320,
height: 240,
fluid: false,
controlBar: {
volumePanel: false,
fullscreenToggle: false
},
plugins: {
record: {
image: true,
debug: true
}
}
}, function(){
// print version information at startup
videojs.log('Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'));
});
// error handling
player.on('deviceError', function() {
console.warn('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
console.log('error:', error);
});
// snapshot is available
player.on('finishRecord', function() {
// the blob object contains the image data that
// can be downloaded by the user, stored on server etc.
console.log('snapshot ready: ', player.recordedData);
});
//audio
var player2 = videojs("myAudio", {
controls: true,
width: 320,
height: 240,
fluid: false,
plugins: {
wavesurfer: {
src: "live",
waveColor: "#36393b",
progressColor: "#black",
debug: true,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 20,
debug: true
}
}
}, function() {
// print version information at startup
videojs.log('Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'),
'+ videojs-wavesurfer', videojs.getPluginVersion('wavesurfer'),
'and recordrtc', RecordRTC.version);
});
// error handling
player2.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
player2.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording
player2.on('startRecord', function() {
console.log('started recording!');
});
// user completed recording and stream is available
player2.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player2.recordedData);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment