A collaborative class assignment for UTSC's CSCC09 Web Development course.
This web application is a fully-featured multi-user video editor with client-side video post-processing and cloud-based storage for source files and projects.
Link to deployed website: https://splycr.u4ium.org/
Link to youtube video: https://youtu.be/D3xLJ6RygOQ?t=30
Link to API Documentation: https://app.swaggerhub.com/apis-docs/otrante/c09/1.0.0#/users/signup
cd splycr
npm install
npm start
- Joe Armitage
- Ahmad Shanqiti
- Adrian Wong
- Watch, edit, and enjoy most video formats
- Clip multiple videos together
- Tag sections of source videos to be used as clips
- Drag and drop support for uploading videos
- Editing includes:
- Save a clip
- Join separate clips from varied sources
- Trim clips
- Outputs to mp4 video
- Real time preview of your changes
- Potential mobile friendliness (no commitments here yet)
- Share the videos you’ve worked on
- Add preset transitions between your videos
- Add introductions, titles, overlays, watermarks and credits using templates
- Output to most video container formats (as well as GIFs!) with a variety of codecs
- Add music or other audio channels overlaid or replacing clip audio
- Editing now also includes:
- Change playback speed
- Rotate, reverse and resize
- Snap clips together by dragging and dropping
- Change the brightness, hue, and much more!
- Video format, compression and re-encoding conversions
- Node.js JavaScript runtime environment to build a RESTful API
- MongoDB to store and access data as JSON documents
- Express web application framework to handle routing requests
- FFmpeg multimedia framework to decode, encode, filter and send video clips
- Mocha framework for testing JS applications
- Chai Assertion library, also used for helping test JS applications
- Google Cloud Using the Google Cloud Speech API in order to transcribe recordings into code
- Web Workers Used in order to do all the heavy stuff on other threads to ensure that the server doesn't take too long to process items
- React JavaScript library to develop an interactive UI
- Interact.js to improve drag and drop, and other gesture-based interactions
- WebGL API to render/process edits and effects using client-side GPU
- Avoiding load on server wherever possible by making full use of client-side resources, including client GPU
- Clipping at interframes instead of keyframes without lag for rendering
- Pre- and post-processing effects applied across clips and source media, integrating various codecs for flexibilty of input/output formats
- Synchronizing audio- and video-channels in the rendered video as aligned in the editor
- Simplification of a user interface with many features entry-level users do not need, while maintaining ready access to those features