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

原创

已于 2025-08-25 14:37:45 修改 · 809 阅读

标签

#音视频 #html #javascript #quic #webtransport

#MoQ

收录于

于 2025-08-25 11:55:46 首次发布

工作目录和基本操作见博客《基于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(htt