A realidade virtual está em ascensão nos dias de hoje. O equipamento que era anteriormente exclusivo de cientistas loucos geeks com muito dinheiro do Ministério da Defesa nos dias de The Lawnmower Man, atualmente é acessível para pessoas comuns; aqueles cujos bolsos estão vazios, podem montar um fone de ouvido VR de papelão e um smartphone de acordo com muitas receitas.
A VR pode trazer muito mais benefícios do que o cinema 3-4-5-6-7-something-D. Digamos que você mora em Chicago e deseja investir recursos honestamente conquistados em imóveis - em algum lugar ao longo da costa da Flórida. Como você sabe, é melhor escolher morar sozinho e no local, mas e se você não puder dedicar tempo suficiente para isso? É aqui que a realidade virtual é necessária. Imagine: o agente instala uma câmera especial na sala e você, sem sair de sua cadeira favorita, pode examinar esta sala, virar a cabeça e até apreciar o teto com um mural do século XVIII “Deuses gregos festejando!”
Então, ainda sem sair do local, você pode se perguntar o que seus filhos estão fazendo no jardim de infância. E novamente: a câmera está na sala de jogos e você pode obter uma experiência sensorial imersiva examinando todos os cantos onde seus filhos estão escondendo .
Agora vamos descobrir como garantir que tudo funcione, e o agentes imobiliários as crianças não se espalham.
As nuances da imagem VR
Tecnicamente, um fluxo de mídia VR não é diferente de um fluxo comum; é uma faixa de vídeo mais uma faixa de áudio. Mas há uma nuance.
O fluxo VR assume uma imagem estéreo. Uma câmera especial olha o mundo com dois olhos as lentes abrem bem (180 graus), como um robô.
as imagens se fundem em um quadro,
portanto, um player especial deve ser instalado no dispositivo do visualizador, o que fará duas fotos uma. Como você pode ver, a proporção do quadro é 2: 1, o que cria uma imagem FullHD para cada olho.
As nuances da transmissão VR
Então, estamos falando sobre a transmissão de fluxos 4K com uma alta taxa de bits. O que nós temos? Temos RTMP e WebRTC.
RTMP é barato confiável e prático. Ele usa o TCP, que é útil no caso de canais não tão bons. Existem várias soluções de software para o cliente de publicação, pagas e gratuitas. No entanto, apesar de todos os seus méritos, o RTMP possui alta latência. Em um dos artigos anteriores, observamos um atraso de 2 a 3 segundos em um fluxo de 720p. Em alguns casos, atrasos são aceitáveis, mas a RV fica para trás da realidade e as crianças certamente se espalham.
WebRTC é muito legal. Com bons canais, os atrasos são medidos em milissegundos e a realidade continuará sendo realidade. Mas existem nuances.
Primeiro, por padrão, o WebRTC é executado no UDP, o que levará a perdas com a menor deterioração na qualidade do canal. Para um fluxo de 4K, qualquer coisinha no canal já é uma deterioração. Isso pode ser resolvido alternando para o transporte TCP, mas neste caso ...
Segundo, o WebRTC é transmitido pelo navegador, e nós dois sabemos qual navegador é atualmente o mais popular do planeta (spoiler - não é o IE6). Nesse navegador popular, a taxa de bits máxima de publicação no nível do mecanismo é de 2500 kbps. Como o google pensa , isso é suficiente para FullHD, mas não é suficiente para 4K. Se a taxa de bits não for acelerada para 5 - 10 Mbps, os espectadores verão pontos em movimento em aquarela em vez de realidade virtual. Felizmente, existem configurações especiais para overclock da taxa de bits que funcionam em praticamente todos os navegadores no mecanismo Chromium. Então, superando esse obstáculo, encontraremos ...
Terceiro, veremos a largura de banda do canal. Para publicar e reproduzir uma imagem de VR com a taxa de bits mencionada acima, o cliente precisará de canais de 20+ Mbit, ou melhor, 50 e ainda melhor, 100+ Mbit, tanto para download quanto para upload. Nesse caso, esses não devem ser os parâmetros mencionados pelo provedor nos folhetos de publicidade, mas a largura de banda real do cliente para o servidor. A propósito, leia como medi-lo sem o iperf e a linha de comando . Do mesmo modo, no lado do servidor, é desejável ter 10 Gb se for previsto um grande número de fluxos.
Quarto é o que se segue dos requisitos para canais. A transcodificação de um fluxo de 4K consumirá muitos recursos do processador no servidor. Portanto, você deve escolher um servidor king-size, que é caro, ou usar codificação em placas de vídeo, que também são muito caras, ou evitar a transcodificação. Ou seja, nunca altere a resolução, taxa de quadros e taxa de bits dos fluxos durante a transmissão.
Vamos tentar fazer isso
Vamos dar:
Monte a câmera em uma mesa ou tripé
Conecte-o ao PC via USB 3.0 com alimentação 1A, como para unidades externas
Observe que a câmera é muito sensível ao equipamento e, se o laptop tiver 2 portas USB 3.0, pode se recusar a trabalhar com uma delas. Certifique-se de não usar um cabo de conexão chinês barato; todos os pinos fornecidos pela norma devem estar no lugar. Mesmo com uma conexão perfeita, a câmera pode produzir falhas, como uma TV antiga em uma tempestade. A única coisa positiva é que nenhum driver é necessário para o Windows 10; é uma conexão do tipo Plug-n-Play honesta.
Definiremos os limites de taxa de bits necessários no lado do servidor
webrtc_cc_min_bitrate=5000000 webrtc_cc_max_bitrate=10000000
No Chrome, abra a página de um exemplo, permitindo definir os parâmetros necessários para capturar o fluxo da câmera e defina
- resolução de 3072x1536
- FPS 24 (a câmera suporta apenas esse FPS ao transmitir a partir do navegador)
- Transporte TCP
e defina as configurações do SDP para que o navegador não corte a taxa de bits no lado do cliente
x-google-max-bitrate=10000;x-google-min-bitrate=5000
ou do lado do servidor (nesse caso, as configurações serão válidas para todos os clientes de publicação)
webrtc_sdp_min_bitrate_bps=5000000 webrtc_sdp_max_bitrate_bps=10000000
Vamos publicar o fluxo da câmera
Agora vamos tentar reproduzir o fluxo com um player WebRTC comum
Está tudo bem ... Quase. A virtualidade não é realmente virtual. Agora vamos reproduzir o mesmo stream em um player especial incorporado na página
Agora isso é melhor (e também temos gatos). Se você reproduzir o stream em um dispositivo móvel ou em óculos de realidade virtual, pode virar a cabeça e moveremos o mouse no navegador do PC. Há uma criança escondida em algum lugar nesta sala. Vamos olhar para a esquerda
E agora à direita
E agora
Cadê o garoto? Lá está ele, escondido atrás da cortina. Mas os gatos o vêem!
Precisamos de mais código!
Há pouco código no lado do cliente.
Vamos publicar o fluxo na página do navegador
session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, transport: "TCP", sdpHook: rewriteSdp, constraints: { audio:true, video: { width: 3072, height: 1536, frameRate: 24 } } }).publish();
Recurso de substituição do navegador SDP
function rewriteSdp(sdp) { var sdpStringFind = "a=fmtp:(.*) (.*)"; var sdpStringReplace = "a=fmtp:$1 $2;x-google-max-bitrate=10000;x-google-min-bitrate=5000"; var newSDP = sdp.sdpString.toString(); newSDP = newSDP.replace(new RegExp(sdpStringFind,"g"), sdpStringReplace); return newSDP; }
Um exemplo de página com um reprodutor de realidade virtual
<!DOCTYPE html> <html> <head> <title>WebRTC Delight</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="../../../../flashphoner.js"></script> <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script> <script type="text/javascript" src="../../dependencies/js/utils.js"></script> <script src="dl8-player.js" async></script> <meta name="dl8-custom-format" content='{"name": "STEREO_TERPON","base":"STEREO_MESH","params":{"uri": "03198702.json"}}'> </head> <body> <div style="width: 50%;" id="display"> <dl8-live-video id="remoteVideo" format="STEREO_TERPON"> \<source> </dl8-live-video> </div> <input class="form-control" type="text" id="playStream" placeholder="Stream Name"> <button id="playBtn" type="button" class="btn btn-default" disabled>Play</button> <button id="stopBtn" type="button" class="btn btn-default" disabled>Stop</button> <script> Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var STREAM_STATUS_INFO = Flashphoner.constants.STREAM_STATUS_INFO; var playBtn = document.getElementById('playBtn'); var display = document.getElementById('display'); var dl8video = null; var url = setURL(); document.addEventListener('x-dl8-evt-ready', function () { dl8video = document.getElementById('remoteVideo'); $('#playBtn').prop('disabled', false).click(function() { playStream(); }); }); function playStream() { $('#playBtn').prop('disabled', true); $('#stopBtn').prop('disabled', false); var video = dl8video.contentElement; Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { var session = Flashphoner.getSessions()[0]; session.createStream({ name: document.getElementById('playStream').value, display: display, remoteVideo: video, transport: "TCP" }).on(STREAM_STATUS.PLAYING, function (stream) { dl8video.start(); $('#stopBtn').prop('disabled', false).click(function() { $('#playBtn').prop('disabled', false); $('#stopBtn').prop('disabled', true); stream.stop(); dl8video.exit(); }); }).play(); }) } </script> </body> </html>
Normalmente, ao criar um fluxo para um player (consulta session.createStream() ), passamos o elemento div, no qual o elemento de vídeo será montado para reproduzir o fluxo via WebRTC. Mas o VR player usa seu próprio elemento de vídeo e precisamos, de alguma forma, encaminhá-lo para o código da API usada. Para fazer isso, passamos diretamente o elemento de vídeo do player de terceiros para o session.createStream () com o parâmetro remoteVideo
demo.flashphoner.com é usado como o lado do servidor; exemplos de aplicativos da web estão disponíveis nos links abaixo.
Boa sorte em seus esforços de VR! Feliz streaming!
Ligações
- Indicador de qualidade de canal para servidor WebRTC sobre TCP - Controle de qualidade de canais de cliente para servidor
- Transmissão de vídeo da câmera da web de um navegador ou dispositivo móvel - WebRTC transmitindo do navegador
- Documentação para usar o WCS com um player VR
- WCS - Servidor para transmissão de vídeo VR 360 via WebRTC