React 360 – Como adicionar um vídeo 360º no fundo da aplicação, e acionar uma função ao ser finalizado. · rubensflinco

Olá pessoal, tudo bem? (comente aí sobre como está sua semana)
Aqui quem os escreve é o Rubens Flinco ! 🙂

Hoje vou te ensinar a como adicionar um vídeo em 360º no fundo da sua aplicação React 360.

Achei super interessante falar desse tema, pois para min foi um tremendo terror achar na documentação oficial como fazia essa simples tarefa por dois motivos o primeiro é que foi ultra complicado achar um exemplo de como fazia isso em código, segundo quando achei o código de exemplo e as explicações sobre ele estava errada, por que ao testar esse código exemplo causava erro na aplicação.

Sobre o erro de digito que está na documentação eu envie uma solicitação no Github do React 360 para arrumar, porem ela ainda não foi aprovada.

Como adicionar o vídeo 360º no fundo?

O primeiro é fazer a importação do "VideoModule", "Environment" e "staticResourceURL", segue o exemplo de como fazer isso:

import {Environment, VideoModule, staticResourceURL} from 'react-360';

Também é muito importante criar uma variável com o seu player, pois é com essa variável que você vai conseguir dar play, definir o caminho do arquivo e dar stop no seu vídeo, para isso você faz dessa maneira:

const player = VideoModule.createPlayer('myplayer');

É importante notar que o nome da variável e o "myplayer" podem ser renomeados de acordo com sua necessidade ou vontade.

Agora para você definir o conteúdo que será reproduzido você deve chamar a variável player de executar a função "play" segue o exemplo:

player.play({
  source: {url: staticResourceURL('path/to/video.mp4')},
  stereo: '3DTB',
});

source -- Usando a função "staticResourceURL" o React irá pegar o caminho a partir da sua pasta de arquivos estatísticos que normalmente é "public", forneça o caminho para o aquivo de vídeo.
stereo -- Opcional, forneça o formato do vídeo por padrão deixe em 3DTB que seria modo de áudio sendo MONO ou STEREO nesse caso está como MONO que é como se fosse um 3D.

Importante saber que a função "play" não irá apenas setar o caminho do arquivo de vídeo, mas também fará com que o vídeo comece a ser reproduzido imediadamente.

E finalmente chegamos a parte de colocar esse vídeo para ser mostrado na tela do usuário e nesse exemplo irei mostrar como colocamos ele para ser exibido no fundo da aplicação em 360º, lembrando é claro que o vídeo deve ser gravado já em 360º caso contrario ele ficará todo distorcido e só ficará bonito caso você exiba ele em um retângulo 2D flutuante ensino a fazer isso nos passos a baixo.

Bom sem delongas para exibir seu vídeo player basta colocar essa linha de código depois das demais mostradas acima:

Environment.setBackgroundVideo('myplayer');

Note que onde está escrito "myplayer" deve ser o nome escolhido por você do seu player caso tenha mudado como falei acima na hora da criação da variável e do seu player de vídeo.

Bom e apos essa linha seu vídeo já deve exibir na tela do usuário e funcionar normalmente 🙂

Afins de simplificar o seu código final desse exemplo ficará parecido com isso:

import {Environment, VideoModule, staticResourceURL} from 'react-360';

const player = VideoModule.createPlayer('myplayer');

player.play({
  source: {url: staticResourceURL('path/to/video.mp4')},
  stereo: '3DTB',
});

Environment.setBackgroundVideo('myplayer');

Mas se eu não querer que o vídeo fique no fundo, e sim em um retângulo 2D flutuante?

Bom caso queira exibir um vídeo que não é em 360º você tem a opção de criar uma superfície que irá flutuar no seu mundo virtual e nesse superfície 2D poderá reproduzir seu vídeo normal, para isso basta substituir a função "setBackgroundVideo" para a "setScreen" e passar os novos parâmetros necessários dessa função ficaria algo assim:

Environment.setScreen(
  'default', /* Nome do ecrã */
  'myplayer', /* ID único do player de vídeo */
  'default', /* Nome de superfície */
  0, 0, 600, 400 /* Posição relativa na superfície */
/* 0, 0, w, h   */
);

Dessa forma seu codigo final ficaria parecido com esse:

import {Environment, VideoModule, staticResourceURL} from 'react-360';

const player = VideoModule.createPlayer('myplayer');

player.play({
  source: {url: staticResourceURL('path/to/video.mp4')},
  stereo: '3DTB',
});

Environment.setScreen(
  'default', /* Nome do ecrã */
  'myplayer', /* ID único do player de vídeo */
  'default', /* Nome de superfície */
  0, 0, 600, 400 /* Posição relativa na superfície */
/* 0, 0, w, h   */
);

Quais as outras funções que posso executar com a minha variável do player de vídeo?

Bom são varias como a de pausar a reprodução, ajustar volume, etc...
Segue a lista de todas elas:

play(options: VideoOptions)-- inicia a reprodução do vídeo.
pause() -- interromper a reprodução do vídeo, mantendo sua localização
resume() -- retomar o vídeo pausado
seek(position: number) -- buscar uma posição específica no tempo, fornecida em ms
setMuted(muted: boolean) -- determina se o vídeo está silenciado ou não
setVolume(volume: number) -- define o volume do vídeo, em uma escala de 0 a 1
destroy() -- desmontar o vídeo e limpar seus recursos
addEventListener(event: string, listener: VideoEventListener) -- adicionar um ouvinte para ouvir os eventos do player de vídeo, ele retornará uma assinatura para cancelar o registro
removeSubscription(subscription: EmitterSubscription) -- remover um ouvinte de evento usando a assinatura

Acho importante listar aqui também os parâmetros que podem ser enviado a função "play" que é uma das mais importantes dessa lista:

play(options: VideoOptions)-- inicia a reprodução do vídeo. O objeto de opções pode ter as seguintes chaves:
- source -- A fonte de vídeo.
- startPosition: o vídeo buscará esta posição quando começar a jogar
- autoPlay: se o vídeo começará a ser reproduzido após carregado. Caso contrário, você pode ligar resumepara reproduzir o vídeo mais tarde. Isso é útil para pré-carregar o vídeo.
- layout-- Uma chave opcional que especifica o formato do layout. Use CUBEMAP_32se quiser reproduzir vídeo no formato 3×2 cúbico.
- stereo -- uma chave opcional especificando o formato 2D / 3D do vídeo
- volume -- uma tecla opcional especificando o volume do vídeo, de 0 a 1
- muted -- uma chave opcional que especifica se o vídeo está sem som

Como posso monitorar o vídeo que está rodando e executar uma função?

Com a função "addListener" você consegue ouvir eventos do vídeo que está sendo executado no fundo da aplicação, exemplo:

É importante dizer que "player" é uma variável que deve ser criada no momento antes mesmo de definir o caminho do arquivo de vídeo e de dar play nele como mostrei nós exemplos de código acima.

player.addListener('onVideoStatusChanged', (event) => {
  if (event.status === 'finished') {
    console.log('O video foi finalizado!');
  }
})

O "onVideoStatusChanged" é emitido sempre que o status do vídeo muda, por exemplo, pausado, encerrado, tempo atual do vídeo, etc.
O evento com a função "addListener" nos retorna os seguintes campos:

duration -- A duração total do vídeo
error -- Se houver um erro, isso incluirá a mensagem de erro
isBuffering -- Se o vídeo está sendo armazenado em buffer para mais dados
isMuted -- Se o vídeo está sem som
volume -- O volume do vídeo
position -- A posição temporal do vídeo
status -- Status de reprodução do vídeo, pode ser
- closed: Sem sessão.
- closing: Sessão está sendo encerrada.
- failed: Sessão com erro.
- finished: A sessão terminou de reproduzir o vídeo
- paused: A sessão está em pausa.
- playing: A sessão está reproduzindo um vídeo.
- seeking: Sessão está procurando uma posição
- ready: A sessão está pronta para reproduzir um vídeo.
- stopped: Sessão parada (pronta para jogar)

Com isso é possível fazer farias coisas bacanas como, por exemplo, ao finalizar a reprodução do seu vídeo exibir algo na tela como opções para um próximo vídeo ou, por exemplo, pode criar um player de vídeo que ao pausar o vídeo você exibe os controles e ao retomar o vídeo você some com os controles, etc...

Por hoje é isso pessoal espero você nos meus próximos artigos para ser alertados de todos os artigos entre em um blog caso não esteja e ative as notificações.

Caso você tenha achado algum erro pode apontar de forma construtiva nos comentários ou caso tenha alguma informação que possa agregar no conhecimento de todos também estou aqui lendo todos os comentários 😀

Veja mais conteúdos como esses gratuitamente com mais qualidade em meu blog acesse: https://rf.curto.dev/blog-tabnews-ads