10.WebRTC implementiert die Funktion zur Aufzeichnung von Webseiten

I. Übersicht

Über WebRTC wird die Aufzeichnung auf der Seite implementiert und das Aufzeichnungsergebnis zur Wiedergabe in das WAV-Format konvertiert.

2. Durchführung der Aufnahme

1. Überprüfen Sie, ob eine Mikrofonberechtigung vorliegt

navigator.mediaDevices.enumerateDevices().then(function(devices) {
    
    
        // 检测视频输入
        let video = devices.find((device) => {
    
    
            return device.kind === 'videoinput'
        })
        // 检测音频输入
        let audio = devices.find((device) => {
    
    
            return device.kind === 'audioinput'
        })
        // getUserMedia的参数
        let mediaConstraints = {
    
    
            video: !!video,
            audio: !!audio
        }
        let constraints = {
    
     video: video && mediaConstraints.video, audio: audio && mediaConstraints.audio }
        return navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {
    
    
            stream = mediaStream // stream 记录音频流，在停止录音等时使用
            // 开始录音...
            beginRecord(mediaStream )
        })
    })

2. Rufen Sie die getUserMedia-Methode auf, rufen Sie den Audiostream ab und starten Sie die Aufnahme

// 录音
function beginRecord(mediaStream) {
    
    
    let audioContext = new (window.AudioContext || window.webkitAudioContext)
    let mediaNode = audioContext.createMediaStreamSource(mediaStream)
    // 创建一个jsNode
    let jsNode = createJSNode(audioContext)
    // 需要连接扬声器消费到outputBuffer, process回调才能出发，且不给outputBuffer设置内容扬声器不会播出声音
    jsNode.connect(audioContext.destination)
    jsNode.onaudioprocess = (audioProcessingEvent) => {
    
    
        let audioBuffer = audioProcessingEvent.inputBuffer
        let leftChannelData = audioBuffer.getChannelData(0) // 左声道
        let rightChannelData = audioBuffer.getChannelData(1) // 右声道
        // 将音频数据存入dataList
        dataList.left.push(leftChannelData.slice(0))
        dataList.right.push(rightChannelData.slice(0))
    }
    // 把mediaNode连接到jsNode
    mediaNode.connect(jsNode)
}

Nachdem die oben genannten Schritte abgeschlossen sind, beginnt die Aufnahme und die Audiodaten werden im dataListArray gespeichert.

Zu diesem Zeitpunkt sind die Aufnahmearbeiten tatsächlich abgeschlossen. Die folgende Arbeit besteht darin, die Aufnahmedaten in einem bestimmten Format (z. B. .mp3) zu speichern und zur Wiedergabe in das Audioelement der Seite einzufügen.

3. Stoppen Sie die Aufnahme

Das Stoppen der Aufzeichnung erfordert drei Aufgaben:

1. Daten zusammenführen
2. Erstellen Sie eine Datei in einem angegebenen Format
3. Aufnahmewiedergabe

Die allgemeine Methode zum Stoppen der Aufnahme ist:

function stopRecord() {
    
    
    let leftData = mergeArray(dataList.left)
    let rightData = mergeArray(dataList.right)
    let allData = intervalLeftAndRight(leftData, rightData) // 合并数据
    let wavBuffer = createWavFile(allData) // 创建指定格式的数据
    playRecord(wavBuffer) // 播放录音
    
}

Befolgen Sie die nachstehenden spezifischen Schritte, um dies zu erreichen.

1. Daten zusammenführen

// 交叉合并左右声道的数据
function intervalLeftAndRight(left, right) {
    
    
    let totalLength = left.length + right.length
    let data = new Float32Array(totalLength)
    for(let i = 0; i < left.length; i++) {
    
    
        let k = i * 2
        data[k] = left[i]
        data[k + 1] = right[i]
    }
    return data
}

function mergeArray(list) {
    
    
    let length = list.length * list[0].length
    let data = new Float32Array(length)
    let offset = 0
    for(let i = 0; i < list.length; i++) {
    
    
        data.set(list[i], offset)
        offset += list[i].length
    }
    return data
}

2. Erstellen Sie eine Datei in einem bestimmten Format. Dieser Code stammt vollständig aus dem Internet. Ich kann mich nicht an die genaue Quelladresse erinnern. .wavDatei hier erstellen

function createWavFile(audioData) {
    
    
    const WAV_HEAD_SIZE = 44
    let buffer = new ArrayBuffer(audioData.length * 2 + WAV_HEAD_SIZE)
    let view = new DataView(buffer)
    // 写入wav头部信息
    writeUTFBytes(view, 0, 'RIFF')
    view.setUint32(4, 44 + audioData.length * 2, true)
    writeUTFBytes(view, 8, 'WAVE')
    writeUTFBytes(view, 12, 'fmt ');
    view.setUint32(16, 16, true);
    view.setUint16(20, 1, true);
    view.setUint16(22, 2, true);
    view.setUint32(24, 44100, true);
    view.setUint32(28, 44100 * 2, true);
    view.setUint16(32, 2 * 2, true);
    view.setUint16(34, 16, true);
    writeUTFBytes(view, 36, 'data');
    view.setUint32(40, audioData.length * 2, true);

    // 写入wav头部，代码同上
    let length = audioData.length;
    let index = 44;
    let volume = 1;
    for (let i = 0; i < length; i++) {
    
    
        view.setInt16(index, audioData[i] * (0x7FFF * volume), true);
        index += 2;
    }
    return buffer;
}

function writeUTFBytes(view, offset, string) {
    
    
    var lng = string.length;
    for (var i = 0; i < lng; i++) {
    
     
        view.setUint8(offset + i, string.charCodeAt(i));
    }
}

3. Aufnahmewiedergabe

function playRecord(arrayBuffer) {
    
    
    let blob = new Blob([new Uint8Array(arrayBuffer)])
    let blobUrl = URL.createObjectURL(blob); // 创建BlobURL
    document.querySelector('.audio-node').src = blobUrl // 插入到页面的音频播放组件
}

4. Schalten Sie die Aufnahmefunktion aus

Beim Stoppen der Aufnahme muss die Aufnahmefunktion des Browsers manuell ausgeschaltet werden, andernfalls erscheint oben im Browser ein roter Aufnahmepunkt, wie unten gezeigt:

So schalten Sie die Aufnahmefunktion aus:

stream.getTracks().forEach(track => {
    
    
    if(track.readyState === 'live') {
    
    
        track.stop()
    }
})

Das Obige ist die Implementierung einer vollständigen webseitigen Aufzeichnungsfunktion.