当前位置：首页 > news >正文

基于WebTransport（底层QUIC）实现视频传输（HTML+JavaScript）

news 2025/8/26 6:46:03

工作目录和基本操作见博客《基于HTTP3的WebTransport实践》，在此仅展示服务器端和客户端代码。

服务器端


import { readFile } from "node:fs/promises";
import { createServer } from "node:https";
import {Server} from "socket.io";
import { Http3Server } from "@fails-components/webtransport";
import { randomBytes } from 'crypto';
import path from "path";
import fs from "fs";// const key = await readFile("./certs/localhost.key");
// const cert = await readFile("./certs/localhost.crt");
const key = await readFile("./certs/localhost+2-key.pem");
const cert = await readFile("./certs/localhost+2.pem");const httpsServer = createServer({key,cert
}, async (req, res) => {if (req.method === "GET" && req.url === "/") {const content = await readFile("./longvideo.html");res.writeHead(200, {"content-type": "text/html"});res.write(content);res.end();}else if (req.method === "GET" && req.url === "/longvideo.js") {const content = await readFile("./longvideo.js");res.writeHead(200, {"content-type": "application/javascript"});res.write(content);res.end();}else {res.writeHead(404).end();}
});const port = process.env.PORT || 3001;httpsServer.listen(port, () => {console.log(`server listening at https://localhost:${port}`);
});// const io = new Server(httpsServer);
const io = new Server(httpsServer, {transports: ["polling", "websocket", "webtransport"]
});io.on("connection", (socket) => {console.log(`connected with transport ${socket.conn.transport.name}`);socket.conn.on("upgrade", (transport) => {console.log(`transport upgraded to ${transport.name}`);});socket.on("disconnect", (reason) => {console.log(`disconnected due to ${reason}`);});
});const h3Server = new Http3Server({port,host: "0.0.0.0",secret: 'ChangeIt', //不换也行cert,privKey: key,
});h3Server.startServer();(async () => {const stream = await h3Server.sessionStream("/socket.io/");const sessionReader = stream.getReader();while (true) {const { done, value } = await sessionReader.read();if (done) {break;}io.engine.onWebTransportSession(value);}
})();

客户端

longvideo.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebTransport Client</title><style>#video-grid{display: grid;grid-template-columns: repeat(auto-fill,300px);grid-auto-rows: 300px;}video {width: 100%;height: 100%;object-fit: cover;}</style></head>
<body>
<p>Status: <span id="status">Disconnected</span></p>
<p>Transport: <span id="transport">N/A</span></p>
<script src="/socket.io/socket.io.js"></script>
<script>const $status = document.getElementById("status");const $transport = document.getElementById("transport");// const socket = io();const socket = io({rejectUnauthorized: false,transportOptions: {webtransport: {hostname: "127.0.0.1"}}});socket.on("connect", () => {console.log(`connected with transport ${socket.io.engine.transport.name}`);$status.innerText = "Connected";$transport.innerText = socket.io.engine.transport.name;socket.io.engine.on("upgrade", (transport) => {console.log(`transport upgraded to ${transport.name}`);$transport.innerText = transport.name;});});socket.on("connect_error", (err) => {console.log(`connect_error due to ${err.message}`);});socket.on("disconnect", (reason) => {console.log(`disconnect due to ${reason}`);$status.innerText = "Disconnected";$transport.innerText = "N/A";});
</script><div id="video-grid"></div>
<script src="longvideo.js"></script></body>
</html>

longvideo.js


const videoGrid = document.getElementById('video-grid')
if (!videoGrid) {console.error('Video grid element not found');
}
const myVideo = document.createElement('video')
myVideo.muted = truesocket.on('connect', () => {// socket.io.engine.on("upgrade", (transport) => {//     console.log(`transport upgraded to ${transport.name}`);// });navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {addVideoStream(myVideo, stream)var madiaRecorder = new MediaRecorder(stream);var audioChunks = [];madiaRecorder.addEventListener("dataavailable", function (event) {audioChunks.push(event.data);});madiaRecorder.addEventListener("stop", function () {var audioBlob = new Blob(audioChunks);audioChunks = [];var fileReader = new FileReader();fileReader.readAsDataURL(audioBlob);fileReader.onloadend = function () {var base64String = fileReader.result;socket.emit("audioStream", base64String);};madiaRecorder.start();setTimeout(function () {madiaRecorder.stop();}, 500);});madiaRecorder.start();setTimeout(function () {madiaRecorder.stop();}, 500);}).catch((error) => {console.error('Error capturing audio.', error);});
});socket.on('audioStream', (audioData) => {var newData = audioData.split(";");newData[0] = "data:audio/ogg;";newData = newData[0] + newData[1];var audio = new Audio(newData);if (!audio || document.hidden) {return;}audio.play();
});function addVideoStream(video, stream) {video.srcObject = streamvideo.addEventListener('loadedmetadata', () => {video.play()})videoGrid.append(video)
}

效果

（我的小熊猫是不是很可爱！）
在这里插入图片描述
用Wireshark抓包，看到抓到的都是QUIC包。

参考代码：https://www.nxrte.com/jishu/yinshipin/41948.html
该博客提供了使用 Socket.io 和 NodeJS 实现实时音频聊天，但是基于websocket（TCP）的实现。本文将其改成基于WebTransport（QUIC）的，实现更安全更高效的数据传输。

查看全文

http://www.dtcms.com/a/349627.html