Getting Webcam input in HTML5 page

What is gRPC? gRPC is a modern open source high performance RPC framework that can run in any environment. It can efficiently connect services in and across data centers with pluggable support for load balancing, tracing, health checking and authenti...

Jul 22, 20233 min read82

Containerize Golang Application

Let's assume we have a sample Golang application (in a Go project folder). Contents of main.go package main import "fmt" func main() { fmt.Println("hello world") } In the same folder, run the following commands to initialize go modules # initial...

Jul 22, 20232 min read30

Initial EKS Setup for beginners

When you create a new Kubernetes Cluster in EKS - you still need to do several things until you can start using it. This simple set of steps aims to help people create an EKS cluster in simple steps and configure the most essential services like Log ...

Dec 8, 20213 min read95

How would you do it in golang: Stacks

To implement a stack in golang we can make use of the slice datatype which golang provides which allows us to modify the size on the fly. If we were doing it in C, we would need to define a max size for the array. Lets start with a simple structure ...

May 18, 20212 min read407

Make a Compliment Telegram Bot in Golang

The purpose of this guide is to make a simple telegram bot, which replies with a compliment for each and every message that it receives. Create a bot in telegram Look for a bot named BotFather https://t.me/botfather . This bot is used to create bots...

Sep 27, 20203 min read638

Make a Compliment Telegram Bot in Golang

MG's Blog

16 posts

Working at Amazon (Alexa and Amazon Business) on things related to metering, billing and invoicing. I like gaming, music, sketching, writing and cooking.

HTML Scaffold for our Application

We will design a simple HTML5 application (webpage) which will get the webcam input and play it in a video tag. To get started, lets make the scaffold HTML elements.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webcam App</title> </head> <body> <div class="container"> <video autoplay="true" id="videoElement"> </video> </div> <div class="container"> <button id="start" onclick="startVideo()">Start</button> <button id="stop" onclick="stopVideo()">Stop</button> </div> <script> // add code here </script> </body> </html>

We have made a simple HTML page, it has container - which we will use to style the application better. It has a video tag which we will use to display the webcam stream. And it has two buttons start and stop which we will use to start or stop the stream.

Basic CSS styles

Let's add some basic styling to the application. Make a style tag and add the following in it.

.container { // make it smaller and centered horizontally margin: 0px auto; width: 500px; } video { width: 500px; height: 375px; background-color: #666; } button{ // make buttons look nicer background: #eee; color: #333; border: 0; padding: 10px; } #start{ // make start button a bit different background-color:#3498db; color: #fff; }

Now, we should have a nice looking UI for our webcam stream viewer application -

The JS code

Next, we add the js code. Specifically, we define the functions startVideo() and stopVideo() which will respectively start and stop the webcam stream. Add the following in the script tag.

Command Palette

Comments (2)

More from this blog

HTML Scaffold for our Application

Basic CSS styles

The JS code

Trying it out