general-assistant/build/AssistantAi/StreamWave/index.js

General Assistant components

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from 'react';
let myStrokeColor = '';
function getColorValue(color) {
    let _res = 'rgba(97, 92, 237, 0.5)';
    const ele = document.querySelector('.' + color);
    if (ele) {
        const computedStyle = window.getComputedStyle(ele);
        if (computedStyle) {
            _res = computedStyle.color;
            return _res;
        }
        return _res;
    }
    return _res;
}
const StreamWave = ({ stream, className, color }) => {
    myStrokeColor = getColorValue(color);
    useEffect(() => {
        myStrokeColor = getColorValue(color);
    }, [color]);
    let analyser = null;
    let canvas = null;
    let canvasCtx = null;
    let audioSteam = {
        current: null,
    };
    const methods = {
        handleCanvasAudioContext() {
            const audioContext = new AudioContext();
            const source = audioContext.createMediaStreamSource(stream);
            analyser = audioContext.createAnalyser();
            source.connect(analyser);
            canvas = document.getElementById('devDetectionMicroCanvas');
            canvasCtx = canvas.getContext('2d');
            methods.drawWaveform();
        },
        drawWaveform() {
            const stream = audioSteam.current;
            const dataArray = new Uint8Array(analyser.fftSize);
            analyser.getByteTimeDomainData(dataArray);
            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
            canvasCtx.lineWidth = 0;
            canvasCtx.strokeStyle = myStrokeColor;
            canvasCtx.beginPath();
            const sliceWidth = (canvas.width * 1.0) / analyser.fftSize;
            let x = 0;
            for (let i = 0; i < analyser.fftSize; i++) {
                const v = dataArray[i] / 128.0;
                const y = (v * canvas.height) / 2;
                if (i === 0) {
                    canvasCtx.moveTo(x, y);
                }
                else {
                    canvasCtx.lineTo(x, y);
                }
                x += sliceWidth;
            }
            canvasCtx.stroke();
            requestAnimationFrame(methods.drawWaveform);
        },
        handleStreamGetMicroName() {
            if (audioSteam.current) {
                const audioTrack = audioSteam.current.getAudioTracks()[0];
                console.log('当前采集设备名称', audioTrack.label);
            }
        },
    };
    useEffect(() => {
        methods.handleStreamGetMicroName();
        methods.handleCanvasAudioContext();
    }, []);
    return _jsx("canvas", { className: className, id: 'devDetectionMicroCanvas' });
};
export default StreamWave;