![]() ![]() The stream I capture in OBS can be connected to a streaming platform such as Twitch, YouTube, or others, and it will deliver my stream to that platform however, for this project, my goal is to stream to a web application that I make myself. I can mix audio, switch between scenes with transitions, adjust the layouts, and so much more. I can edit every aspect of my stream and create scenes made up of multiple sources such as images, text, etc. It is a free open source software that gives many configuration options for capturing and editing a stream. I'll use the Open Broadcast Software.įor anyone serious about streaming, OBS is a powerful tool. The first thing I need is software to capture my video stream on my computer. (In the next post in this series, I will build the Vue.js/Node.js full-stack application with added functionality.) Now that I have a high-level picture of how this project will be built, I am ready to build the barebones front-end video stream application. The browser Media Streams API gets permission to use the browser microphone -> the microphone takes in an audio stream of the audio that plays from the live stream -> The Deepgram API opens a web socket channel in the browser to send the audio stream to Deepgram -> the browser receives the JSON object in return that contains the text-transcript -> Javascript puts the text onto the page as captions as the video is playing. The general flow for the text captions technology will be something like this: Here is a diagram to demonstrate the core technology for the text captions part of the project: The diagram presents this flow: the webcam takes in the video stream -> OBS captures that video stream so it can be sent along to Amazon IVS -> Amazon IVS provides a service to take in the stream, optimize it, and send it in a format to the browser so that it can be used in an HTML video player -> the HTML video element plays the optimized video stream. Here is a diagram to demonstrate the core technology for the video streaming part of the project: Later, in the Vue.js version I build, I'll add those pieces, but to start, I just want to get the video player working - I want it to play my live stream and display text captions for what I'm saying as I stream to viewers. This means I will not take into account real-world requirements such as hiding API keys or creating an entry page to restrict access to the video stream. I want to keep it as simple as possible, focusing on how to build a video streaming player in the browser that includes text captions. I'll build a 'vanilla' video streaming player in the sense that I will only use HTML and Javascript on the front-end, and the only back-end will be the work I do to get Amazon IVS set up to receive the OBS stream. ![]() Now I'll start by building the first version of the project. Here is a gif to demonstrate the final project: I will build a full-stack video streaming application with a node.js server to help me add a layer of security for some of the data I need to protect. Vue.js/Node.js - For the second version (the framework version), I will use Vue.js, a Javascript framework that gives me the tools I need to more easily include important features for security like routing and navigation guards. HTML/Javascript - The first version I build (the vanilla version) will be focused on creating a front-end with a very limited back-end, emphasizing the most barebones approach to getting the application working. I'll use the following to build each project: I will build two versions of this project. Deepgram - a speech-to-text API that can receive an audio stream and return a text-transcript.Amazon IVS - an AWS service that can receive a video stream from OBS and put that stream into the browser, optimizing the entire process.Open Broadcast Software - an open-source software used to capture video streams.The main technologies I will use to build the live stream and text captions functionality are: Companies such as Twitch, StreamYard, Facebook Live, and many others provide live streaming on the web as a product, so I got curious about how I might go about building my own version. ![]() In this series, I will build a live streaming web application with text captions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |