-
-
Notifications
You must be signed in to change notification settings - Fork 317
Webpack
Thijs Triemstra edited this page May 22, 2018
·
32 revisions
This document describes how to setup webpack with videojs-record.
Let's create a simple project in a directory (/tmp/webpack-test in this case):
cd /tmp
mkdir webpack-test
cd webpack-test
Now install webpack and videojs-record using npm:
npm install -D webpack webpack-dev-server webpack-cli
npm install videojs-record
Create the webpack config file called webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
app: './app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/dist'
},
devServer: {
contentBase: path.resolve(__dirname),
watchContentBase: true
},
resolve: {
alias: {
videojs: 'video.js',
WaveSurfer: 'wavesurfer.js'
}
},
plugins: [
new webpack.ProvidePlugin({
videojs: 'video.js/dist/video.cjs.js',
RecordRTC: 'recordrtc'
})
]
};Create the src directory:
mkdir src
And create src/index.html containing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack example</title>
<link href="/node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
<link href="/node_modules/videojs-record/dist/css/videojs.record.css" rel="stylesheet">
<script src="/dist/app.bundle.js" type="text/javascript"></script>
<style>
/* change player background color */
#myVideo {
background-color: #1a535c;
}
</style>
</head>
<body>
<video id="myVideo" class="video-js vjs-default-skin"></video>
</body>
</html>Next create src/app.js:
import videojs from 'video.js';
import 'webrtc-adapter';
// register plugin
import Record from '../node_modules/videojs-record/dist/videojs.record.js';
var player;
const vidId = 'myVideo';
const playerOptions = {
controls: true,
autoplay: false,
fluid: false,
loop: false,
width: 320,
height: 240,
controlBar: {
volumePanel: false
},
plugins: {
// enable videojs-record plugin
record: {
audio: false,
video: true,
debug: true
}
}
};
// wait till DOM is ready
document.addEventListener('DOMContentLoaded', function() {
// create player
player = videojs(vidId, playerOptions, function() {
console.log('player ready! id:', vidId);
});
});Start the webpack-dev-server:
./node_modules/.bin/webpack-dev-server --mode=development
And open http://localhost:8080/src/index.html in a browser.