From 8392181eb6bcf862ca7bc853b64b078d247e57f4 Mon Sep 17 00:00:00 2001 From: Koper Date: Wed, 26 Jul 2023 15:52:16 +0700 Subject: [PATCH] Revert "Merge pull request #9 from Monadical-SAS/jose/vertical-waveform" This reverts commit 521777744f2dd4abf61a2231489534246030bddf, reversing changes made to 6e3fe756c56cb9a593f12d647a410a5c0f6a3dd7. --- www/app/components/CustomRecordPlugin.js | 77 ------------------------ www/app/components/record.js | 64 +++++++------------- www/app/page.js | 20 +++++- 3 files changed, 38 insertions(+), 123 deletions(-) diff --git a/www/app/components/CustomRecordPlugin.js b/www/app/components/CustomRecordPlugin.js index b6f4fd88..bbe21195 100644 --- a/www/app/components/CustomRecordPlugin.js +++ b/www/app/components/CustomRecordPlugin.js @@ -17,83 +17,6 @@ class CustomRecordPlugin extends RecordPlugin { static create(options) { return new CustomRecordPlugin(options || {}); } - render(stream) { - if (!this.wavesurfer) return () => undefined - - const container = this.wavesurfer.getWrapper() - const canvas = document.createElement('canvas') - canvas.width = container.clientWidth - canvas.height = container.clientHeight - canvas.style.zIndex = '10' - container.appendChild(canvas) - - const canvasCtx = canvas.getContext('2d') - const audioContext = new AudioContext() - const source = audioContext.createMediaStreamSource(stream) - const analyser = audioContext.createAnalyser() - analyser.fftSize = 2 ** 5 - source.connect(analyser) - const bufferLength = analyser.frequencyBinCount - const dataArray = new Uint8Array(bufferLength) - - let animationId, previousTimeStamp; - const BUFFER_SIZE = 2 ** 8 - const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height) - - const drawWaveform = (timeStamp) => { - if (!canvasCtx) return - - analyser.getByteTimeDomainData(dataArray) - canvasCtx.clearRect(0, 0, canvas.width, canvas.height) - canvasCtx.fillStyle = 'black' - - if (previousTimeStamp === undefined) { - previousTimeStamp = timeStamp - dataBuffer.push(Math.min(...dataArray)) - dataBuffer.splice(0, 1) - } - const elapsed = timeStamp - previousTimeStamp; - if (elapsed > 10) { - previousTimeStamp = timeStamp - dataBuffer.push(Math.min(...dataArray)) - dataBuffer.splice(0, 1) - } - - // Drawing - const sliceWidth = canvas.width / dataBuffer.length - let x = 0 - - for (let i = 0; i < dataBuffer.length; i++) { - const valueNormalized = dataBuffer[i] / canvas.height - const y = valueNormalized * canvas.height / 2 - const sliceHeight = canvas.height + 1 - y * 2 - - canvasCtx.fillRect(x, y, sliceWidth * 2 / 3, sliceHeight) - x += sliceWidth - } - - animationId = requestAnimationFrame(drawWaveform) - } - - drawWaveform() - - return () => { - if (animationId) { - cancelAnimationFrame(animationId) - } - - if (source) { - source.disconnect() - source.mediaStream.getTracks().forEach((track) => track.stop()) - } - - if (audioContext) { - audioContext.close() - } - - canvas?.remove() - } - } startRecording(stream) { this.preventInteraction(); this.cleanUp(); diff --git a/www/app/components/record.js b/www/app/components/record.js index 900851dd..70336e5d 100644 --- a/www/app/components/record.js +++ b/www/app/components/record.js @@ -7,47 +7,6 @@ import "react-dropdown/style.css"; import CustomRecordPlugin from "./CustomRecordPlugin"; -const queryAndPromptAudio = async () => { - const permissionStatus = await navigator.permissions.query({name: 'microphone'}) - if (permissionStatus.state == 'prompt') { - await navigator.mediaDevices.getUserMedia({ audio: true }) - } -} - -const AudioInputsDropdown = (props) => { - const [ddOptions, setDdOptions] = useState([]); - - useEffect(() => { - const init = async () => { - await queryAndPromptAudio() - - const devices = await navigator.mediaDevices.enumerateDevices() - const audioDevices = devices - .filter((d) => d.kind === "audioinput" && d.deviceId != "") - .map((d) => ({ value: d.deviceId, label: d.label })) - - if (audioDevices.length < 1) return console.log("no audio input devices") - - setDdOptions(audioDevices) - props.setDeviceId(audioDevices[0].value) - } - init() - }, []) - - const handleDropdownChange = (e) => { - props.setDeviceId(e.value); - }; - - return ( - - ) -} - export default function Recorder(props) { const waveformRef = useRef(); const [wavesurfer, setWavesurfer] = useState(null); @@ -55,10 +14,22 @@ export default function Recorder(props) { const [isRecording, setIsRecording] = useState(false); const [isPlaying, setIsPlaying] = useState(false); const [deviceId, setDeviceId] = useState(null); + const [ddOptions, setDdOptions] = useState([]); useEffect(() => { document.getElementById("play-btn").disabled = true; + navigator.mediaDevices.enumerateDevices().then((devices) => { + const audioDevices = devices + .filter((d) => d.kind === "audioinput") + .map((d) => ({ value: d.deviceId, label: d.label })); + + if (audioDevices.length < 1) return console.log("no audio input devices"); + + setDdOptions(audioDevices); + setDeviceId(audioDevices[0].value); + }); + if (waveformRef.current) { const _wavesurfer = WaveSurfer.create({ container: waveformRef.current, @@ -114,15 +85,22 @@ export default function Recorder(props) { wavesurfer?.playPause(); }; + const handleDropdownChange = (e) => { + setDeviceId(e.value); + }; + return (
- +   diff --git a/www/app/page.js b/www/app/page.js index 1fceaba8..1bea5b81 100644 --- a/www/app/page.js +++ b/www/app/page.js @@ -6,11 +6,23 @@ import useWebRTC from "./components/webrtc.js"; import "../public/button.css"; const App = () => { + const [isRecording, setIsRecording] = useState(false); const [stream, setStream] = useState(null); - // This is where you'd send the stream and receive the data from the server. - // transcription, summary, etc - const serverData = useWebRTC(stream, () => {}); + const handleRecord = (recording) => { + setIsRecording(recording); + + if (recording) { + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then(setStream) + .catch((err) => console.error(err)); + } else if (!recording && serverData.peer) { + serverData.peer.send(JSON.stringify({ cmd: "STOP" })); + } + }; + + const serverData = useWebRTC(stream, setIsRecording); return (
@@ -21,6 +33,8 @@ const App = () => { handleRecord(recording)} transcriptionText={serverData.text ?? "..."} finalSummary={serverData.finalSummary} topics={serverData.topics ?? []}