┌─────────────┐       信令通道        ┌─────────────┐
│  发送端 A    │ ◄──────────────────► │  接收端 B    │
│             │   (密钥协商/ICE)      │             │
│ 采集 → 编码  │                       │ 解码 → 渲染  │
│    ↓        │                       │    ↑        │
│ 加密变换器   │   SRTP 密文传输       │ 解密变换器   │
└─────────────┘                       └─────────────┘

// 双方各自生成 ECDH 密钥对
const keyPair = await crypto.subtle.generateKey(
  { name: 'ECDH', namedCurve: 'P-256' },
  true,
  ['deriveKey', 'deriveBits']
);

// 导出公钥通过信令发送给对端
const publicKeyRaw = await crypto.subtle.exportKey('raw', keyPair.publicKey);
signaling.send({ type: 'e2ee-key', payload: btoa(String.fromCharCode(...new Uint8Array(publicKeyRaw))) });

async function deriveSharedKey(myPrivateKey, peerPublicKeyRaw) {
  const peerPublicKey = await crypto.subtle.importKey(
    'raw', new Uint8Array(atob(peerPublicKeyRaw).split('').map(c => c.charCodeAt(0))),
    { name: 'ECDH', namedCurve: 'P-256' }, true, []
  );

  const sharedSecret = await crypto.subtle.deriveBits(
    { name: 'ECDH', public: peerPublicKey },
    myPrivateKey, 256
  );

  // HKDF-SHA256 扩展为 AES-GCM 密钥 + 盐
  const baseKey = await crypto.subtle.importKey('raw', sharedSecret, 'HKDF', false, ['deriveKey']);
  return crypto.subtle.deriveKey(
    { name: 'HKDF', hash: 'SHA-256', salt: new Uint8Array(16), info: new TextEncoder().encode('WebRTC-E2EE') },
    baseKey, { name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']
  );
}

const senderTransform = new TransformStream({
  async transform(controller, frame) {
    try {
      // 1. 获取帧元数据
      const { data, timestamp, sequenceNumber } = frame;
      
      // 2. 构造 nonce：盐(4B) + 帧计数器(8B) + SSRC(4B)
      const nonce = new Uint8Array(12);
      nonce.set(salt);                    // 固定盐
      nonce.set(uint64ToBytes(frameCounter), 4); // 动态计数器
      nonce.set(ssrcBytes, 12);           // 可选：区分多路流
      
      // 3. AES-GCM 加密
      const encrypted = await crypto.subtle.encrypt(
        { name: 'AES-GCM', iv: nonce, tagLength: 128 },
        encKey, data
      );
      
      // 4. 重组帧（保留 RTP 头部前 12 字节供 SRTP 解复用）
      const newData = new Uint8Array(data.byteLength);
      newData.set(data.slice(0, 12));     // 保留原始 RTP 头
      newData.set(new Uint8Array(encrypted), 12);
      
      controller.enqueue(new RTCEncodedVideoFrame({
        type: frame.type,
        timestamp,
        data: newData,
        // 其余字段透传
      }));
      frameCounter++;
    } catch (e) {
      console.error('加密失败', e);
      controller.error(e);
    }
  }
});

const sender = pc.getSenders().find(s => s.track.kind === 'video');
sender.transform = senderTransform;

const receiverTransform = new TransformStream({
  async transform(controller, frame) {
    try {
      const { data, timestamp } = frame;
      
      // 解析 nonce（与发送端逻辑一致）
      const nonce = buildNonce(frame.sequenceNumber, frame.ssrc);
      
      // 密文部分从第 12 字节开始
      const ciphertext = data.slice(12);
      const decrypted = await crypto.subtle.decrypt(
        { name: 'AES-GCM', iv: nonce, tagLength: 128 },
        decKey, ciphertext
      );
      
      const newData = new Uint8Array(data.byteLength);
      newData.set(data.slice(0, 12));
      newData.set(new Uint8Array(decrypted), 12);
      
      controller.enqueue(new RTCEncodedVideoFrame({
        ...frame,
        data: newData
      }));
    } catch (e) {
      // 解密失败通常意味着密钥不同步，触发密钥重协商
      controller.error(e);
      requestKeyRotation();
    }
  }
});

const receiver = pc.getReceivers().find(r => r.track.kind === 'video');
receiver.transform = receiverTransform;

// 使用 48 位计数器，约 281 万年溢出一次（30fps 下）
let frameCounter = 0n; // BigInt
function nextCounter() {
  return (frameCounter++).toString(16).padStart(12, '0');
}

if (!RTCRtpSender.prototype.transform) {
  // 降级方案：使用 WebAssembly 实现的 SFrame / libsrtp
  // 或提示用户升级浏览器
}

webrtc-e2ee-demo/
├── index.html          # 信令 + 视频渲染
├── src/
│   ├── crypto.js       # 密钥生成/派生/轮换
│   ├── transform.js    # 加解密 TransformStream 封装
│   └── signaling.js    # 简易 WebSocket 信令客户端
├── worker/
│   └── crypto-worker.js# 可选：离屏加解密
└── package.json

// audio-transform.js
class AudioPayloadTransformer {
  constructor(key, salt) {
    this.key = key;
    this.salt = salt;
    this.counter = 0n;
  }

  async transform(controller, frame) {
    // 1. 解析 RTP 头（固定 12B + CSRC）
    const headerLen = 12 + (frame.data[0] & 0x0f) * 4;
    const rtpHeader = frame.data.slice(0, headerLen);
    const payload = frame.data.slice(headerLen);

    // 2. 构造 Nonce（同视频逻辑）
    const nonce = this.buildNonce(frame.sequenceNumber, frame.ssrc);

    // 3. 仅加密 Payload
    const encrypted = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv: nonce, tagLength: 128 },
      this.key, payload
    );

    // 4. 重组：RTP 头原文 + 密文
    const out = new Uint8Array(headerLen + encrypted.byteLength);
    out.set(rtpHeader);
    out.set(new Uint8Array(encrypted), headerLen);

    controller.enqueue(new RTCEncodedAudioFrame({
      ...frame,
      data: out
    }));
  }
}

npm i @sframe/core  # 纯 TS 实现，无 WASM 依赖，体积 < 15KB gzip

// sframe-transform.js
import { SFrameEncryption, SFrameDecryption } from '@sframe/core';

class SFrameVideoTransformer {
  constructor(baseKey, keyId = 0n) {
    this.encryptor = new SFrameEncryption(baseKey, keyId);
    this.decryptor = new SFrameDecryption(baseKey);
    // 监听密钥轮换事件
    this.decryptor.on('key-required', (keyId) => this.requestKey(keyId));
  }

  // 发送端
  createSenderTransform() {
    return new TransformStream({
      transform: async (frame, controller) => {
        const ciphertext = await this.encryptor.encrypt(frame.data);
        controller.enqueue(new RTCEncodedVideoFrame({
          ...frame,
          data: ciphertext
        }));
      }
    });
  }

  // 接收端
  createReceiverTransform() {
    return new TransformStream({
      transform: async (frame, controller) => {
        try {
          const plaintext = await this.decryptor.decrypt(frame.data);
          controller.enqueue(new RTCEncodedVideoFrame({
            ...frame,
            data: plaintext
          }));
        } catch (e) {
          // 触发密钥同步
          controller.error(e);
        }
      }
    });
  }

  async rotateKey(newBaseKey, newKeyId) {
    await this.encryptor.setKey(newBaseKey, newKeyId);
    this.decryptor.addKey(newBaseKey, newKeyId);
  }
}

主线程                              Worker 线程
┌──────────────────┐   MessagePort   ┌──────────────────┐
│ RTCRtpSender     │ ◄─────────────► │ TransformStream  │
│ .transform       │  (帧传递)       │ + Crypto.subtle  │
└──────────────────┘                 └──────────────────┘
        │                                      │
        ▼                                      ▼
  视频渲染/采集                          纯计算、无 DOM

// main.js
const worker = new Worker('crypto-worker.js', { type: 'module' });

// 1. 创建配对流
const { readable: senderReadable, writable: senderWritable } = new TransformStream();
const { readable: receiverReadable, writable: receiverWritable } = new TransformStream();

// 2. 将流端口传给 Worker
worker.postMessage({
  type: 'init',
  senderWritable,
  receiverReadable
}, [senderWritable, receiverReadable]);

// 3. 挂载到 RTCRtpSender/Receiver
sender.transform = senderReadable;
receiver.transform = receiverReadable;

// crypto-worker.js
self.onmessage = async (e) => {
  if (e.data.type !== 'init') return;

  const { senderWritable, receiverReadable } = e.data;
  const key = await deriveKeyFromSignaling(); // Worker 内完成密钥派生

  // 发送加密管道
  const encryptStream = new TransformStream({
    async transform(frame, controller) {
      const encrypted = await encryptFrame(frame, key);
      controller.enqueue(encrypted);
    }
  });
  receiverReadable.pipeThrough(encryptStream).pipeTo(senderWritable);

  // 接收解密管道（对称）
  const decryptStream = new TransformStream({ ... });
  // 需要从主线程获取 receiverWritable，此处省略对称代码
};

// 发送端：生成并分发 Sender Key
const senderKey = crypto.getRandomValues(new Uint8Array(16));
const keyId = generateKeyId(); // 4 字节

// 通过已加密的数据通道逐个发给与会者
participants.forEach(p => {
  dataChannel.send(JSON.stringify({
    type: 'sender-key',
    mid: transceiver.mid,
    keyId,
    key: btoa(String.fromCharCode(...senderKey)) // 简化示例，实际应用用 HPKE 加密
  }));
});

// 本地加密使用该 Key
sender.transform = createSFrameTransform(senderKey, keyId);

# 使用 emscripten 编译 gmssl 的 sm4_gcm
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS='["_sm4_gcm_encrypt","_sm4_gcm_decrypt"]' 
     -s MODULARIZE=1 -o sm4.js gmssl/src/sm4_gcm.c

// sm4-worker.js
let sm4Module;
async function init() {
  sm4Module = await import('./sm4.js'); // ES Module 包装
  await sm4Module.ready;
}

async function sm4Encrypt(key, iv, aad, plaintext) {
  // 申请 WASM 内存、拷贝数据、调用 _sm4_gcm_encrypt、读回密文+Tag
  // 返回 Uint8Array (ciphertext || tag)
}

// test/sframe.transform.test.ts
it('密钥轮换不丢帧', async () => {
  const { sender, receiver } = setupPair();
  await sender.sendKeyFrame(); // 关键帧

  // 轮换密钥
  await sender.rotateKey(newKey, keyId + 1);
  
  // 连续发送 30 帧
  for (let i = 0; i < 30; i++) await sender.sendDeltaFrame();
  
  // 接收端解密全部成功
  const frames = await receiver.collect(31);
  expect(frames.every(f => f.decrypted)).toBe(true);
  expect(frames[0].keyId).toBe(keyId);
  expect(frames[1].keyId).toBe(keyId + 1);
});

jobs:
  e2ee-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node & Chrome
        uses: browser-actions/setup-chrome@latest
      - run: npm ci && npm run build
      - name: Unit Tests
        run: npm run test:unit
      - name: Integration Tests (Headless)
        run: xvfb-run -a npm run test:integration
      - name: Performance Benchmark
        run: npm run bench -- --threshold=encrypt<2ms
      - name: Security Audit
        run: npm audit --audit-level=high && npm run scan:wasm