diff --git a/vod/demo-loom-clone.md b/vod/demo-loom-clone.md index 6290be41..76f0bd4f 100644 --- a/vod/demo-loom-clone.md +++ b/vod/demo-loom-clone.md @@ -1,7 +1,38 @@ --- title: "Loom clone" --- -Loom clone -============== -TBA \ No newline at end of file +# Loom clone + +Loom is a really powerful tool that allows users to make a recording directly from their web browser or mobile phone while screen sharing and recording their narration. Are you interested in integrating such a tool into your project? we've got you covered! + +The api.video Mediastream Composer library will give you all of these abilities with the flexibility to customize the solution to your liking, or even modify it entirely. + +## Features + +- Screen casting to the stream +- Automatic adjustment of the size of the composition +- Webcam stream is added infront of the screencast stream +- Drawing on screen +- Resizing the webcam stream +- And more... + +## Demo + +Before cloning the Github repo, you can try out the demo of the [Loom clone](https://record.a.video/). Head over to the following [page](https://record.a.video/) to test it out. + +## Github repo + +Now that's you've got the look and feel, you can clone the repo and start hacking. + +You will find the repo [here](https://github.com/apivideo/api.video-typescript-media-stream-composer) + +To clone the repo, just go into your command line and run the following command: + +``` +$ git clone https://github.com/apivideo/api.video-typescript-media-stream-composer +``` + +## Usage + +You can find the usage instructions in the [Loom clone Github repository](https://github.com/apivideo/api.video-typescript-media-stream-composer#readme) diff --git a/vod/demo-youtube-clone.md b/vod/demo-youtube-clone.md index d7e4836a..ec6f9935 100644 --- a/vod/demo-youtube-clone.md +++ b/vod/demo-youtube-clone.md @@ -14,13 +14,13 @@ Youtube is one of the most, if not "The" most popular user-generated content pro ## Demo -Before cloning the Github repo, you can try out the demo of the Youtube mockup. Head over to the following page to test it out. +Before cloning the Github repo, you can try out the demo of the [Youtube mockup](https://api-video-youtube-demo.netlify.app/). Head over to the following [page](https://api-video-youtube-demo.netlify.app/) to test it out. ## Github repo Now that's you've got the look and feel, you can clone the repo and start hacking. -You will find the repo here: https://github.com/apivideo/youtube-clone-next +You will find the repo [here](https://github.com/apivideo/youtube-clone-next) To clone the repo, just go into your command line and run the following command: @@ -30,4 +30,4 @@ $ git clone https://github.com/apivideo/youtube-clone-next.git ## Usage -{https://github.com/apivideo/youtube-clone-next.git readme.md placeholder} \ No newline at end of file +You can find the usage instructions in the [Youtube mockup Github repository](https://github.com/apivideo/youtube-clone-next#readme) \ No newline at end of file diff --git a/vod/demos-airbnb-clone.md b/vod/demos-airbnb-clone.md new file mode 100644 index 00000000..a7142848 --- /dev/null +++ b/vod/demos-airbnb-clone.md @@ -0,0 +1,20 @@ +--- +title: "Airbnb clone" +--- + +# Airbnb mockup + +When creating any platform where you want user sharing or selling, video is the best tool. Video is a universal language that can replace words and give the customer an understanding for your product visually. + +## Features + +- Upload a video as a host +- Publish the video on the property page + +## Demo + +Try out the demo of the [Airbnb mockup](https://apivideo-airbnb-demo.netlify.app/). Head over to the following [page](https://apivideo-airbnb-demo.netlify.app/) to test it out. + +## Template + +Currently not availabe \ No newline at end of file diff --git a/vod/demos-prog-upload-uploader.md b/vod/demos-prog-upload-uploader.md new file mode 100644 index 00000000..c542be31 --- /dev/null +++ b/vod/demos-prog-upload-uploader.md @@ -0,0 +1,24 @@ +--- +title: "Progressive video uploader" +--- + +# Progressive video uploader + +When your user wants to record a video from their web browser, you want to make sure that the recording is available for the user as fast as possible. That's why we've created the concept of Progressive upload. + +With progressive upload, you can break the video into chunks and upload it while it is being recorded. + +## Features + +- Record an upstream video +- Video breaking into chunks +- Upload video chunks + +## Demo + +Before cloning the Github repo, you can try out the demo of the [Progressive video uploader](https://upstream.a.video/). Head over to the following [page](https://upstream.a.video/) to test it out. + +## Tutorial + +You can find the Tutorial on how to build such a usecase in our [docuementation](/vod/progress-upload.md) and [blog tutorial](https://api.video/blog/tutorials/progressively-upload-large-video-files-without-compromising-on-speed/). + diff --git a/vod/demos-template-overview.md b/vod/demos-template-overview.md index 86c8e7b4..595d5c65 100644 --- a/vod/demos-template-overview.md +++ b/vod/demos-template-overview.md @@ -13,10 +13,10 @@ The Templates are structured in a way where you can: ## VOD Templates list -* Video uploader -* Progressive upload -* Loom clone -* Youtube mockup -* Udemy mockup -* Airbnb mockup -* TikTok mockup +* [Video uploader](/vod/upload-your-first-video.md) +* [Progressive video uploader](/vod/demos-prod-upload-uploader.md) +* [Loom clone](/vod/demo-loom-clone.md) +* [Youtube mockup](/vod/demo-youtube-clone.md) +* [Udemy mockup](/vod/demos-udemy-clone.md) +* [Airbnb mockup](/vod/demos-airbnb-clone.md) +* [TikTok mockup](/vod/demos-tiktok-clone.md) diff --git a/vod/demos-tiktok-clone.md b/vod/demos-tiktok-clone.md new file mode 100644 index 00000000..e627a7eb --- /dev/null +++ b/vod/demos-tiktok-clone.md @@ -0,0 +1,37 @@ +--- +title: "TikTok clone" +--- + +# TikTok mockup + +When building out a social network, video is one the most important aspects of user engagement. Video is the universal language. With api.video you can integrate videos into your social network project easily and seamlessly. + +## Features + +- Mockup of TikTok UI +- List of the videos on your api.video account +- Swipe through videos +- Like a video +- Share a video + +## Demo + +Before cloning the Github repo, you can try out the demo of the [TikTok mockup](https://api-video-tiktok-demo.vercel.app/). Head over to the following [page](https://api-video-tiktok-demo.vercel.app/) to test it out. + +## Github repo + +Now that's you've got the look and feel, you can clone the repo and start hacking. + +You will find the repo [here](https://github.com/apivideo/tiktok_clone) + +To clone the repo, just go into your command line and run the following command: + +``` +$ git clone https://github.com/apivideo/tiktok_clone +``` + +## Usage + +You can find the usage instructions in the [TikTok mockup Github repository](https://github.com/apivideo/tiktok_clone#readme) + + diff --git a/vod/demos-udemy-clone.md b/vod/demos-udemy-clone.md new file mode 100644 index 00000000..c95ebb56 --- /dev/null +++ b/vod/demos-udemy-clone.md @@ -0,0 +1,35 @@ +--- +title: "Udemy clone" +--- + +# Udemy mockup + +E-learning breaks the boundaries of the classic and conventional learning in a class room, your users will be able to choose when and where they want to learn, at their own pace. + +api.video provides you with a mockup of the most popular e-learning platform, in order for you to get started quickly and streamline your development process. + +## Features + +- Mockup UI similar to Udemy +- Search bar for videos +- Browse the videos on your account + +## Demo + +Before cloning the Github repo, you can try out the demo of the [Udemy mockup](https://udemy-clone-next-typescript.vercel.app/). Head over to the following [page](https://udemy-clone-next-typescript.vercel.app/) to test it out. + +## Github repo + +Now that's you've got the look and feel, you can clone the repo and start hacking. + +You will find the repo [here](https://github.com/apivideo/udemy-clone-next-typescript) + +To clone the repo, just go into your command line and run the following command: + +``` +$ git clone https://github.com/apivideo/udemy-clone-next-typescript +``` + +## Usage + +You can find the usage instructions in the [Udemy mockup Github repository](https://github.com/apivideo/udemy-clone-next-typescript#readme) diff --git a/vod/demos-video-uploader.md b/vod/demos-video-uploader.md new file mode 100644 index 00000000..c4e1bed6 --- /dev/null +++ b/vod/demos-video-uploader.md @@ -0,0 +1,31 @@ +--- +title: "Video uploader" +--- + +# Video uploader + +Uploading a video is essential for many different use-cases. Whether it's an backoffice application like Strapi that requires the admin to upload videos, or a user-generated content platform like YouTube, that gives users the ability to upload their own videos. + +## Features + +- Upload a video + +## Demo + +Before cloning the Github repo, you can try out the demo of the [Upload a video](https://upload.a.video/). Head over to the following [page](https://upload.a.video/) to test it out. + +## Github repo + +Now that's you've got the look and feel, you can clone the repo and start hacking. + +You will find the repo [here](https://github.com/apivideo/upload.a.video) + +To clone the repo, just go into your command line and run the following command: + +``` +$ git clone https://github.com/apivideo/upload.a.video +``` + +## Usage + +You can find the usage instructions in the [Video uploader Github repository](https://github.com/apivideo/upload.a.video#readme) diff --git a/vod/navigation.yaml b/vod/navigation.yaml index 4f09a683..01dd384d 100644 --- a/vod/navigation.yaml +++ b/vod/navigation.yaml @@ -10,14 +10,22 @@ - heading: Templates & demos items: - - label: Upload a video - href: /vod/upload-your-first-video.md - - label: Private videos - href: /vod/demo-private-video.md - - label: Loom clone + - label: Overview + href: /vod/demos-template-overview.md + - label: Video uploader + href: /vod/demos-video-uploader.md + - label: Progressive video uploader + href: /vod/demos-prog-upload-uploader.md + - label: Loom mockup href: /vod/demo-loom-clone.md - - label: YouTube clone + - label: TikTok mockup + href: /vod/demos-tiktok-clone.md + - label: YouTube mockup href: /vod/demo-youtube-clone.md + - label: Udemy mockup + href: /vod/demos-udemy-clone.md + - label: Airbnb mockup + href: /vod/demos-airbnb-clone.md - heading: Libraries & SDKs items: