mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-18 06:54:15 +00:00
remove _debug
This commit is contained in:
parent
9f29043e47
commit
08e3b32866
@ -1,92 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import Hls from "hls.js"
|
||||
|
||||
const exampleData = {
|
||||
video: "https://im-fa.manifest.tidal.com/1/manifests/CAESCTE5Njg2MTQ0NCIWd05QUkh1YTIyOGRXTUVUdmFxbThQdyIWZE05ZHNYTFNkTEhaODdmTUxQMDhGQSIWS0dfYTZubHUtcTUydVZMenRyOTJwQSIWLWU1NHRpanJlNzZhSjdMcXVoQ05idyIWenRCWnZEYmpia1hvNS14UUowWFl1USIWdFRHY20ycFNpVTktaHBtVDlzUlNvdyIWdVJDMlNqMFJQYWVMSnN6NWRhRXZtdyIWZnNYUWZpNk01LUdpeUV3dE9JNTZ2dygBMAJQAQ.m3u8?token=1738270941~MjEyMTc0MTk0NTlmNjdiY2RkNjljYzc0NzU1NGRmZDcxMGJhNDI2Mg==",
|
||||
audio: "https://sp-pr-fa.audio.tidal.com/mediatracks/CAEaKwgDEidmMmE5YjEyYTQ5ZTQ4YWFkZDdhOTY0YzBmZTdhZTY1ZV82MS5tcDQ/0.flac?token=1738270937~Y2ViYjZiNmYyZmVjN2JhNmYzN2ViMWEzOTcwNzQ3NDdkNzA5YzhhZg=="
|
||||
}
|
||||
|
||||
function AudioSyncApp() {
|
||||
const videoRef = useRef(null);
|
||||
const audioRef = useRef(null);
|
||||
const [worker, setWorker] = useState(null);
|
||||
const [startTime, setStartTime] = useState(null);
|
||||
const audioCtxRef = useRef(null);
|
||||
const hlsRef = useRef(null);
|
||||
|
||||
// Configurar HLS para el video
|
||||
useEffect(() => {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls({ enableWorker: false, xhrSetup: (xhr) => xhr.withCredentials = false });
|
||||
hlsRef.current = hls;
|
||||
hls.loadSource(exampleData.video);
|
||||
hls.attachMedia(videoRef.current);
|
||||
} else if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
|
||||
videoRef.current.src = exampleData.video;
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (hlsRef.current) hlsRef.current.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Inicializar Web Audio y Worker
|
||||
useEffect(() => {
|
||||
audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const newWorker = new Worker(new URL("./worker.js", import.meta.url));
|
||||
newWorker.onmessage = (event) => {
|
||||
setStartTime(event.data.offset);
|
||||
};
|
||||
setWorker(newWorker);
|
||||
|
||||
return () => newWorker.terminate();
|
||||
}, []);
|
||||
|
||||
// Manejar la sincronización
|
||||
const handleSync = async () => {
|
||||
try {
|
||||
// 1. Obtener buffers de audio
|
||||
const [videoBuffer, audioBuffer] = await Promise.all([
|
||||
fetch(exampleData.video, { mode: "cors" }).then(r => r.arrayBuffer()),
|
||||
fetch(exampleData.audio, { mode: "cors" }).then(r => r.arrayBuffer())
|
||||
]);
|
||||
|
||||
// 2. Decodificar
|
||||
const [videoAudio, songAudio] = await Promise.all([
|
||||
audioCtxRef.current.decodeAudioData(videoBuffer),
|
||||
audioCtxRef.current.decodeAudioData(audioBuffer)
|
||||
]);
|
||||
|
||||
// 3. Enviar al Worker
|
||||
worker.postMessage(
|
||||
{ videoBuffer: videoAudio, audioBuffer: songAudio },
|
||||
[videoAudio, songAudio]
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error de decodificación:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<video
|
||||
ref={videoRef}
|
||||
controls
|
||||
crossOrigin="anonymous"
|
||||
width="600"
|
||||
/>
|
||||
<audio
|
||||
ref={audioRef}
|
||||
controls
|
||||
crossOrigin="anonymous"
|
||||
src={exampleData.audio}
|
||||
/>
|
||||
<button onClick={handleSync}>Sincronizar</button>
|
||||
{startTime !== null && (
|
||||
<p>Offset de sincronización: {startTime.toFixed(2)} segundos</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AudioSyncApp;
|
||||
@ -1,70 +0,0 @@
|
||||
self.onmessage = async (event) => {
|
||||
const { videoBuffer, audioBuffer } = event.data;
|
||||
const SAMPLE_RATE = 44100;
|
||||
|
||||
// Extraer energía en rango de frecuencias
|
||||
const getEnergy = (buffer, freqRange) => {
|
||||
const offlineCtx = new OfflineAudioContext(1, buffer.length, SAMPLE_RATE);
|
||||
const source = offlineCtx.createBufferSource();
|
||||
source.buffer = buffer;
|
||||
|
||||
const analyser = offlineCtx.createAnalyser();
|
||||
analyser.fftSize = 4096;
|
||||
source.connect(analyser);
|
||||
analyser.connect(offlineCtx.destination);
|
||||
source.start();
|
||||
|
||||
return offlineCtx.startRendering().then(() => {
|
||||
const data = new Float32Array(analyser.frequencyBinCount);
|
||||
analyser.getFloatFrequencyData(data);
|
||||
|
||||
const startBin = Math.floor(freqRange[0] * analyser.fftSize / SAMPLE_RATE);
|
||||
const endBin = Math.floor(freqRange[1] * analyser.fftSize / SAMPLE_RATE);
|
||||
return data.slice(startBin, endBin);
|
||||
});
|
||||
};
|
||||
|
||||
// Cross-correlación optimizada
|
||||
const crossCorrelate = (videoFeatures, audioFeatures) => {
|
||||
let maxCorr = -Infinity;
|
||||
let bestOffset = 0;
|
||||
|
||||
for (let i = 0; i < videoFeatures.length - audioFeatures.length; i++) {
|
||||
let corr = 0;
|
||||
for (let j = 0; j < audioFeatures.length; j++) {
|
||||
corr += videoFeatures[i + j] * audioFeatures[j];
|
||||
}
|
||||
if (corr > maxCorr) {
|
||||
maxCorr = corr;
|
||||
bestOffset = i;
|
||||
}
|
||||
}
|
||||
return bestOffset;
|
||||
};
|
||||
|
||||
// Procesar características
|
||||
try {
|
||||
const [videoBass, audioBass] = await Promise.all([
|
||||
getEnergy(videoBuffer, [60, 250]), // Bajos
|
||||
getEnergy(audioBuffer, [60, 250])
|
||||
]);
|
||||
|
||||
const [videoVoice, audioVoice] = await Promise.all([
|
||||
getEnergy(videoBuffer, [300, 3400]), // Voces
|
||||
getEnergy(audioBuffer, [300, 3400])
|
||||
]);
|
||||
|
||||
// Combinar características (peso dinámico)
|
||||
const isElectronic = audioVoice.reduce((a, b) => a + b) < audioBass.reduce((a, b) => a + b);
|
||||
const weight = isElectronic ? 0.8 : 0.4;
|
||||
|
||||
const videoFeatures = videoBass.map((v, i) => weight * v + (1 - weight) * videoVoice[i]);
|
||||
const audioFeatures = audioBass.map((v, i) => weight * v + (1 - weight) * audioVoice[i]);
|
||||
|
||||
// Calcular offset
|
||||
const offset = crossCorrelate(videoFeatures, audioFeatures);
|
||||
self.postMessage({ offset: offset / SAMPLE_RATE });
|
||||
} catch (error) {
|
||||
self.postMessage({ error: "Error en el procesamiento" });
|
||||
}
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
import TrackManifest from "@cores/player/classes/TrackManifest"
|
||||
|
||||
const D_Manifest = () => {
|
||||
const [manifest, setManifest] = React.useState(null)
|
||||
|
||||
function selectLocalFile() {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = "audio/*"
|
||||
input.onchange = (e) => {
|
||||
loadManifest(e.target.files[0])
|
||||
}
|
||||
input.click()
|
||||
}
|
||||
|
||||
async function loadManifest(file) {
|
||||
let track = new TrackManifest({ file: file })
|
||||
|
||||
await track.initialize()
|
||||
|
||||
console.log(track)
|
||||
|
||||
setManifest(track)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-column gap-10">
|
||||
<p>Select a local file to view & create a track manifest</p>
|
||||
|
||||
<button onClick={selectLocalFile}>Select</button>
|
||||
|
||||
{manifest?.cover && (
|
||||
<img
|
||||
src={manifest.cover}
|
||||
alt="Cover"
|
||||
style={{ width: "100px", height: "100px" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<code style={{ whiteSpace: "break-spaces", width: "300px" }}>
|
||||
{JSON.stringify(manifest)}
|
||||
</code>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default D_Manifest
|
||||
@ -1,49 +0,0 @@
|
||||
import React from "react"
|
||||
|
||||
const defaultURL = "ws://localhost:19236"
|
||||
|
||||
function useLoquiWs() {
|
||||
const [socket, setSocket] = React.useState(null)
|
||||
|
||||
function create() {
|
||||
const s = new WebSocket(defaultURL)
|
||||
|
||||
s.addEventListener("open", (event) => {
|
||||
console.log("WebSocket connection opened")
|
||||
})
|
||||
|
||||
s.addEventListener("close", (event) => {
|
||||
console.log("WebSocket connection closed")
|
||||
})
|
||||
|
||||
s.addEventListener("error", (event) => {
|
||||
console.log("WebSocket error", event)
|
||||
})
|
||||
|
||||
s.addEventListener("message", (event) => {
|
||||
console.log("Message from server ", event.data)
|
||||
})
|
||||
|
||||
setSocket(s)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
create()
|
||||
|
||||
return () => {
|
||||
if (socket) {
|
||||
socket.close()
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return [socket]
|
||||
}
|
||||
|
||||
const Loqui = () => {
|
||||
const [socket] = useLoquiWs()
|
||||
|
||||
return <div>{defaultURL}</div>
|
||||
}
|
||||
|
||||
export default Loqui
|
||||
@ -1,46 +0,0 @@
|
||||
import React from "react"
|
||||
import { Progress } from "antd"
|
||||
import UploadButton from "@components/UploadButton"
|
||||
|
||||
const VideoSegmentedUpload = () => {
|
||||
const [result, setResult] = React.useState(null)
|
||||
const [progress, setProgress] = React.useState(null)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<UploadButton
|
||||
onSuccess={(id, response) => {
|
||||
setResult(response)
|
||||
}}
|
||||
onProgress={(id, progress) => {
|
||||
setProgress({
|
||||
id,
|
||||
progress,
|
||||
})
|
||||
}}
|
||||
accept={["video/*"]}
|
||||
headers={{
|
||||
transmux: "mq-hls",
|
||||
}}
|
||||
>
|
||||
Upload video
|
||||
</UploadButton>
|
||||
|
||||
{progress && (
|
||||
<div>
|
||||
<h2>Progress</h2>
|
||||
<Progress
|
||||
percent={progress.progress}
|
||||
status={
|
||||
progress.progress === 100 ? "success" : "active"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && <code>{JSON.stringify(result, null, 2)}</code>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoSegmentedUpload
|
||||
Loading…
x
Reference in New Issue
Block a user