Certa vez, assisti a um filme , e o momento ficou gravado em minha memória, quando um dos personagens principais do filme, com tato, levanta a perna e o braço ao ritmo da melodia. Então: não apenas o herói é digno de nota, mas o conjunto de monitores atrás dele.
Recentemente, como muitos outros, a quantidade de tempo gasto em quatro paredes aumentou bastante, e surgiu a idéia: "E qual é a maneira mais estranha de realizar uma cena dessas?"
Olhando para o futuro, direi que a escolha recaiu no uso de um navegador da Web, o WebRTC e a API WebAudio.
Então pensei e depois fui imediatamente as opções, desde simples (pegue o rádio e encontre um player que tenha essa visualização) até longas (crie um aplicativo cliente-servidor que envie informações sobre a cor pelo soquete). E então me peguei pensando: "agora o navegador tem todos os componentes necessários para a implementação", então tentarei fazê-lo.
O WebRTC é uma maneira de transferir dados de navegador para navegador (ponto a ponto), o que significa que não precisarei criar um servidor, a princípio pensei. Mas ele estava um pouco errado. Para criar RTCPeerConnection, você precisa de dois servidores: sinal e ICE. No segundo, você pode usar uma solução pronta (os servidores STUN ou TURN estão nos repositórios de muitas distribuições Linux). Algo precisa ser feito com o primeiro.
A documentação diz que um protocolo de interação bidirecional arbitrário pode atuar como um sinal e, em seguida, imediatamente WebSockets, Long pooling ou fazer algo diferente. Parece-me que a opção mais fácil é tirar o olá mundo da documentação de alguma biblioteca. E aqui está um servidor de sinal tão simples:
import os
from aiohttp import web, WSMsgType
routes = web.RouteTableDef()
routes.static("/def", os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static') )
@routes.post('/broadcast')
async def word(request):
for conn in list(ws_client_connections):
data = await request.text()
await conn.send_str(data)
return web.Response(text="Hello, world")
ws_client_connections = set()
async def websocket_handler(request):
ws = web.WebSocketResponse(autoping=True)
await ws.prepare(request)
ws_client_connections.add(ws)
async for msg in ws:
if msg.type == WSMsgType.TEXT:
if msg.data == 'close':
await ws.close()
else:
continue
elif msg.type == WSMsgType.ERROR:
print('conn lost')
return ws
if __name__ == '__main__':
app = web.Application()
app.add_routes(routes)
app.router.add_get('/ws', websocket_handler)
web.run_app(app)
Eu nem implementei o processamento de mensagens WebSockets do cliente, mas simplesmente criei um ponto de extremidade POST, que envia a mensagem a todos. A abordagem para copiar da documentação é do meu agrado.
Além disso, para estabelecer a conexão WebRTC entre navegadores, ocorre um oi-oi descomplicado e você pode - e eu posso. O diagrama é muito claramente visível:
(Gráfico retirado da página )
Primeiro, você precisa criar a própria conexão:
function openConnection() {
const servers = { iceServers: [
{
urls: [`turn:${window.location.hostname}`],
username: 'rtc',
credential: 'demo'
},
{
urls: [`stun:${window.location.hostname}`]
}
]};
let localConnection = new RTCPeerConnection(servers);
console.log('Created local peer connection object localConnection');
dataChannelSend.placeholder = '';
localConnection.ondatachannel = receiveChannelCallback;
localConnection.ontrack = e => {
consumeRemoteStream(localConnection, e);
}
let sendChannel = localConnection.createDataChannel('sendDataChannel');
console.log('Created send data channel');
sendChannel.onopen = onSendChannelStateChange;
sendChannel.onclose = onSendChannelStateChange;
return localConnection;
}
, , . createDataChannel() , , addTrack() .
function createConnection() {
if(!iAmHost){
alert('became host')
return 0;
}
for (let listener of streamListeners){
streamListenersConnections[listener] = openConnection()
streamListenersConnections[listener].onicecandidate = e => {
onIceCandidate(streamListenersConnections[listener], e, listener);
};
audioStreamDestination.stream.getTracks().forEach(track => {
streamListenersConnections[listener].addTrack(track.clone())
})
streamListenersConnections[listener].createOffer().then((offer) =>
gotDescription1(offer, listener),
onCreateSessionDescriptionError
).then( () => {
startButton.disabled = true;
closeButton.disabled = false;
});
}
}
WebAudio API. , , , .
function createAudioBufferFromFile(){
let fileToProcess = new FileReader();
fileToProcess.readAsArrayBuffer(selectedFile.files[0]);
fileToProcess.onload = () => {
let audioCont = new AudioContext();
audioCont.decodeAudioData(fileToProcess.result).then(res => {
let source = audioCont.createBufferSource()
audioSource = source;
source.buffer = res;
let dest = audioCont.createMediaStreamDestination()
source.connect(dest)
audioStreamDestination =dest;
source.loop = false;
iAmHost = true;
});
}
}
, , mp3 . AudioContext, MediaStream. , , addTrack() WebRTC .
, createOffer() . , , :
function acceptDescription2(desc, broadcaster) {
return localConnection.setRemoteDescription(desc)
.then( () => {
return localConnection.createAnswer();
})
.then(answ => {
return localConnection.setLocalDescription(answ);
}).then(() => {
postData(JSON.stringify({type: "accept", user:username.value, to:broadcaster, descr:localConnection.currentLocalDescription}));
})
}
IceCandiates:
function finalizeCandidate(val, listener) {
console.log('accepting connection')
const a = new RTCSessionDescription(val);
streamListenersConnections[listener].setRemoteDescription(a).then(() => {
dataChannelSend.disabled = false;
dataChannelSend.focus();
sendButton.disabled = false;
processIceCandiates(listener)
});
}
:
let conn = localConnection? localConnection: streamListenersConnections[data.user]
conn.addIceCandidate(data.candidate).then( onAddIceCandidateSuccess, onAddIceCandidateError);
processIceCandiates(data.user)
addIceCandidate() .
, .
/( ).
function consumeRemoteStream(localConnection, event) {
console.log('consume remote stream')
const styles = {
position: 'absolute',
height: '100%',
width: '100%',
top: '0px',
left: '0px',
'z-index': 1000
};
Object.keys(styles).map(i => {
canvas.style[i] = styles[i];
})
let audioCont = new AudioContext();
audioContext = audioCont;
let stream = new MediaStream();
stream.addTrack(event.track)
let source = audioCont.createMediaStreamSource(stream)
let analyser = audioCont.createAnalyser();
analyser.smoothingTimeConstant = 0;
analyser.fftSize = 2048;
source.connect(analyser);
audioAnalizer = analyser;
audioSource = source;
analyser.connect(audioCont.destination)
render()
}
, . AudioContext , AudioNode.
, createAnalyser() .
:
function render(){
var freq = new Uint8Array(audioAnalizer.frequencyBinCount);
audioAnalizer.getByteFrequencyData(freq);
let band = freq.slice(
Math.floor(freqFrom.value/audioContext.sampleRate*2*freq.length),
Math.floor(freqTo.value/audioContext.sampleRate*2*freq.length));
let avg = band.reduce((a,b) => a+b,0)/band.length;
context.fillStyle = `rgb(
${Math.floor(255 - avg)},
0,
${Math.floor(avg)})`;
context.fillRect(0,0,200,200);
requestAnimationFrame(render.bind(gl));
}
De todo o espectro, destaca-se uma banda que será representada por um único navegador e, em média, a amplitude é obtida. Em seguida, basta fazer a cor entre vermelho e azul, dependendo da mesma amplitude. Desenhe a tela.
Algo assim se parece com o resultado do uso do fruto da imaginação: