130 linhas de código imitando o efeito especial "formiga ah ei" do vibrato popular, você aprendeu?

Enterprise 2021-03-18 16:08:36 views: null

[Nota do editor da CSDN] Recentemente, a IA muito popular mudou de cara. As etapas específicas deste artigo foram apresentadas. Venha e pegue.

Autor | Fenghua

Exibição | CSDN (ID: CSDNnews)

No ano passado, o software de videoconferência online surgiu como o principal canal de comunicação para trabalhar em casa. Recentemente, os efeitos especiais de "Ant Hey" em Douyin que podem fazer as fotos cantar com a boca aberta de repente se tornaram populares, então eu me perguntei se eu poderia mudar meu rosto durante uma videoconferência e animar a atmosfera.

Depois de pesquisar no GitHub, descobri que realmente há uma maneira. Há uma biblioteca de inteligência artificial Python de código aberto que muda de cara. Aproveitei a oportunidade para estudar o WebRTC front-end para realizar a função de videochamada, além da mudança de rosto Operação.

Vamos dar uma olhada no efeito primeiro:

Como há um pequeno back-end envolvido, o projeto é dividido em duas partes, uma é o projeto de front-end para armazenar o código de front-end e a outra é o projeto de back-end para armazenar o código de back-end:

项目根目录   |-- backend  |-- frontend
另外这个视频需要电脑上有摄像头，没有的话可以想办法把手机当作电脑的摄像头。
注意：本教程中的代码仅供展示 AI 换脸技术的应用，不可以用于获取其他人隐私或其他任何非法目的。

Escrever página

Por ser uma implementação front-end, a primeira coisa a fazer é escrever uma página. Esta página é relativamente simples. É um componente de vídeo, o texto que exibe a ID do usuário e a caixa de entrada e o botão para chamar o vídeo da outra parte. O componente de vídeo exibe seu próprio vídeo por padrão. Quando o vídeo é conectado, ele irá exibir o vídeo do outro participante e seu próprio vídeo será exibido. Diminua o zoom no canto superior direito.

HTML

Crie novos arquivos index.html, style.css e index.js no diretório frontend. Primeiro, olhe para a estrutura HTML, o código principal em index.html é o seguinte:

<!-- frontend/index.html --><head>  <!-- 其他代码 -->  <link rel="stylesheet" href="style.css" /></head><body>  <main>    <div id="container">      <div class="videos">        <video id="myVideo" class="videoSize" autoplay></video>        <video id="peerVideo" class="videoSize" autoplay></video>      </div>      <p id="idText"></p>      <div class="call">        <input type="text" id="peerIdInput" placeholder="请输入对方 id" />        <button id="joinBtn">视频通话</button>      </div>    </div>  </main>  <script src="index.js"></script></body>

A função de cada rótulo é:

  • <main /> Usado para definir o plano de fundo da página e alinhar todos os componentes no centro.

  • <div class="videos">No interior foram colocados o próprio vídeo #myVideo  e outros vídeos #peerVideoda <video />montagem, e está configurado para reproduzir automaticamente, a fim de iniciar a tela de reprodução imediatamente após carregar a câmera.

  • <p id="idText"> Exibe seu ID de usuário quando a página é aberta, o que equivale a um número de telefone.

  • <div class="call">Há uma caixa de texto para inserir a ID #peerIdInpute os botões de chamada um do outro #joinBtn.

  • Finalmente, <head />a introdução do estilo de arquivo style.css, a introdução de index.js antes do final do <body />. Vamos escrever principalmente o código em index.js.

CSS

O código CSS é relativamente simples, basicamente é definir o estilo, aqui está a parte importante, e o resto pode ser visualizado no código fonte. Como seu vídeo precisa ser movido para o canto superior direito quando o vídeo é conectado, você precisa <div class="videos">  definir o contêiner para ser relativamente posicionado, definir meu vídeo e o vídeo da outra parte com a mesma largura e altura e, em seguida, ocultar o vídeo da outra parte primeiro. Quando o vídeo é conectado Quando eu uso JavaScript para adicionar o estilo do meu vídeo após a conexão ser feita, defina meu vídeo para posicionamento absoluto, com largura e altura pequenas, e coloque-o no canto superior direito:

/* frontend/style.css */videos {  position: relative;}
.videoSize {  width: 500px;  height: 600px;  object-fit: cover;  /* 让视频按比例占满整个空间 */}
.rightTop {  /* 以下是通话中的样式 */  position: absolute;  width: 150px;  height: 180px;  right: 0;  top: 0;}
#peerVideo {  display: none;}

Outros componentes basicamente apenas definem o layout da grade, largura, altura, tamanho, sombra, fundo, fonte, nada de especial, você pode visualizar diretamente o código-fonte. Os ícones de estilo usados ​​no frontend/iconsdiretório.

Acessar câmera

A seguir, vamos nos familiarizar com o código de acesso à câmera. O principal navigator.mediaDevices.getUserMedia()método de acesso à câmera do usuário em JavaScript é receber um objeto como parâmetro para especificar o dispositivo a ser adquirido, como vídeo ou áudio, e retornar uma promessa. Depois que a promessa for concluída, ele nos passará um fluxo .. colocar no atributo <video />label srcObjectpode ser, não é muito simples? código mostrado abaixo:

// frontend/index.jsconst myVideo = document.getElementById("myVideo");
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => {  myVideo.srcObject = stream;});

Neste código:

  • Adquiriu #myVideoeste <video />componente.

  • Use navigator.mediaDevices.getUserMedia()e passe para ele um objeto, as propriedades de vídeo e áudio do objeto são definidas como verdadeiras, que você deseja acessar a câmera e o equipamento de áudio.

Neste momento, utilize o plug-in Live Server do VS Code para executar o projeto (se não, instale, é fácil), clique com o botão direito no arquivo index.html, selecione Abrir com Live Server, após abrir, o navegador pode avisar que este site precisa acessar a câmera e o equipamento de áudio, clique em Permitir, você pode ver seu próprio vídeo.

Escreva backend

Para implementar chamadas de vídeo, você precisa usar a tecnologia WebRTC. Os conceitos e APIs envolvidos nesta tecnologia são muito grandes e complexos, mas existem bibliotecas de código aberto para nos ajudar a simplificar a operação do WebRTC. Aqui usamos um chamado Peer.js ( Biblioteca https: // peerjs. com /), que encapsula a API bagunçada do WebRTC e fornece uma API completa, configurável e fácil de usar.

Iremos gerar IDs de usuário e gerenciar conexões WebRTC anexando Peer ao servidor Express.js. Primeiro execute no diretório de back-end:

npm init -y# 或yarn init -y
接着初始化一个 node.js 项目，使用 npm 或 yarn 安装 peer 和 express 依赖，因为想在改动代码时自动重启服务，我们也可以再安装一个 nodemon 依赖：

yarn add peer express nodemon# 或npm install --save peer express nodemon
安装完成之后新建一个 server.js 文件，整个后台服务我们就只需要这一个文件，都是一些简单的初始化代码，它里边的内容是：
const express = require("express");const { ExpressPeerServer } = require("peer");
const app = express();
const server = app.listen(3000);
const peerServer = ExpressPeerServer(server, {  debug: true,  path: "/",});
app.use("/video", peerServer);
这些代码的含义是：

  • Importe a biblioteca Express e importe ExpressPeerServer combinado com Express da biblioteca de mesmo nível.

  • Criando instância expressa appe 3000porta de escuta .

  • A montagem ExpressPeerServer para expressar, definir o debugmodelo de desenvolvimento é verdadeiro, é uma mensagem de erro melhor. O caminho é o diretório raiz.

  • ExpressPeerServer retornará um controlador expresso após a montagem.

  • O controlador retorna ao /videocaminho de montagem , esse /videocaminho é o principal, peer.jso caminho de comunicação WebRTC fornecido.

Em seguida, altere o arquivo package.json, adicione um scriptitem de configuração, dentro da definição do startcomando é nodemon server.js:

 "scripts": {    "start": "nodemon server.js"  },
这样使用 nodemon 运行 server.js 文件后，如果 server.js 中的内容发生变化，它会自动帮助我们重启服务器。

Agora corremos yarn startou npm startvemos o prompt da linha de comando [nodemon] starting node server.jsaté mesmo um início bem-sucedido, e o visitamos http://localhost:3000/video  , veja abaixo o resultado de saída ilustra o par também carrega com sucesso:

{"name":"PeerJS Server","description":"A server side element to broker connections between PeerJS clients.","website":"https://peerjs.com/"}

O código de back-end é escrito aqui. A próxima etapa é chamar APIs relacionadas a pares na página front-end e estabelecer uma chamada de vídeo.

Gerar ID do usuário

A biblioteca de front-end oficial Peer.js pode ser usada para chamar o serviço Peer de back-end no front-end, e o formulário cdn pode ser usado diretamente:

<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>

Você também pode abrir o URL no src acima, salvar o arquivo localmente ou baixá-lo no GitHub:

https://github.com/peers/peerjs/blob/master/dist/peerjs.min.js

Após a conclusão do download, coloque-o no frontend/peerdiretório, em index.html, a introdução de index.js acima, a introdução de peerjs:

<script src="peer/peerjs.min.js"></script>
<script src="index.js"></script>

Em seguida, abra o arquivo index.js e estabeleça uma conexão com o serviço de pares em segundo plano:

const peer = new Peer({
  host: "localhost",
  port: "3000",
  path: "/video",
});

Aqui, use diretamente o construtor Peer () exportado pela biblioteca de front-end peer.js. Ele recebe um objeto como parâmetro. Aqui, basta passar o host, a porta e o caminho do serviço de segundo plano, respectivamente. Ele retornará a instância do par , e vídeos relacionados com o acompanhamento. O funcionamento da chamada realiza-se principalmente através dele.

Depois de nos conectarmos com sucesso ao serviço de segundo plano, primeiro geramos um ID de usuário exclusivo para nós, que é equivalente a um número de telefone, então aqui podemos ouvir o evento de abertura do par e, quando a conexão for aberta, o ID de usuário gerado será retornado à função de retorno de chamada do manipulador de eventos e, em seguida, obteremos o html do #idTextelemento p para mostrar seu ID:

const idText = document.getElementById("idText");


peer.on("open", (id) => {
  idText.textContent = "我的 id 是：" + id;
});

Neste momento, abra index.html no Live Server, e você pode ver que o ID é exibido, semelhante a:

我的 id 是：2573c3ae-ba79-404a-b807-2128856ef3c9

Abra mais algumas páginas e você verá que o ID de cada pessoa é diferente.

Chamada de vídeo chamada

Depois de obter a ID do usuário, você pode ligar para a outra parte. A lógica aqui é que, após o usuário inserir a ID da outra parte na caixa de entrada, clique no botão de chamada de vídeo para fazer uma chamada. Em seguida, devemos obter o elemento do botão de videochamada primeiro, depois ouvir seu evento de clique e iniciar uma chamada interna:

const joinBtn = document.getElementById("joinBtn");
// 发起呼叫
joinBtn.addEventListener("click", () => {
  const peerId = peerIdInput.value;
  console.log("正在连接：" + peerId);


  navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => {
    const call = peer.call(peerId, stream);
    call.on("stream", showVideo);
  });
});

Quando o botão é clicado, a função de manipulação de eventos faz o seguinte:

  • Obtenha a ID da outra parte inserida pelo usuário.

  • Obtenha o fluxo de vídeo do usuário atual e peer.call()ligue para a outra parte. peer.call()O ID e o próprio fluxo de vídeo da outra parte são necessários como parâmetros e, em seguida, retorne a instância relacionada à chamada e salve-a na chamada.

  • Neste momento, o usuário atual começa a esperar pela resposta da outra parte.Para simplificar, não há estilo de espera aqui.

  • A próxima etapa é ouvir o evento de stream da chamada. Este evento será acionado após a resposta da outra parte. Ele retornará o stream de vídeo da outra parte como o parâmetro da função de processamento do evento e, em seguida, usamos o showVideo () função para processar o stream de vídeo da outra parte.

showVideo() O código da função é o seguinte:

const peerVideo = document.getElementById("peerVideo");


function showVideo(stream) {
  myVideo.classList.add("rightTop");
  peerVideo.srcObject = stream;
  peerVideo.style.display = "block";
}

Esta função serve simplesmente para mover seu vídeo para o canto superior direito, passar o estilo de classe .rightTop definido anteriormente e, em seguida, colocar o fluxo de vídeo da outra parte no componente de vídeo #peerVideo e, em seguida, exibi-lo (a configuração anterior é display: nenhum oculto). Agora, como está esperando a resposta da outra parte, é necessário que haja um processo de resposta.

Atenda a uma videochamada

O processamento da resposta deve monitorar o evento de chamada do par e, em seguida, atender a chamada por meio da instância relacionada à chamada no parâmetro do evento:

// 应答呼叫
peer.on("call", (call) => {
  navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => {
    call.answer(stream);
    call.on("stream", showVideo);
  });
});

Embora o código desta etapa esteja no mesmo arquivo, ele deve ser imaginado como a outra parte que está recebendo a videochamada. O código executa as seguintes operações:

  • Obtenha seu próprio stream de vídeo.

  • Chame a answer()função de atender chamadas de vídeo e streaming de vídeo de costas para o chamador. Aqui é para atender diretamente quando há uma chamada. Para simplificar, nenhum estilo e evento relacionado a clicar no botão de resposta é escrito.

  • Monitore o evento de stream , esta etapa é a mesma de antes, após este evento irá disparar uma resposta e, em seguida, usar a mesma showVideo()função para carregar o vídeo.

Ok, agora tente abrir duas páginas, insira o ID gerado pela outra página em uma das páginas, e a seguir clique na videochamada, você poderá ver os vídeos de ambas as partes sendo exibidos. Se você estiver usando a mesma câmera, as imagens exibidas são as mesmas.

Perceba a mudança de rosto

Perceber a mudança de rosto usa principalmente Avatarify, uma biblioteca de mudança de rosto de IA, que é escrita em Python e usa o algoritmo de modelo de movimento de primeira ordem para implementar a mudança de rosto. Aqui, só precisamos seguir as etapas para instalá-lo. Além disso, precisamos instalar o software da câmera virtual, que é usado para usar os dados de face alterada do Avatarify como o vídeo da câmera, e então acessar a câmera virtual na frente página.

Como o Avatarify executa cálculos em tempo real no vídeo da câmera, ele tem requisitos muito altos na placa de vídeo e só oferece suporte a placas de vídeo Nvidia habilitadas para CUDA para aceleração de GPU. As estatísticas oficiais são as seguintes:

  • GeForce GTX 1080 Ti: 33 帧 / s

  • GeForce GTX 1070: 15 quadros por segundo

  • GeForce GTX 950: 9 quadros por segundo

Se a configuração não estiver atualizada, você pode usar o Tencent Cloud ou a instância de GPU do Alibaba Cloud para transferir os cálculos relacionados aos gráficos para o servidor remoto, e você só precisa estabelecer um fluxo de vídeo localmente. Este artigo usará principalmente esse método.

Se a configuração atender aos requisitos, você também pode instalar e executar localmente, mas ainda não tentei. Basta postar o guia oficial de instalação (no Windows). Você pode tentar você mesmo.

Deve-se observar que, se o algoritmo for executado localmente, ele pode ser executado nos sistemas operacionais Windows e Linux ou o Docker também pode ser usado para implantação, mas apenas o Docker no sistema operacional Linux é compatível.

Compre servidor

Aqui está a instância da GPU Tencent Cloud como exemplo para apresentar a configuração do servidor. Em relação ao faturamento, usaremos o faturamento pré-pago. O custo total para concluir este tutorial pode ser de cerca de 30 yuans. Depois de usá-lo, lembre-se de fechar derrubá-lo ou destruí-lo. Pare de cobrar. Se estiver desligando, lembre-se de ajustar a largura de banda para 0 primeiro, interromper o faturamento da largura de banda e, em seguida, selecionar a opção de desligar sem cobrar ao desligar.

Em seguida, selecione a seguinte configuração no modelo de seleção:

  • Modo de faturamento: faturamento por volume.

  • Exemplo: Selecione o tipo de GPU e selecione o tipo de computação GPU GN7 na lista de modelos. Este é o mais barato, 7,16 yuan / hora.

  • Espelho: Escolha Ubuntu 64 bit 18.04, não escolha uma versão muito alta. O driver da placa gráfica pode ter suporte incompleto.

  • Verifique a instalação automática do driver GPU na parte superior e no fundo, selecione 10.0.130 para a versão CUDA e 7.4.2 para a versão cuDNN.

  • A medição real da largura de banda precisa começar em 20M, o que é cerca de 1 yuan / hora, mas a largura de banda pode ser menor quando o Avatarify é instalado e, em seguida, a largura de banda pode ser aumentada quando o vídeo for realmente ligado mais tarde.

  • Observe que a taxa do disco do sistema aqui é de 0,03 yuan / hora, que ainda será cobrada após o desligamento.

Na próxima etapa para configurar o host:

  • Crie um novo grupo de segurança.

  • O método de login usa uma senha aqui, você pode escolher defini-la sozinho ou pode ser gerado automaticamente.

Depois de confirmar o sucesso na próxima etapa, conclua a compra. Mais tarde, você pode ver a instância recém-adquirida na lista de instâncias do console. A máquina recém-adquirida pode precisar aguardar 5 minutos para concluir a configuração. Se quiser modificar a largura de banda, você pode encontrar a instância correspondente na lista e selecionar Mais -> Ajuste de recursos -> Ajustar largura de banda na barra de operação mais à direita para ajustar.

Como o Avatarify precisa usar as portas 5557 e 5558, precisamos permitir essas duas portas no grupo de segurança. Clique no hiperlink do nome da instância para entrar na página de detalhes da instância, selecione o grupo de segurança na guia superior, na guia da regra de entrada na visualização da regra à direita , clique em editar regra , na regra de entrada na nova página, clique em adicionar Regras , preencha a caixa de diálogo:

  • Tipo: personalizado.

  • Fonte: tudo.

  • Porta do protocolo: TCP: 5557, 5558

  • Estratégia: permitido.

Basta clicar em Concluir. Neste ponto, a configuração da instância está concluída. Preste atenção ao endereço IP público da instância. Você precisará dele ao fazer login com SSH posteriormente.

Implementar Avatarify

Usamos Docker para implantar o Avatarify. Faça login em nossa instância de GPU primeiro. Você pode fazer login diretamente no console da Tencent Cloud ou pode usar o comando ssh ou a ferramenta putty. Tomando ssh como exemplo, digite o seguinte comando:

ssh ubuntu@你的实例ip

Em seguida, digite a senha de acordo com os prompts. Na primeira vez que você fizer login, pode haver um grande prompt em inglês (se você confia no dispositivo), apenas digite sim e pressione Enter.

Instale o Docker

Instale o Docker primeiro depois de fazer login, você pode usar o script de instalação simples diretamente:

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

Se você não conseguir acessar este script, também podemos instalá-lo da maneira normal. Siga as etapas abaixo para copiar e colar o comando:

# 第一步
sudo apt-get update


# 第二步
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg  


# 第三步
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg


# 第四步
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Estas etapas configuram a fonte e a chave do repositório de instalação do Docker e, em seguida, execute os dois comandos a seguir para instalar o Docker:

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Após a conclusão da instalação, o dockercomando requer privilégios de administrador para ser executado, e você precisa inseri- sudolo todas as vezes . Se quiser omitir sudo, você pode adicionar o usuário atual (Tencent Cloud padroniza para ubuntu) ao grupo de usuários docker:

sudo usermod -aG docker ubuntu

Depois de sair do ssh e fazer login novamente para fazer a configuração entrar em vigor, podemos executar o seguinte comando para verificar se o Docker foi instalado com sucesso:

docker run hello-world

Se você imprimir as palavras hello world e um grande parágrafo em inglês, significa que você teve sucesso.

Instale Nvidia Docker Takeit

Para permitir que o docker use a GPU, você precisa instalar o Nvidia Docker takeit. Esta etapa também é muito simples. Primeiro, configure a fonte do repositório da Nvidia:

distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
   && curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add - \
   && curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee /etc/apt/sources.list.d/nvidia-docker.list

Em seguida, instale o takeit e reinicie o Docker:

sudo apt-get update
sudo apt-get install -y nvidia-docker2
sudo systemctl restart docker

Execute um recipiente de amostra para verificar se a instalação foi bem-sucedida:

sudo docker run --rm --gpus all nvidia/cuda:11.0-base nvidia-smi

Se você imprimir informações semelhantes às seguintes, será um sucesso:

Fri Mar  5 08:47:39 2021
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 418.126.02   Driver Version: 418.126.02   CUDA Version: 11.0     |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  Tesla T4            Off  | 00000000:00:08.0 Off |                    0 |
| N/A   26C    P8     9W /  70W |      0MiB / 15079MiB |      0%      Default |
+-------------------------------+----------------------+----------------------+


+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID   Type   Process name                             Usage      |
|=============================================================================|
|  No running processes found                                                 |
+-----------------------------------------------------------------------------+

Imagem Build Avatarify Docker

Escolha uma pasta e use o git para clonar o repositório Avatarify:

git clone https://github.com/alievk/avatarify.git

Entre no armazém clonado do avatarify e use o docker para construir a imagem:

cd avatarify
docker build -t avatarify .

A construção demora muito. Depois de esperar pacientemente pela conclusão, inicie o serviço:

bash run.sh --is-worker --docker

Visto que existem portas 5557 e 5558, significa que a inicialização foi bem-sucedida. Até agora, a configuração do servidor Avatarify está completa, e então o cliente é usado para chamar o serviço, e a parte do cálculo é entregue à nossa instância de GPU. Se você estiver preocupado com o faturamento neste momento, pode desligar a instância primeiro e, em seguida, reiniciar o cliente após instalar o cliente localmente.

As próximas etapas tomam como exemplo o MacOS. Para a versão do Windows, você pode pular diretamente para a seção de métodos de instalação do Windows abaixo.

Instale o cliente Avatarify

Em seu computador local, primeiro instale o Miniconda Python 3.8, que pode ser baixado aqui:

https://docs.conda.io/en/latest/miniconda.html#macosx-installers

Ou use o Homebrew:

brew install --cask miniconda

Clone o repositório avatarify e execute o script de instalação:

git clone https://github.com/alievk/avatarify.git
cd avatarify
bash scripts/install_mac.sh

Baixe o software da câmera virtual CamTwist (semelhante ao OBS, mas a câmera virtual do OBS não está acessível no Mac) e instale:

http://camtwiststudio.com/download

Inicie o cliente Avatarify

Certifique-se de que a instância remota da GPU foi iniciada e a imagem do docker avatarify está em execução para monitorar as portas 5557 e 5558 e, em seguida, no armazém do avatarify clonado localmente, execute o cliente mac:

./run_mac.sh --is-client --in-addr tcp://server_address:5557 --out-addr tcp://server_address:5558

Lembre-se de server_addressalterar os dois para o IP público da instância da GPU. O servidor pode precisar baixar alguns arquivos necessários, então a conexão ficará mais lenta.Depois de um tempo, Avatarify irá abrir automaticamente a janela da câmera.

Podemos ajustar a posição do rosto de acordo com as instruções. Aqui, é melhor colocarmos o rosto em um retângulo vermelho, com luz suficiente e não muito escuro. Você pode usar a tecla W / D para ampliar a imagem. Após o ajuste, pressione a tecla X para chamar e alterar.A janela de visualização do vídeo atrás do rosto é usada como a fonte de vídeo da câmera virtual.

Avatarify tem 9 fotos de rosto de amostra integradas, você pode pressionar as teclas 1-9 para alternar, você também pode personalizar as fotos de rosto e colocá-las avatarsna pasta em Avatarify .

Depois que o Avatarify for exibido com sucesso, abra a câmera virtual CamTwist, selecione Desktop + à esquerda, clique em selecionar na parte inferior e, em configurações à direita, marque Confinar na janela do aplicativo e selecione Selecionar nas janelas existentes na parte superior e inferior, na caixa suspensa Escolha python (avatarify), se você não conseguir encontrá-lo, você pode sair do CamTwist e reabri-lo ou clicar na caixa suspensa várias vezes para tentar. Agora a câmera virtual está pronta.

Método de instalação do Windows

O método de instalação no Windows é semelhante ao MacOS e, se a configuração da placa de vídeo for alta o suficiente, você pode omitir a etapa de compra de um servidor GPU remoto.

  1. Primeiro instale o Minicoda Python 3.8, que pode ser baixado aqui:

https://docs.conda.io/en/latest/miniconda.html#windows-installers

  1. Após a conclusão da instalação, abra o prompt de comando do Anaconda, clone o repositório avatarify e execute o script de instalação no sistema operacional Windows:

git clone https://github.com/alievk/avatarify.git
cd avatarify
scripts\install_windows.bat

  1. Se você deseja executar o algoritmo de mudança de face localmente, você precisa baixar os pesos da rede (228 MB):

https://openavatarify.s3.amazonaws.com/weights/vox-adv-cpk.pth.tar

ou

https://yadi.sk/d/M0FWpz2ExBfgAA

ou

https://drive.google.com/file/d/1coUCdyRXDbpWnEkA99NLNY60mb9dQ_n3/view?usp=sharing

  1. Após a conclusão do download, coloque-o no diretório raiz do avatarify, sem descompactar.

  2. Execute o cliente avatarify; se estiver em execução localmente, você pode usar:

./scripts/run_windows.bat

  1. Instâncias de GPU remotas também podem ser usadas em sistemas Windows. Use o seguinte método para iniciar o cliente:

./scripts/run_windows.bat --is-client --in-addr tcp://server_address:5557 --out-addr tcp://server_address:5558

  1. Os dois server_addressprecisam ser substituídos pelo IP público da instância remota da GPU.

  2. Depois que a inicialização for bem-sucedida, use o W / D para aumentar e diminuir o zoom como na operação do Mac e pressione a tecla X para acessar a janela de visualização do avatarify após a conclusão.

A câmera virtual no Windows pode usar OBS. A versão mais recente do OBS 26.1 e superior tem um plug-in de câmera virtual integrado, portanto, não há necessidade de instalá-lo separadamente.

  1. Baixe e instale o OBS:

https://obsproject.com/

  1. Após a conclusão da instalação, abra o OBS, adicione Windows Capture no painel Fonte no canto esquerdo inferior, defina a fonte de entrada de vídeo para uma janela de aplicativo e selecione [python.exe]: programa avatarify, clique em OK, você pode ajustar o seguinte tamanho.

  2. Em seguida, selecione VirtualCam no menu Ferramentas, selecione AutoStart, defina Buffered Frames como 0 e clique em Iniciar. (Se não houver VirtualCam no menu Ferramentas, verifique se há uma câmera virtual para iniciar próximo ao início da gravação no canto inferior direito da interface).

Agora a câmera virtual está pronta.

Perceba a mudança de rosto

A próxima etapa é usar a câmera virtual fornecida por CamTwist ou OBS em nosso projeto de front-end de videochamada. Precisamos saber o ID do dispositivo para especificar qual câmera usar.

Primeiro, use o Live Server para abrir o arquivo index.html do projeto front-end. No console do Google Developer Tools, use o seguinte código para imprimir as informações do dispositivo de vídeo:

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    if(device.kind === "videoinput") {
      console.log(device);
    }
  });
})

Este código é para acessar todos os dispositivos de mídia, em seguida, obter os dispositivos de vídeo entre eles e imprimi-los. A partir dos resultados de impressão, encontre o item cuja etiqueta contém CamTwist ou OBS (dependendo do sistema operacional) e registre o atributo deviceId.

No arquivo index.js, salve o valor deviceId em uma constante:

const cameraId =
  "982947417cf490bae44ffb6a837bddcb813704ee491dd85d9149c45389f5521b";

Ao usar a navigator.mediaDevices.getUserMedia()câmera get, além de definir o vídeo como verdadeiro, você também pode definir seu valor para um objeto para especificar mais informações. Nós o definimos separadamente e usamos cameraId para especificar qual câmera acessar.:

const mediaConstrains = {
  video: {
    deviceId: {
      exact: cameraId,
    },
  },
  audio: true,
};

exato é preciso, apenas a câmera com a ID especificada é usada e nenhuma outra alternativa é usada.

Então, na parte onde você obtém sua própria câmera, substitua-o pelo objeto acima. Ou para a conveniência do teste, você também pode substituir todos eles:

navigator.mediaDevices.getUserMedia(mediaConstrains).then(/* ... */)

Ok, agora tente a videochamada novamente. É uma mudança de rosto bem-sucedida?

Deve-se notar aqui que pode ser devido a um conflito entre o software CamTwist e a câmera real, e a página será atualizada de vez em quando. Não há solução melhor para isso, se você tiver energia, pode estudar isto.

Anexe o código-fonte deste artigo:

https://github.com/zxuqian/code-examples/tree/master/webrtc/video-call-change-face

Resumindo

As técnicas usadas neste tutorial são muito simples, mas a configuração é mais complicada. Este tutorial fornece as etapas básicas para alterar faces, e você pode continuar a melhorar o resto conforme necessário. O que o exemplo realiza é uma videochamada um para um, mas com base nisso, videoconferências com vários participantes também podem ser realizadas. Você só precisa ajustar o estilo de exibição do vídeo e, quando uma nova pessoa entrar, crie um correspondente <video />rotular e adicioná-lo Basta ir à lista de vídeos existente. Agora vamos revisar o processo:

  • Escreva a estrutura e o estilo da página HTML / CSS do front-end e tente carregar a câmera.

  • Escreva um aplicativo de plano de fundo simples, use epxress e peer para estabelecer uma base de chamada de vídeo baseada em WebRTC.

  • O front-end usa a biblioteca de front-end peer.js para chamar o back-end para gerar um ID de usuário e fazer chamadas e atender chamadas de vídeo.

  • Configure o programa de servidor de mudança de rosto Avatarify e use o serviço de GPU em nuvem para transferir as partes relevantes do cálculo da placa gráfica para a instância da GPU.

  • Instale o programa cliente Avatarify e o aplicativo de câmera virtual e exiba os dados após a mudança de rosto com a câmera virtual.

  • O front end obtém a ID da câmera virtual e a usa durante uma chamada de vídeo.

Se você for útil, por favor, curta e compartilhe. Se você tiver alguma dúvida, pode comentar e deixar uma mensagem. Obrigado pela leitura!

Autor: Fung Wah, Introdução: engenheiros front-end, forma intuitiva e profissional de compartilhar conhecimentos de programação. Bilibili UP @ 峰 华 Engenheiro de front-end



☞微信Mac版更新：在电脑上刷朋友圈；领英暂停中国境内新用户注册；Git 恶意仓库可以在克隆时执行远程代码 | 极客头条☞被“钱”困住的开源开发者们！
☞欧洲云计算巨头机房起火，数据中心成灰烬！Rust 游戏玩家：我白玩了
☞在内存只有24KB的电脑上写操作系统，是怎样的体验？

Acho que você gosta

Origin blog.csdn.net/csdnnews/article/details/114715011
Recomendado
Clasificación
Diario
Más
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)

Code World

© 2018 codetd.com