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 it 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
MediaDevicesbrowser API, we'll be able to list all the camera inputs available on the device. With this, we'll build a selection form using which 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');
&...
