WebRTC Insertable Stream 的介绍及其端到端加密案例

const stream = new ReadableStream({
        start(controller) {

        },
        pull(controller) {

        },
        cancel() {

        },
        type,
        autoAllocateChunkSize
    }, 
    {
        highWaterMark,
        size()
    }
);

const stream = new WritableStream({
        start(controller) {

        },
        write(chunk,controller) {

        },
        close(controller) {

        },
        abort(reason) {

        }
    }, 
    {
        highWaterMark,
        size()
    }
);

// New dictionary
dictionary RTCInsertableStreams {
    ReadableStream readable;
    WritableStream writable;
};

typedef (SFrameTransform or RTCRtpScriptTransform) RTCRtpTransform;

// New methods for RTCRtpSender and RTCRtpReceiver
partial interface RTCRtpSender {
    attribute RTCRtpTransform? transform;
};

partial interface RTCRtpReceiver {
    attribute RTCRtpTransform? transform;
};

enum SFrameTransformRole {
    "encrypt",
    "decrypt"
};

dictionary SFrameTransformOptions {
    SFrameTransformRole role = "encrypt";
};

typedef [EnforceRange] unsigned long long SmallCryptoKeyID;
typedef (SmallCryptoKeyID or bigint) CryptoKeyID;

[Exposed=(Window,DedicatedWorker)]
interface SFrameTransform {
    constructor(optional SFrameTransformOptions options = {});
    Promise<undefined> setEncryptionKey(CryptoKey key, optional CryptoKeyID keyID);
    attribute EventHandler onerror;
};
SFrameTransform includes GenericTransformStream;

enum SFrameTransformErrorEventType {
    "authentication",
    "keyID",
    "syntax"
};

[Exposed=(Window,DedicatedWorker)]
interface SFrameTransformErrorEvent : Event {
    constructor(DOMString type, SFrameTransformErrorEventInit eventInitDict);

    readonly attribute SFrameTransformErrorEventType errorType;
    readonly attribute CryptoKeyID? keyID;
    readonly attribute any frame;
};

dictionary SFrameTransformErrorEventInit : EventInit {
    required SFrameTransformErrorEventType errorType;
    required any frame;
    CryptoKeyID? keyID;
};

// 定义视频帧的类型，最终会由 WebCodecs 标准来定义
enum RTCEncodedVideoFrameType {
    "empty",
    "key",
    "delta",
};

dictionary RTCEncodedVideoFrameMetadata {
    long long frameId;
    sequence<long long> dependencies;
    unsigned short width;
    unsigned short height;
    long spatialIndex;
    long temporalIndex;
    long synchronizationSource;
    sequence<long> contributingSources;
};

//定义编码过的 video 和 audio 帧. 最终会由 WebCodecs 标准来定义.
[Exposed=(Window,DedicatedWorker)]
interface RTCEncodedVideoFrame {
    readonly attribute RTCEncodedVideoFrameType type;
    readonly attribute unsigned long long timestamp;
    attribute ArrayBuffer data;
    RTCEncodedVideoFrameMetadata getMetadata();
};

//音频帧的元数据，包含RTP中定义的 SSRC, CSRC
dictionary RTCEncodedAudioFrameMetadata {
    long synchronizationSource;
    sequence<long> contributingSources;
};

[Exposed=(Window,DedicatedWorker)]
interface RTCEncodedAudioFrame {
    readonly attribute unsigned long long timestamp;
    attribute ArrayBuffer data;
    RTCEncodedAudioFrameMetadata getMetadata();
};


// 定义 JavaScript-based transforms.

[Exposed=DedicatedWorker]
interface RTCTransformEvent : Event {
    readonly attribute RTCRtpScriptTransformer transformer;
};

partial interface DedicatedWorkerGlobalScope {
    attribute EventHandler onrtctransform;
};

[Exposed=DedicatedWorker]
interface RTCRtpScriptTransformer {
    readonly attribute ReadableStream readable;
    readonly attribute WritableStream writable;
    readonly attribute any options;
};

[Exposed=Window]
interface RTCRtpScriptTransform {
    constructor(Worker worker, optional any options, optional sequence<object> transfer);
};

localStream(video1) --> 加密 --> peerConnection --> 解密 --> video2(remoteStream)
                                    |
                                    v
                                videoMonitor(未解密的)   

    readableStream --> writableStream

    readableStream --> senderTransformStream -> writableStream

const sender = pc1.addTrack(stream.getVideoTracks()[0], stream);
const senderStreams = sender.createEncodedVideoStreams() :
const senderTransformStream = new TransformStream({
    transform: (chunk, controller) {
        //这里可以做加密
        console.log(chunk, chunk.data.byteLength);
        controller.enqueue(chunk);
    }
});

senderStreams.readableStream
    .pipeThrough(senderTransformStream)
    .pipeTo(senderStreams.writableStream);

const worker = new Worker('./js/worker.js', {name: 'E2EE worker'});
function setupSenderTransform(sender) {
    const senderStreams = sender.createEncodedStreams();

    const {readable, writable} = senderStreams;
    worker.postMessage({
            operation: 'encode',
            readable,
            writable,
        }, [readable, writable]);
    }

    function setupReceiverTransform(receiver) {
        const receiverStreams = receiver.createEncodedStreams();
        const {readable, writable} = receiverStreams;
        worker.postMessage({
            operation: 'decode',
            readable,
            writable,
        }, [readable, writable]);
    }
}

onmessage = async (event) => {
const {operation} = event.data;
if (operation === 'encode') {
    const {readable, writable} = event.data;
    const transformStream = new TransformStream({
        transform: encodeFunction,
    });
    //处理管道经由 transformStream 的 encodeFunction 做 encode
    readable
        .pipeThrough(transformStream)
        .pipeTo(writable);
} else if (operation === 'decode') {
    const {readable, writable} = event.data;
    const transformStream = new TransformStream({
        transform: decodeFunction,
    });
    //处理管道经由 transformStream 的 decodeFunction 做 decode
    readable
        .pipeThrough(transformStream)
        .pipeTo(writable);

} else if (operation === 'setCryptoKey') {
    if (event.data.currentCryptoKey !== currentCryptoKey) {
    currentKeyIdentifier++;
    }
    currentCryptoKey = event.data.currentCryptoKey;
    useCryptoOffset = event.data.useCryptoOffset;
}
};

function encodeFunction(encodedFrame, controller) {
    if (scount++ < 30) { // dump the first 30 packets.
        dump(encodedFrame, 'send');
    }
    if (currentCryptoKey) {
        const view = new DataView(encodedFrame.data);
        // Any length that is needed can be used for the new buffer.
        const newData = new ArrayBuffer(encodedFrame.data.byteLength + 5);
        const newView = new DataView(newData);

        const cryptoOffset = useCryptoOffset? frameTypeToCryptoOffset[encodedFrame.type] : 0;
        for (let i = 0; i < cryptoOffset && i < encodedFrame.data.byteLength; ++i) {
            newView.setInt8(i, view.getInt8(i));
        }
        // This is a bitwise xor of the key with the payload. This is not strong encryption, just a demo.
        for (let i = cryptoOffset; i < encodedFrame.data.byteLength; ++i) {
            const keyByte = currentCryptoKey.charCodeAt(i % currentCryptoKey.length);
            newView.setInt8(i, view.getInt8(i) ^ keyByte);
        }
        // Append keyIdentifier.
        newView.setUint8(encodedFrame.data.byteLength, currentKeyIdentifier % 0xff);
        // Append checksum
        newView.setUint32(encodedFrame.data.byteLength + 1, 0xDEADBEEF);

        encodedFrame.data = newData;
    }
    controller.enqueue(encodedFrame);
}

function decodeFunction(encodedFrame, controller) {
    if (rcount++ < 30) { // dump the first 30 packets
        dump(encodedFrame, 'recv');
    }
    const view = new DataView(encodedFrame.data);
    const checksum = encodedFrame.data.byteLength > 4 ? view.getUint32(encodedFrame.data.byteLength - 4) : false;
    if (currentCryptoKey) {
        if (checksum !== 0xDEADBEEF) {
            console.log('Corrupted frame received, checksum ' + checksum.toString(16));
            return; // 这可能是加密 key 设定了，但是收到了未加密的视频帧
        }
        const keyIdentifier = view.getUint8(encodedFrame.data.byteLength - 5);
        if (keyIdentifier !== currentKeyIdentifier) {
            // 这是加密 key 和解密的 key 不一致
            console.log(`Key identifier mismatch, got ${keyIdentifier} expected ${currentKeyIdentifier}.`);
            return;
        }

        const newData = new ArrayBuffer(encodedFrame.data.byteLength - 5);
        const newView = new DataView(newData);
        const cryptoOffset = useCryptoOffset? frameTypeToCryptoOffset[encodedFrame.type] : 0;

        for (let i = 0; i < cryptoOffset; ++i) {
            newView.setInt8(i, view.getInt8(i));
        }
        for (let i = cryptoOffset; i < encodedFrame.data.byteLength - 5; ++i) {
            const keyByte = currentCryptoKey.charCodeAt(i % currentCryptoKey.length);
            newView.setInt8(i, view.getInt8(i) ^ keyByte);
        }
        encodedFrame.data = newData;
    } else if (checksum === 0xDEADBEEF) {
        return; // encrypted in-flight frame but we already forgot about the key.
    }
    controller.enqueue(encodedFrame);
}