WebCodec - Sending and Receiving
Introduction
Hello! ?
In this tutorial I will show you how to use the WebCodec API to both send and receive video.
First lets get coding the server.
Setting Up The Server
In order to send and receive packets between peers we will need a websocket server.
For this we will create a very basic server using nodejs. First initialize the project:
npm init -y
Then install the required modules:
npm i ws express
Next create a new file called "index.js" and populate it with the following code:
// server.js
const WebSocket = require('ws');
const express = require('express');
const app = express();
const port = 3000;
const connectedClients = new Set();
app.use(express.static(__dirname + '/public'));
const wss = new WebSocket.Server({ noServer: true });
wss.on('connection', ws => {
console.log('new connection');
connectedClients.add(ws);
ws.on('message', message => {
connectedClients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.once('close', () => {
connectedClients.delete(ws);
console.log('connection closed');
});
});
const server = app.listen(port, () => {
console.log(`server running on port ${port}`);
});
server.on('upgrade', (request, socket, head) => {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request);
});
});
Nothing too complicated the above code serves the public directory and handles the websocket connection sending packets to all connected peers. ?
Next we will handle the sender part, but first create a new directory called "public"
mkdir public
Creating The Sender
The first front end file we will create is the one that is broadcasting, create a new file called "sender.html" under public and populate it with the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sender</title>
<style>
video, canvas {
width: 640px;
height: 480px;
border: 2px solid black;
margin: 10px;
}
</style>
</head>
<body>
<video id="video" autoplay playsinline></video>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
const videoElement = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let videoEncoder;
let socket;
const initWebSocket = () => {
socket = new WebSocket('ws://localhost:3000');
socket.onopen = () => console.log('WebSocket connected');
socket.onerror = error => console.error('WebSocket error:', error);
};
const initEncoder = () => {
videoEncoder = new VideoEncoder({
output: (encodedChunk) => {
const chunkData = new Uint8Array(encodedChunk.byteLength);
encodedChunk.copyTo(chunkData);
if (socket.readyState === WebSocket.OPEN) {
socket.send(chunkData.buffer);
}
},
error: (error) => console.error('Encoding error:', error)
});
videoEncoder.configure({
codec: 'vp8',
width: 640,
height: 480,
bitrate: 1_000_000,
framerate: 30
});
};
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
videoElement.srcObject = stream;
const videoTrack = stream.getVideoTracks()[0];
const processor = new MediaStreamTrackProcessor(videoTrack);
const reader = processor.readable.getReader();
const processFrames = async () => {
while (true) {
const { value: videoFrame, done } = await reader.read();
if (done) break;
ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
videoEncoder.encode(videoFrame, { keyFrame: true });
videoFrame.close();
}
};
processFrames();
})
.catch((error) => console.error('Failed to get camera', error));
initEncoder();
initWebSocket();
</script>
</body>
</html>
To breakdown and explain what the code does.
- HTML Structure
- The video element displays live video from the user's camera
- The canvas element is used to display individual frames of the video feed. This provides a visual preview of each encoded frame
- JavaScript code
- The initWebSocket function connects to a WebSocket server. This connection is essential for streaming the encoded frames to a receiver
- The initEncoder function creates a VideoEncoder object. It defines an output callback that runs every time the encoder produces a new chunk
- The videoEncoder.configure() sets the codec to VP8 with a 1Mbps bitrate and 30 FPS, ensuring a smooth and high quality encoding
- getUserMedia call is used to request access to the camera. The video feed is assigned to the video element, and the VideoTrackProcessor allows processing each frame in real time
- The processFrames function reads frames from the video, displays them on the canvas element, and encodes each frame using videoEncoder.encode(). Each frame is then sent to the server as an encoded chunk.
Phew! Hopefully that was understandable to you. Next we will create the file that will receive the stream. ?
Creating The Receiver
This file receives the encoded video chunks via WebSocket, decodes them, and displays them on a canvas element.
Create a new file under the public directory called "receiver.html" and populate it with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Receiver</title>
<style>
canvas {
width: 640px;
height: 480px;
border: 2px solid black;
margin: 10px;
}
</style>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let videoDecoder;
const initWebSocket = () => {
const socket = new WebSocket('ws://localhost:3000');
socket.binaryType = 'arraybuffer';
socket.onmessage = event => {
decodeFrame(event.data);
};
socket.onerror = error => console.error('WebSocket error:', error);
};
const initDecoder = () => {
videoDecoder = new VideoDecoder({
output: (videoFrame) => {
ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
videoFrame.close();
},
error: (error) => console.error('Decoding error:', error)
});
videoDecoder.configure({
codec: 'vp8',
width: 640,
height: 480
});
};
const decodeFrame = (encodedData) => {
const chunk = new EncodedVideoChunk({
type: 'key',
timestamp: performance.now(),
data: new Uint8Array(encodedData)
});
videoDecoder.decode(chunk);
};
initDecoder();
initWebSocket();
</script>
</body>
</html>
To break down the above file:
- HTML
- The canvas element is the primary display area for the decoded video frames. It has a fixed width, height, and border, same as the sender page.
- JavaScript
- The initWebSocket function creates a new WebSocket connection, receiving encoded frames from the sender and passing them to decodeFrame() for decoding.
- initDecoder initializes a VideoDecoder object configured for the VP8 codec. The decoder outputs each frame to the canvas.
- decodeFrame takes the encoded data, wraps it in an EncodedVideoChunk (as a key frame with the current timestamp), and decodes it via videoDecoder.decode(). Each frame is displayed on the canvas in real-time
Phew! Now that we have all the pieces needed, lets actually run it! ?
Running The Code
To run the code simply run the following command:
node index.js
Then point your browser to http://localhost:3000/sender.html
Allow access to your camera and then open another tab to
http://localhost:3000/receiver.html
Like the below you should see the stream being sent from the sender.
Conclusion
In this tutorial I have shown how to get access to the camera, encode it, send the chunks over WebSocket and decode and display them on the receiver side. I hope this tutorial was of use to you. ?
As always you can get the code via my github:
https://github.com/ethand91/webcodec-stream
Happy Coding! ?
Like my work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.
If you are looking to learn Algorithm Patterns to ace the coding interview I recommend the [following course](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch
The above is the detailed content of WebCodec - Sending and Receiving. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
