Sending a stream of images from the browser in 
a WebSocket

In this section, we’ll see how you can capture images from the webcam in the browser and send them through a WebSocket. Since it mainly involves JavaScript code, it’s admittedly a bit beyond the scope of this book, but it’s necessary to make the application work fully.

The first step is to enable a camera input in the browser, open the WebSocket connection, pick a camera image, and send it through the WebSocket. Basically, it’ll work like this: thanks to the MediaDevices browser API, we’ll be able to list all the camera inputs available on the device. With this, we’ll build a selection form so the user can select the camera they want to use. You can see the concrete JavaScript implementation in the following code:

script.js

window.addEventListener('DOMContentLoaded', (event) => {  const video = document.getElementById('video');
 ...