Git Product home page Git Product logo

geekfusion / bruh-clips Goto Github PK

View Code? Open in Web Editor NEW

This project forked from shanksum/bruh-clips

0.0 0.0 0.0 674 KB

一款与朋友分享视频的网站。将不大于500M的视频上传,将生成的链接发给朋友,朋友通过这个链接即可观看这个视频。

Home Page: https://bruh-clips.com

License: GNU General Public License v3.0

Shell 0.66% JavaScript 20.37% PHP 10.84% CSS 4.97% HTML 63.16%

bruh-clips's Introduction

bruh-clips logo

bruh-clips - Time Limited Video Sharing

This project aimed at creating a lightweight and easy platform to share videos and clips with your friends. After uploading a clip, a new page is generated and makes the video available to watch for 48 hours, after which the page and the video file are deleted.

I like the idea of pastebin and wanted something similar for videos, since most of the clips I wanted to share were too large for chat applications like Discord.

The first idea inlcuded to let the user chose how long the video should be available, but to keep the system minimal, a simple cron job just scrubs every page and video older than 48 hours.

Check out the website at bruh-clips.com.

Deployment

Coded in vanilla JavaScript, HTML and PHP, this project does not need any special deployment procedure or dependencies. Just put all the content of the "web" folder on a webserver and point a domain at it.

However, you need to change some things if you want to host your own version:

  1. The two php files upload.php and process-video.php use absolute paths to configure the location of the FFmpeg binary and the domain of the website (currently pointing at bruh-clips.com).
  2. All .html files are currently branded in the bruh-clips.com) design. You might want to change this and the corresponding metadata tags.
  3. Set up the cron job manually with your hoster/web server. This job takes care of deleting all uploaded content after 48 hours.

Procedure

  1. The user selects a valid video file (currently set to: only .mp4 and max. 500mb) from his system and clicks on upload.

  2. home.js takes the video and snaps a frame at the end of the video (duration * 0.90) to use as a thumbnail.

  3. The file is transmitted to the server using a XMLHttpRequest.

  4. upload.php handles the server-side validation and entire upload process:

    • Valdiate the video file and check if the webserver still has enough space left. If any validation step fails, the script will return an error message to be displayed.
    • Generate a random ID to use for the videofile, generated thumbnail and new HTML page.
    • Build together a new HTML page using the template.html.
    • Process the uploaded video with FFmpeg to allow for a faster buffering and loading time.
    • Redirect the user to the new page after processing is complete.
  5. The user lands on the new page and can copy the link to share it. Thumbnail and videoname will be used in the link preview on any social media which supports the Open Graph Protocol.

  6. 48 hours after uploading, the cron job will delete thumbnail, videofile and HTML page from the server. All visitors after that will be redirected to a 404 page.

ToDos

  1. Add a file name input field to allow for a renaming of the clip before uploading.
  2. Integrate the possibility to cut/trim a clip before uploading using ffmpeg and server-side rendering.
  3. Set up CI/CD for this repository to publish changes directly to bruh-clips.com.

(not in that order)

bruh-clips's People

Contributors

shanksum avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.