JavaScript video editor, encoder, and streamer - version 5.0.6
- visual compositing through Canvas API
- audio mixing through WebAudio API
- encoding and streaming through FFmpeg
- client implemented in ReactJS
- server implemented in ExpressJS
React Client Plug-in
This module is a ReactJS reference implementation of a client plug-in that utilizes the core @moviemasher/moviemasher.js module.
It exports component functions, contexts, hooks, utility methods, and styles that manifest a video editing user interface and interact with a server implementation like @moviemasher/server-express. Its imports are all specified as peer dependencies.
Documentation
In addition to this README, there is a simple demo and more extensive documentation available on MovieMasher.com. Inline documentation and code completion is also available when using a code editor that supports TypeScript and IntelliSense.
Installation
The following shell command installs the client and core libraries to your NPM project,
saving the former to the dependencies
array in your package.json file.
npm install @moviemasher/client-react --save
Please note that this does not install a server implementation that interacts with this module. Learn more about how the codebase is structured in the Architecture Guide.
Client Example
From our HTML file we link to both the compiled JavaScript and CSS files. To support the widest variety of workflows and tooling, the Cascading Style Sheets required to layout the client user interface are kept separate from JavaScript code:
masher.html<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='masher.js' defer></script>
<link href='masher.css' rel='stylesheet'>
<style>
body { margin: 0px; padding: 0px; font-family: sans-serif; }
body, #app { width: 100vw; height: 100vh; display: flex; }
.moviemasher .editor { --preview-width: 480px; --preview-height: 270px; }
</style>
<title>Movie Masher</title>
</head>
<body>
<div id='app' class='moviemasher'></div>
</body>
</html>
Since most of the interface elements scroll and stretch both horizontally and
vertically, we are rendering into a node that is styled to fill the whole window. We also
apply the moviemasher
class to the node, so the additional styles in the CSS file are engaged.
We also use this opportunity to set the dimensions of the video preview in the editor through CSS variables - to their default values, in this case. There are a few ways to override these dimensions, but doing so in the CSS is best practice.
Learn more about coloring and sizing the user interface using CSS in the Style Guide.
masher.tsximport React, { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import { ApiClient, Masher, DefaultMasherProps } from "@moviemasher/client-react"
import "@moviemasher/client-react/dist/moviemasher.css"
const applicationOptions = { previewSize: { width: 480, height: 270 } }
const options = DefaultMasherProps(applicationOptions)
const masher = <Masher {...options} />
const editor = <ApiClient>{masher}</ApiClient>
const strictMode = <StrictMode>{editor}</StrictMode>
ReactDOM.render(strictMode, document.getElementById('app'))
In this example we're using the DefaultMasherProps function to populate the Masher component with preconfigured children. Alternatively, child components like Player, Browser, Timeline, and Inspector can be selectively provided, and manually configured with a selection of available child controls.
We are also setting the preview dimensions here, to their defaults for demonstration purposes. As mentioned above, overriding the defaults from JavaScript is sub-optimal - a visible resizing will occur as the CSS variables are updated - but helpful if supplying custom CSS is impractical.
Learn more about building a fully customized video editing client in the Layout Guide.
Feedback
If any problems arise while utilizing the Movie Masher repository, a GitHub Issue Ticket should be filed. Further support is occassionally offered to particular projects on an hourly consulting basis.
Pull requests for fixes, features, and refactorings are always appreciated, as are documentation updates. Creative help with graphics, video and the web site is also needed. Please send an email to discuss ways to contribute to the project.