DEV Community: Juliano Sirtori

Capturar, gravar e enviar um áudio no navegador

Juliano Sirtori — Sun, 03 Mar 2024 14:15:45 +0000

Atualmente, estou desenvolvendo uma POC para validar o desenvolvimento de um sistema que consiste em interagir com a inteligência artificial, algo semelhante a este site.

Neste artigo, demonstrarei como implementei a captura do microfone e utilizei a classe MediaRecorder para armazenar o áudio e enviá-lo para uma requisição RESTful na POC que estou desenvolvendo.

Capturando áudio pelo microfone

Primeiro, precisamos verificar se o navegador possui suporte ao microfone. Podemos fazer isso usando a seguinte condição:

if (navigator.mediaDevices.getUserMedia) {
    // possuui acesso
} else {
    // não possuui acesso
}

Em seguida, vamos utilizar o método getUserMedia, passando como parâmetro a solicitação de entrada de áudio. Ao chamar essa função, será solicitada permissão ao navegador para capturar apenas o áudio do computador. Caso o usuário recuse, será lançado um erro. Se for aceito, será enviado um objeto MediaStream. Nosso código ficará desta maneira:

if (!navigator.mediaDevices.getUserMedia) {
    // não possuui acesso
    return;
}

navigator.mediaDevices.getUserMedia({ audio: true }).then(
    (stream) => {
        //Usuário deu permissão
    },
    (err) => {
        //Usuário não deu permissão
        console.error("The following error occured: " + err);
    }
);

Armazenando o áudio no `MediaRecorder`

Assim que conseguimos permissão para capturar o áudio do navegador e recebermos o MediaStream, vamos utilizar o MediaRecorder para armazenar o nosso stream de dados.

Conforme a documentação do MDN, essa interface nos fornece alguns métodos. Para o nosso exemplo, vamos utilizar apenas 3: start, stop e requestData. Podemos implementar um botão para chamar esses métodos. Para obter mais detalhes sobre o MediaRecorder, você pode consultar diretamente a documentação: MediaStream Recording API. O nosso código vai ficar assim:

if (!navigator.mediaDevices.getUserMedia) {
    // não possuui acesso
    return;
}

navigator.mediaDevices.getUserMedia({ audio: true }).then(
    (stream) => {
        //Usuário deu permissão
        const mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = async (e) => {
            // aqui será chamado a nossa request
        }

        const micButton = document.querySelector(".mic-button");
        micButton.onclick = async () => {
            const pressed = micButton.getAttribute("aria-pressed") === "true";
            micButton.setAttribute("aria-pressed", !pressed);

            if (!pressed) {
                mediaRecorder.start();
                return;
            }
            mediaRecorder.stop();
        }

    },
    (err) => {
        //Usuário não deu permissão
        console.error("The following error occured: " + err);
    }
);

Enviando áudio para uma API

Agora, falta apenas enviar esse áudio por meio de uma requisição. Para fazer isso, vamos criar um arquivo blob e enviá-lo através de um POST em FormData. Finalizando assim o nosso código:

if (!navigator.mediaDevices.getUserMedia) {
    // não possuui acesso
    return;
}

navigator.mediaDevices.getUserMedia({ audio: true }).then(
    (stream) => {
        //Usuário deu permissão
        const mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = async (e) => {
            const blob = new Blob([e.data], { type: "audio/mp3" });
            const formData = new FormData();
            formData.append("audio", blob, "recording.mp3");
            const response = await fetch("http://localhost:3001/transcribe", {
                method: "POST",
                body: formData,
            });
            // resto da implementação...
        }

        const micButton = document.querySelector(".mic-button");
        micButton.onclick = async () => {
            const pressed = micButton.getAttribute("aria-pressed") === "true";
            micButton.setAttribute("aria-pressed", !pressed);

            if (!pressed) {
                mediaRecorder.start();
                return;
            }
            mediaRecorder.stop();
        }

    },
    (err) => {
        //Usuário não deu permissão
        console.error("The following error occurred: " + err);
    }
);

Conclusão

Demonstramos acima como capturar, gravar e enviar um áudio. Você pode visualizar o código completo neste link: poc-talk-ai. Em caso de dúvidas ou sugestões, sinta-se à vontade para deixá-las nos comentários abaixo.

Até mais e obrigado pelos peixes.

Criando workflows de CI/CD no github

Juliano Sirtori — Tue, 30 Jan 2024 16:45:47 +0000

Processos automatizados nos ajudam a entregar software com qualidade e agilidade, e um desses processos é o CI/CD. Neste texto, pretendo detalhar como implementei esse processo no meu portfólio.

Problemas

Anteriormente, eu tinha integrado o repositório diretamente com a Vercel. No entanto, enfrentei alguns problemas:

O deploy era realizado sempre que a branch era atualizada, mesmo quando os testes falhavam.
Não tinha muito controle sobre quando o deploy era realizado, pois sempre ocorria quando a branch main era atualizada.

PS: Talvez houvesse algumas configurações na Vercel que pudessem corrigir esses pontos. No entanto, optei por implementar o CI/CD para explorar essa funcionalidade no GitHub e também como objeto de estudo.

Solução

Para solucionar esses problemas, acabei criando dois fluxos de trabalho no GitHub:

CI (Continuous Integration): Nesta etapa, serão executados builds de testes e linters para verificar a integridade e qualidade do projeto. A ideia aqui é receber um feedback rápido sobre as modificações enviadas para a branch principal, evitando possíveis falhas.
CD (Continuous Delivery): Esta etapa estende a CI e tem a responsabilidade de implementar o software em diferentes ambientes. O objetivo é garantir que o software esteja pronto para ser implementado rapidamente.

A seguir, vou detalhar a implementação de cada um. Para saber mais sobre como implementar fluxos de trabalho no GitHub, você pode consultar diretamente a documentação.

CI

No CI, acabo executando 2 jobs em paralelo:

Lint e Unit Tests: Executa o lint no projeto e falha se encontrar alguma inconsistência. Também executa os testes unitários.
Lighthouse: Executa o Lighthouse em diferentes browsers e falha se a pontuação for baixa.

Futuramente, pretendo adicionar testes de integração também.

O trigger para esse fluxo de trabalho é acionado a cada pull request enviada para a branch main ou sempre que a branch main é atualizada.

Você pode verificar o código desse fluxo de trabalho aqui.

CD

Para implementar o fluxo de trabalho de CD, tive um pouco de dificuldade, pois desejava que esse fluxo fosse executado somente após o CI ser concluído com sucesso. Após algumas buscas na internet, acabei implementando da seguinte forma:

Adicionei um trigger que é executado sempre que o CI é executado na branch main.

on:
  workflow_run:
    workflows: ["CI"]
    branches: [main]
    types: 
      - completed

Dentro do job, adicionei uma condição que verifica se o fluxo de trabalho do CI foi concluído com sucesso.

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:

No step de deploy utilizei o Vercel CLI para fazer o deploy na deploy, segue o exemplo:

    steps:
    - uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Você pode verificar o código completo desse fluxo de trabalho aqui.

Futuramente pretendo criar workflows de deploy para ambientes de preview e de produção.

Conclusão

Como mencionado anteriormente, a implementação de workflows no GitHub proporciona um maior controle sobre nossos processos de CI/CD. Dessa maneira, podemos configurá-los de forma a otimizar sua eficácia e atender às nossas necessidades de maneira mais eficiente.

Recriando o styled-components

Juliano Sirtori — Thu, 18 Jan 2024 17:18:39 +0000

Depois de ter escrito o último artigo e entender como funciona tagged templates, fiquei curioso para entender como funciona o styled-components, que utiliza essa mesma abordagem nas funções styled e css.

Acabei mergulhando no código-fonte do styled-components para entender como ele funciona e, para fixar o que aprendi, acabei tentando reescrever o styled-components. Neste artigo, vou mostrar como desenvolvi uma "cópia" do styled-components em menos de 100 linhas de código (com bem menos funcionalidades rsrs).

O que é styled-components?

Caso você já saiba o que é styled-components vc pode pular essa parte.

Styled Components é uma biblioteca "CSS-in-JS", ou seja, ela permite escrever CSS dentro do JavaScript, transformando nossos estilos em componentes React. Segue um exemplo abaixo:

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`

Essa variável Button é um componente React que podemos utilizar da seguinte maneira: <Button>Salvar</Button>. O styled-components também permite que passemos parâmetros, dessa forma, o estilo pode mudar de acordo com nossas variáveis, tudo isso em tempo de execução, sem precisar escrever múltiplas classes, tornando nosso CSS muito mais enxuto.

const Button = styled.button`
  color: ${({disabled}) => disabled ? #000 : #fff};
  background: ${({disabled}) => disabled ? #f0f0f0 : #BF4F74};
  margin: 0 1em;
  padding: 0.25em 1em;
`

Desta forma, podemos chamar o nosso componente passando a propriedade disabled, ficando assim <Button disabled={true}>Salvar</Button>.

Para ter mais exemplos e saber mais sobre styled-components, você pode acessar diretamente a documentação.

Como implementei?

Agora que já sabemos o que é styled-components e aprendemos como usá-lo, vou mostrar como eu o implementei:

import { createElement } from "react";
import { compile, serialize, stringify } from "stylis";
import { phash, hash } from "../utils/hash";
import generateAlphabeticName from "../utils/generateAlphabeticName";

function makeStyleTag() {
  let styleTag = document.querySelector("#styled-components");
  if (!styleTag) {
    const head = document.head;
    styleTag = document.createElement("style");
    styleTag.setAttribute("type", "text/css");
    styleTag.setAttribute("id", "styled-components");
    head.appendChild(styleTag);
  }
  return styleTag;
}

function createClassName(domElement) {
  return generateAlphabeticName(phash(hash(1234), domElement));
}

function injectStyle(className, styles) {
  const styleTag = makeStyleTag();
  const rule = serialize(compile(`.${className}{${styles}}`), stringify);
  const node = document.createTextNode(rule);
  styleTag.appendChild(node);
}

function interpolateStyle(strs, props, exprs) {
  return exprs.reduce((result, expr, index) => {
    const isFunc = typeof expr === "function";
    const value = isFunc ? expr(props) : expr;
    return result + value + strs[index + 1];
  }, strs[0]);
}

const styledBase =
  (domElement) =>
  (strs, ...exprs) => {
    const Element = (props) => {
      const className = createClassName(domElement);
      const styles = interpolateStyle(strs, props, exprs);
      injectStyle(className, styles);
      return createElement(domElement, { className }, props.children);
    };
    return Element;
  };

const domElements = ["button", "div", "a", "h1", "h2", "p"];
const styled = {};
domElements.forEach((dom) => {
  styled[dom] = styledBase(dom);
});

export const styled;

Você pode conferir o código completo por meio deste link: styled.js.

O styled-components cria um identificador para o componente, gera uma classe com base nesse nome, processa os estilos e os injeta dentro de uma tag style. Você pode conferir mais detalhes aqui. O algoritmo acima basicamente segue esses mesmos passos.

Na linha 41, geramos nossa classe com base no nosso elemento DOM e a salvamos em uma constante chamada de className. Para gerar essa classe, primeiro geramos um hash baseado no algoritmo djb2 e, em seguida, geramos um nome alfabético. Basicamente, essas duas funções (hash e generateAlphabeticName) foram copiadas diretamente da biblioteca do styled-components.

O segundo passo é interpolar os estilos de CSS, executando as funções que temos no meio dos nossos estilos, na linha 42. Para isso, temos que percorrer todas as nossas expressões, verificando se nossa expressão é realmente uma função. Caso seja, a chamamos e concatenamos o resultado em nossa string de estilos.

Em seguida, injetamos nossos estilos com nossa classe gerada dentro de uma tag style, na linha 43. Nessa etapa, como podemos ver na linha 23, buscamos nossa tag style, ou a criamos caso ela não exista, na linha 7. Após isso, processamos nossos estilos utilizando a biblioteca stylis, na linha 24, que é a mesma biblioteca que o styled-components utiliza. Por fim, injetamos nossos estilos processados dentro da tag style, na linha 26.

E finalmente criamos nosso component React através do React.createElement, passando o nome da classe que foi criada, linha 44.

Conclução

Esse código acima mostra, de forma bem resumida, como o styled-components funciona. Na verdade, ele possui muitas outras funcionalidades, como o compartilhamento de temas através do Context API. Ele também fornece algumas APIs, como a função css, entre outras coisas.

No entanto, é interessante aprofundarmos nosso entendimento sobre como as bibliotecas funcionam por baixo dos panos. Isso nos ajuda a desmistificar a biblioteca e nos fornece insights para futuros projetos.

Deixando claro que o código acima foi criado em um fim de semana por curiosidade. Se nos aprofundarmos, existem várias melhorias a serem feitas, mas ele tem caráter apenas didático.

Refs:

Nos bastidores, como o javascript funciona

Juliano Sirtori — Sat, 06 May 2023 20:04:36 +0000

O JavaScript é uma linguagem de programação que pode ser bastante confusa para quem está começando, principalmente quando se trata de callbacks e promises. Vejamos um exemplo de código abaixo:

function printHelloWorld() {
  console.log("Hello World");
}

function sayHi() {
  console.log("Hi!");
}

function blockFor7000ms() {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("end for");
}

setTimeout(printHelloWorld, 0);

blockFor7000ms();

new Promise((resolve) => {
  sayHi();
  resolve();
});

Se executarmos esse código, teremos essa resposta no console:

> end for
> Hi!
> Hello World

Por que o end for foi executado primeiro, mesmo que ele tenha demorado 7000ms? O setTimeout não deveria ter sido executado primeiro? E por que a Promise também foi executada antes do setTimeout?

Para responder a essas perguntas, primeiro temos que entender alguns princípios básicos do JavaScript.

Event Loop e Call Stack

O Call Stack e o Event Loop são dois dos principais mecanismos que trabalham juntos para gerenciar a execução de código em JavaScript. O Call Stack é uma estrutura de dados que rastreia a execução das funções no código. Quando uma função é chamada, ela é adicionada ao topo do Call Stack. Quando a função é concluída, ela é removida do Call Stack e o controle é devolvido para a função que a chamou.

O Event Loop, por outro lado, é responsável por gerenciar a fila de eventos. Eventos, como interações do usuário ou respostas de rede, são adicionados à fila de eventos. O Event Loop monitora constantemente a fila de eventos e, quando o Call Stack está vazio, o próximo evento da fila é retirado e processado.

Quando o JavaScript executa um trecho de código, ele é adicionado ao Call Stack. Se o código contém operações síncronas que exigem tempo de processamento, o Call Stack pode ser bloqueado até que as operações sejam concluídas. No entanto, se o código contém operações assíncronas, como uma chamada de API ou manipulação de eventos do usuário, essas operações são adicionadas à fila de eventos em vez de serem executadas imediatamente.

Quando uma operação assíncrona é concluída, ela é adicionada à fila de tarefas, juntamente com outras operações assíncronas que foram concluídas. O Event Loop monitora a fila de tarefas, dando prioridade às micro-tarefas em relação às macro-tarefas. As micro-tarefas são executadas antes das macro-tarefas, mesmo que tenham sido adicionadas posteriormente.

Depurando nosso codigo

Sabendo disso, vamos depurar nosso código para compreender melhor esses conceitos.

1. Até a linha 13, o JavaScript apenas salvou em memória nossas funções. Na linha 14, ele adicionará no topo do nosso call stack a função do setTimeout. O setTimeout faz parte das features do browser, logo, ele será executado pelo browser após o tempo que foi passado como parâmetro. Como foi passado 0 segundos, ele é executado imediatamente. O browser envia a nossa função printHelloWorld para o Callback Queue (macro tarefas), que ficará aguardando até que não haja mais nada no call stack.

2. Em seguida, a função blockFor7000ms() é adicionada ao call stack. Esta função consiste em um loop for que itera um grande número de vezes. Isso levará um tempo significativo para ser concluído e, enquanto isso, o restante do código não será executado, bloqueando o nosso call stack. E a nossa função printHelloWorld continuará no Callback Queue aguardando para ser executada. Se olharmos para o console nesse ponto, ele acabará de imprimir o nosso end for quando a função blockFor7000ms() finalizar.

> end for

3. Finalizando o blockFor7000ms, ele adicionará a nossa Promise para o call stack. Ao executar a nossa Promise, ele enviará a função sayHi() para a fila de micro-tarefas.

4. Depois disso, o nosso programa entra em um estado de espera, aguardando que o call stack fique vazio. Isso acontece porque a execução da Promise é assíncrona e não bloqueia o call stack.

5. Agora, o event loop verificará que não tem mais nada no call stack. Ele verificará primeiro na fila de micro-tarefas. Nessa fila, ele encontrará a função sayHi() e a passará para o call stack. No Call stack, a função sayHi() será executada e irá imprimir o nosso console.log. Se olharmos no console, ficará assim:

> end for
> Hi!

6. Nesse ponto, o nosso call stack ficará vazio novamente, e o nosso event loop verificará primeiro a nossa fila de micro-tarefas. Como não teremos nada, ele verificará as nossas macro-tarefas. Nas macro-tarefas, ele encontrará o nosso printHelloWorld e o passará para o call stack, executando-o e imprimindo o console.log. Por fim, nosso console ficará assim:

> end for
> Hi!
> Hello World

Conclusão

Em um primeiro momento javascript pode ser bastante obscuro e confuso, mas isso se deve a forma como ele funciona, se entendermos a teoria veremos q ele é bastante simples e poderoso.

Ref:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Using_promises#composi%C3%A7%C3%A3o

DEV Community: Juliano Sirtori

Capturar, gravar e enviar um áudio no navegador

Capturando áudio pelo microfone

Armazenando o áudio no MediaRecorder

Enviando áudio para uma API

Conclusão

Criando workflows de CI/CD no github

Problemas

Solução

CI

CD

Conclusão

Recriando o styled-components

O que é styled-components?

Caso você já saiba o que é styled-components vc pode pular essa parte.

Como implementei?

Conclução

Refs:

Nos bastidores, como o javascript funciona

Event Loop e Call Stack

Depurando nosso codigo

Conclusão

Ref:

Armazenando o áudio no `MediaRecorder`