{"id":3490,"date":"2022-09-21T21:58:27","date_gmt":"2022-09-21T16:58:27","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3490"},"modified":"2022-09-21T21:59:17","modified_gmt":"2022-09-21T16:59:17","slug":"make-youtube-video-streaming-clone-using-mern-stack-ffmpeg","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/make-youtube-video-streaming-clone-using-mern-stack-ffmpeg\/","title":{"rendered":"Make Youtube Video Streaming Clone Using MERN Stack & FFmpeg"},"content":{"rendered":"\n

In this tutorial, you will learn how to make a video streaming website<\/strong> that lets you upload and view videos, like\/dislike them, and comment on others (just like YouTube). This Youtube Video Streaming Clone<\/strong> is built using the MERN stack (MongoDB, ExpressJS, ReactJS, NodeJS) and FFmpeg<\/strong>.<\/p>\n\n\n\n

A download button is given at the end of this tutorial from where you can download the full source code of Youtube Video Streaming Clone<\/strong> project.<\/p>\n\n\n\n

Installation<\/h2>\n\n\n\n
  1. Clone this repository<\/li><\/ol>\n\n\n\n
    $ git clone https:\/\/github.com\/asarj\/PressPlay.git<\/pre>\n\n\n\n
    1. Navigate to the server\/config<\/code> directory<\/li><\/ol>\n\n\n\n
      $ cd server\/config<\/pre>\n\n\n\n
      1. Create a dev.js<\/code> file<\/li><\/ol>\n\n\n\n
        $ touch dev.js<\/pre>\n\n\n\n
        1. In the dev.js<\/code> file, you will need to specify the URI to your MongoDB database.
          1. This can be obtained by logging into your MongoDB account and heading to your database cluster. From here, the URI can be found at:
            Clusters > Command Line Tools > Connect To Your Cluster > Connect Instructions > Connect your application (Make sure that Node.js is the selected driver and 3.0 or later is the selected version.)<\/li>
          2. Once you’ve navigated to the correct page that has your MongoDB URI, the connection string should look something like this:
            mongodb+srv:\/\/<username>:<password>@cluster0-jl7lm.mongodb.net\/test?retryWrites<\/code>
            where <username><\/code> is the username to your cluster account and <password><\/code> is the corresponding password to your account<\/li>
          3. Copy this string and navigate back to dev.js<\/code>, where you will paste the following code:<\/li><\/ol>module.exports = { mongoURI: ‘<insert MongoURI here>’ }where <insert MongoURI here><\/code> is the connection string you found in step 4.2. You can also look at dev-example.js<\/code> for a sample as to what it should look like<\/li>
          4. Save the dev.js<\/code> file<\/li>
          5. Install the server dependencies
            1. Navigate back to the project root directory<\/li><\/ol>$ cd ..\/..\/
              1. npm install the server dependencies<\/li><\/ol>$ npm install<\/li>
              2. Install the client\/front-end dependencies
                1. Navigate to the client directory<\/li><\/ol>$ cd client\/
                  1. npm install the client dependencies<\/li><\/ol>$ npm install<\/li>
                  2. Navigate back to the project root directory<\/li><\/ol>\n\n\n\n
                    $ cd ..<\/pre>\n\n\n\n
                    1. Run the application!<\/li><\/ol>\n\n\n\n
                      $ npm run dev<\/pre>\n\n\n\n
                      1. Visit\u00a0localhost:3000<\/code>\u00a0to check it out!<\/li><\/ol>\n\n\n\n
                        \n\n\n\n
                        Features<\/h2>\n\n\n\n
                        <\/a>Sign Up Page<\/h3>\n\n\n\n
                        This is where you can register for an account in order to post videos and react to other users. All that is needed is your first and last name, email address, and password.<\/p>\n\n\n\n
                        \"Sign
                        Sign Up Page<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Sign In Page<\/h3>\n\n\n\n
                        You can sign in to the website here. You will be directed to this page right after registration, or if you click Sign In on the top right corner.<\/p>\n\n\n\n
                        \"Sign
                        Sign In Page<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Homepage<\/h3>\n\n\n\n
                        This is the main screen of the webapp. Here you can see all videos that every other user has posted, including ones that you’ve uploaded as well. For each video, you can see the title, the publisher, view count, and post date.<\/p>\n\n\n\n
                        \"Homepage\"
                        Homepage<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Subscribed Videos<\/h3>\n\n\n\n
                        This is where you can view all the videos from people you subscribe to. For example, the user I have logged in as follows “Sport Fan” and “Rapper Fan,” hence why they show up in this screen.<\/p>\n\n\n\n
                        \"Subscribed
                        Subscribed Videos<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Upload a Video<\/h3>\n\n\n\n
                        If you wish to upload a video to share with the community, you can click the “Upload” link on the top right, where you’ll be presented with a webpage that looks like the one below. Here you can upload any video of your choice by clicking the plus (+) button, and the webapp will generate a thumbnail for you. You have the option of entering in the video title, description, privacy rating (public or private) and category as well.<\/p>\n\n\n\n
                        \"Upload
                        Upload a Video<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Watch a Video<\/h3>\n\n\n\n
                        Clicking on any video on the homepage or subscribed video page will take you to a dedicated link in which you can view the video. On this screen, you can view the selected video, or click on another video on the side panel after watching the current one.<\/p>\n\n\n\n
                        \"Watch
                        Watch a Video<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Reactions<\/h3>\n\n\n\n
                        The platform gives users a variety of ways to interact with each other. While watching a video, you have the option to like or dislike the video, subscribe to the user, or leave a comment with your thoughts. You can also reply to other users’ comments and like\/dislike those too.<\/p>\n\n\n\n
                        \"Reactions\"
                        Reactions<\/figcaption><\/figure>\n\n\n\n
                        <\/a>Dependencies<\/h2>\n\n\n\n