Playwright 是由微软开发的一款功能强大的浏览器自动化框架，支持 Chromium、Firefox 和 WebKit，可以用于测试、爬虫、自动化等用途。

import { chromium } from 'playwright';

async function getItemAvailability(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto(url);
  // ...
}

XPath 是一种在 XML/HTML 树结构中查找元素的语言，适用于页面结构复杂或需要精确匹配的场景。

按 class 选择（适用于多个 class）

 来等候「BUY NOW」或「NOTIFY ME WHEN AVAILABLE」元素出现：

await Promise.race([
  page.waitForSelector('xpath=//div[text()="BUY NOW"]'),
  page.waitForSelector('xpath=//div[text()="NOTIFY ME WHEN AVAILABLE"]'),
]);

如果有货，则立刻发送 iMessage 提醒自己

function sendMacImessage(to, message) {
  const script = `osascript -e 'tell application "Messages" to send "${message}" to buddy "${to}"'`;
  exec(script);
}

无论是否有货，都会截图记录：

await page.screenshot({
  path: path.join(__dirname, "screenshots", productName + ".png"),
  fullPage: true,
});

定时执行：每天 8 点到 22 点，每分钟检查一次

cron.schedule("* 8-22 * * *", async () => {
  await Promise.all([
    getItemAvailability("https://www.popmart.com/au/products/1706/..."),
    getItemAvailability("https://www.popmart.com/au/products/643/..."),
  ]);
});

最近我写了一个小工具，用于定时监控 POPMART 上某些商品的库存状态。

使用 Playwright + Cron 构建一个 POPMART 商品库存监控器

Long Zhao

1. 建立 Socket 连接（用于信令）

WebRTC 本身并不包含信令机制，因此我们需要借助 Socket.IO 实现客户端和服务端之间的参数交换。

建立连接后，所有后续的参数交换（如请求创建 transport、传递 dtls 参数等）都将通过这个 socket 通道完成。

const connectSocket = () =>
  new Promise((resolve) => {
    const socket = io(import.meta.env.VITE_SERVER_URL || "http://localhost:3000");
    socket.on("connect", () => resolve(socket));
  });


在 WebRTC 中，客户端必须了解服务端支持哪些音视频编码格式。

为了完成媒体协商，客户端需要通过 socket 向服务端请求当前 router 的能力信息：

创建 Transport（WebRTC 媒体通道）

为了发送本地的音视频轨道，客户端首先需要创建一个 

。但这个 Transport 并不是客户端自己构造的，而是通过 Socket 请求服务端协助完成。

1. 请求并创建 sendTransport 本地实例

socket.emit("createTransport", async (transportOptions) => {
  const sendTransport = device.createSendTransport({
    ...transportOptions,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
  });
});

这个过程可以看作是发送端媒体通道的“连接协商阶段”。

在创建 sendTransport 的阶段，我们就需要监听 "connect" 事件，是因为 WebRTC 的安全连接建立是一个渐进式过程：Transport 的构建知识准备阶段，只有当真正开始推流时 (例如 

), medisoup-client 才会发起 DLTS 握手流程

sendTransport.on("connect", ({ dtlsParameters }, callback) => {
  socket.emit("connectTransport", {
    transportId: transportOptions.id,
    dtlsParameters,
  }, callback);
});

客户端要接收远程媒体流，也需要一个 

 类似，也依赖服务端提供的 ICE 与 DTLS 配置。

1. 请求并创建本地 recvTransport 本地实例

socket.emit("createTransport", async (transportOptions) => {
  const recvTransport = device.createRecvTransport({
    ...transportOptions,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
  });

  recvTransport.on("connect", ({ dtlsParameters }, callback) => {
    socket.emit("connectTransport", {
      transportId: transportOptions.id,
      dtlsParameters,
    }, callback);
  });
});


 创建完接收通道后，mediasoup-client 会在第一次 

我们同样需要监听 "connect" 事件，并通过 socket 将 DTLS 参数发送给服务端完成握手。

recvTransport.on("connect", ({ dtlsParameters }, callback) => {
  socket.emit("connectTransport", {
    transportId: transportOptions.id,
    dtlsParameters,
  }, callback);
});

第一步是获取本地摄像头和麦克风的媒体流。这通常需要用户授权：

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const videoTrack = stream.getVideoTracks()[0];
sendTransport.produce({ track: videoTrack });

这一步是媒体采集的开始，只有用户授权之后，才能真正采集并上传媒体轨道。

2. 监听 produce 事件，协商流信息

 时，mediasoup-client 不会直接发送媒体，而是先触发 "produce" 事件。

sendTransport.on("produce", async ({ kind, rtpParameters }, callback) => {
  socket.emit("produce", {
    transportId: sendTransport.id,
    kind,
    rtpParameters,
  }, ({ id }) => {
    callback({ id });
    resolve(id);
  });
});

在这个事件中，客户端需要将当前轨道的类型（音频/视频）和参数（编码方式、分辨率等）发送给服务端，让服务端生成一个对应的 Producer。

当客户端想要订阅远端的某个 Producer 时，需要通过 Socket 请求服务端分配对应的 Consumer。

这个过程也属于 WebRTC 的信令交换：客户端提供自身能力信息，服务端校验兼容性并返回 Consumer 配置。

当客户端想要接收远端某个用户的视频时，必须先告诉服务端：“我准备好了，可以接收这个 Producer 的媒体。”

socket.emit("consume", {
  transportId: recvTransport.id,
  producerId,
  rtpCapabilities: device.rtpCapabilities,
}, async (data) => {
  const consumer = await recvTransport.consume({
    id: data.id,
    producerId,
    kind: data.kind,
    rtpParameters: data.rtpParameters,
  });

  const stream = new MediaStream();
  stream.addTrack(consumer.track);
});

本文将讲解如何在 React 应用中使用 mediasoup-client 与 Socket.IO 实现 WebRTC 多人视频通话客户端逻辑。

使用 mediasoup 创建一个多人视频聊天室 - 客户端

下面我们逐步拆解服务端代码的每个关键步骤，并辅以对应的代码段说明。

我们使用 Node.js 原生的 http 模块创建 HTTP 服务，并通过 Socket.IO 实现 WebSocket 通信：

const http = require("http");

let server;
const listener = (_, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("OK");
};

server = http.createServer(listener);

随后将 Socket.IO 实例挂载到 server 上：

const io = require("socket.io")(server, { cors: { origin: "*" } });

这样我们就完成了基础的 HTTP + WebSocket 信令服务搭建。

启动后我们需要初始化 mediasoup 的核心组件：

worker 是处理媒体的后台线程，router 是负责音视频流转发的“会议室”。

这样做的好处是便于后续清理资源，也能实现每用户隔离管理。

客户端请求 createTransport 后，服务端创建 WebRTC 传输通道：

socket.on("createTransport", async (callback) => {
  const listenIp = process.env.ANNOUNCED_IP
    ? { ip: "0.0.0.0", announcedIp: process.env.ANNOUNCED_IP }
    : { ip: "127.0.0.1", announcedIp: null };

  const transport = await router.createWebRtcTransport({
    listenIps: [listenIp],
    enableUdp: true,
    enableTcp: true,
    preferUdp: true,
  });

  transports[socket.id][transport.id] = transport;

  callback({
    id: transport.id,
    iceParameters: transport.iceParameters,
    iceCandidates: transport.iceCandidates,
    dtlsParameters: transport.dtlsParameters,
  });
});

这里返回的参数会由客户端用来建立 WebRTC 安全连接。

客户端调用 connectTransport 时，我们完成 DTLS 握手过程：

socket.on("connectTransport", async ({ transportId, dtlsParameters }, callback) => {
  await transports[socket.id][transportId].connect({ dtlsParameters });
  callback();
});

客户端准备发送音频或视频后，会请求 produce：

socket.on("produce", async ({ transportId, kind, rtpParameters }, callback) => {
  const producer = await transports[socket.id][transportId].produce({ kind, rtpParameters });
  producers[socket.id][producer.id] = producer;
  callback({ id: producer.id });
});

Producer 代表一个发布出去的媒体轨道。

用户想订阅其他人的流时会调用 consume，服务端验证并创建：

socket.on("consume", async ({ transportId, producerId, rtpCapabilities }, callback) => {
  if (!router.canConsume({ producerId, rtpCapabilities })) {
    return callback({ error: "Cannot consume" });
  }
  const consumer = await transports[socket.id][transportId].consume({
    producerId,
    rtpCapabilities,
    paused: false,
  });
  consumers[socket.id][consumer.id] = consumer;
  callback({
    id: consumer.id,
    kind: consumer.kind,
    rtpParameters: consumer.rtpParameters,
  });
});

这一步客户端会用返回的参数创建 MediaStreamTrack 播放远端视频。

socket.on("pauseProducer", async ({ producerId }, callback) => {
  await producers[socket.id][producerId].pause();
  callback?.();
});

socket.on("resumeProducer", async ({ producerId }, callback) => {
  await producers[socket.id][producerId].resume();
  callback?.();
});

socket.on("pauseConsumer", async ({ consumerId }, callback) => {
  await consumers[socket.id][consumerId].pause();
  callback?.();
});

socket.on("resumeConsumer", async ({ consumerId }, callback) => {
  await consumers[socket.id][consumerId].resume();
  callback?.();
});

适用于静音、隐藏摄像头等场景。

清理断开用户的所有资源，确保服务器稳定运行：

socket.on("disconnect", () => {
  Object.values(transports[socket.id] || {}).forEach((t) => t.close());
  Object.values(producers[socket.id] || {}).forEach((p) => p.close());
  Object.values(consumers[socket.id] || {}).forEach((c) => c.close());
  delete transports[socket.id];
  delete producers[socket.id];
  delete consumers[socket.id];
});

下一篇文章我们将介绍客户端部分的实现，包括如何初始化 Device、创建发送和接收通道，并播放远程媒体流。

本文聚焦于服务端实现，讲解如何使用 mediasoup 搭建一个稳定高效的多人视频聊天室服务，包含服务端代码逐段讲解。

使用 mediasoup 创建一个多人视频聊天室 - 服务器

mediasoup 是一个现代化、性能强大的 WebRTC SFU（Selective Forwarding Unit）库，适合构建高效、可扩展的实时音视频应用。

在实时音视频系统中，媒体流的传输架构对性能有巨大影响，常见的三种模式包括：

const worker = await mediasoup.createWorker();

const router = await worker.createRouter({
  mediaCodecs: [
    { kind: "audio", mimeType: "audio/opus", clockRate: 48000, channels: 2 },
    { kind: "video", mimeType: "video/VP8", clockRate: 90000 },  
  ],
});

const transport = await router.createWebRtcTransport(...);

const producer = await transport.produce({ track });

const consumer = await transport.consume({ producerId });

在 mediasoup 中，Device 是客户端（通常是浏览器端）用来与服务器（SFU）进行媒体协商的核心组件。

，以确保双方支持的编码格式兼容。

const device = new mediasoupClient.Device();
await device.load({ routerRtpCapabilities });

加载完成后，Device 才能创建 WebRTC transport 来发送（produce）或接收（consume）音视频流。

const sendTransport = device.createSendTransport({});
const recvTransport = device.createRecvTransport({});

浏览器 <---> WebSocket <---> mediasoup server <---> mediasoup worker

在这篇文章中，我们将通过 mediasoup 构建一个简单的多人视频聊天室，涵盖 mediasoup 的基本概念、代码结构以及关键实现细节。

Make Your Voice Heard

In-text comments for more connection

Explore Our Tags

Explore Our Blogs

使用 Playwright + Cron 构建一个 POPMART 商品库存监控器

使用 mediasoup 创建一个多人视频聊天室 - 客户端

使用 mediasoup 创建一个多人视频聊天室 - 服务器

使用 mediasoup 创建一个多人视频聊天室 - 基本概念