índice
1. Ligue a câmera e o microfone
2. Adicionar botão de controle de transmissão
4. Salve a foto de visualização
5. Mostrar efeito de textura (capa)
6. Efeitos de visualização de vídeo (efeitos múltiplos)
6.2 Efeito tridimensional suspenso
6.3 Efeito de microdermoabrasão
Prefácio
O artigo de hoje apresenta um reprodutor de visualização de vídeo muito simples baseado no terminal de captura WebRTC.
texto
O que precisamos fazer é o player de pré-visualização local, então primeiro devemos abrir a câmera, em seguida, exibir os botões de controle do player e, finalmente, adicionar algumas funções auxiliares, como tirar fotos, salvar fotos, adesivos, efeitos de vídeo, etc. A seguir, vamos dar uma olhada na operação de um determinado link em detalhes. Para garantir o efeito de demonstração, é recomendado que os pequenos parceiros tentem usar o navegador Chrome.
1. Ligue a câmera e o microfone
Para abrir a câmera, você pode usar o método getUserMedia de uma das três principais interfaces WebRTC para alcançar. Para obter detalhes, você pode consultar o seguinte código:
let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator,{
video:true
},function(localMediaStream){
let video =document.getElementById('video1');
video.srcObject = localMediaStream;
},function(e) {
console.log("error: ",e);
});Em circunstâncias normais, o navegador Chrome irá exibir uma caixa de solicitação de autorização no canto superior esquerdo, vamos escolher, neste momento, escolhemos "permitir".
Após a autorização, o navegador abre nossa câmera, neste momento veremos a tela de visualização do vídeo local, conforme mostrado na figura a seguir:
Obviamente, também podemos definir "audio = true" para solicitar a ativação de nosso microfone local ao chamar o método getUserMedia.
2. Adicionar botão de controle de transmissão
Depois de ligar a câmera, podemos visualizar nosso vídeo local, mas como operamos nossa câmera e alto-falantes? Se quisermos controlar nossa câmera e alto-falantes, precisamos definir outra configuração de propriedade da tag de vídeo: o parâmetro de controles. O uso específico pode se referir ao seguinte código:
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>Após a configuração, iniciamos o player novamente e descobriremos que a tela de visualização do vídeo tem mais botões de controle do player, conforme mostrado na figura a seguir:
Por meio desses botões de controle, podemos operar a reprodução e a pausa da tela de vídeo local, alternar o alto-falante, iniciar e cancelar a tela inteira e abrir a função picture-in-picture.
3. Visualização local e foto
Para realizar a função de câmera local, adicionamos um botão "fotografia", que é usado para capturar o quadro de vídeo atual, e adicionamos uma janela de exibição de imagem estática abaixo da janela de visualização de vídeo, conforme mostrado na figura abaixo. Nota: a parte superior é a atividade A janela de vídeo de, abaixo é a janela que mostra o efeito da foto.
O tamanho da tela da câmera também é definido como 400 px de largura e 300 px de altura. A referência do código-chave é a seguinte:
let photo = document.querySelector("canvas#photo");
photo.width = 400;
photo.height = 300;
let video =document.getElementById('video1');
photo.getContext("2d").drawImage(video, 0, 0, photo.width, photo.height);4. Salve a foto de visualização
Para facilitar a observação, ajustamos a posição de exibição da tela do vídeo e das fotos e as organizamos horizontalmente Nota: O lado esquerdo é a janela ativa do vídeo e o lado direito é a janela da foto. Adicione um botão para salvar fotos, o código-chave é o seguinte:
let canvas = document.querySelector("canvas");
let a = document.createElement("a");
a.download = "photo";
a.href = canvas.toDataURL("image/jpeg");
document.body.appendChild(a);
a.click();
a.remove();
Clique no botão "Salvar" e descobriremos que a foto foi baixada para o local. Encontre o caminho de salvamento da imagem, abra a imagem, o efeito de exibição é como mostrado na figura abaixo:
Isso significa que as fotos salvas não são problema, perfeito.
5. Mostrar efeito de textura (capa)
Em seguida, adicionamos um efeito de textura na tela de visualização do vídeo, que é a capa da legenda, como operamos? Aqui, podemos usar outro poster de atributo da tag de vídeo para obter esse efeito. Colocamos a imagem temática 1024.jpg preparada com antecedência no diretório designado e usamos o pôster para citá-la.
A referência do código específico é a seguinte:
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline poster="1024.jpg"></video>O efeito da textura é mostrado na figura abaixo:
6. Efeitos de visualização de vídeo (efeitos múltiplos)
A fim de aumentar o contraste entre os efeitos de vídeo e o vídeo original, adicionamos uma janela de visualização do player ao lado da janela do vídeo original, a esquerda é a janela do vídeo original e a direita é a janela do vídeo de efeitos especiais. O efeito de exibição de efeitos especiais é obtido principalmente por meio do filtro -webkit-filter. Os efeitos especiais específicos são os seguintes:
6.1 Efeito de exposição
6.2 Efeito tridimensional suspenso
6.3 Efeito de microdermoabrasão
6.4 Efeito de cor invertida
(Vamos fazer um GIF, caso contrário, sempre acho que estou lidando com imagens estáticas)
Em conclusão
Bem, aqui concluímos basicamente o player de pré-visualização de vídeo local mencionado no início. É muito simples e muito deslumbrante? Ok, é tarde demais, vamos parar por aqui hoje, é 1 hora da manhã e ainda estou correndo para este artigo. Vou postar o endereço do código-fonte na área de comentários mais tarde. Como um projeto de demonstração, os alunos interessados podem fazer você mesmo. Boa noite, à 1h do dia 24 de outubro de 2020. * Feliz Dia do Programador *