La réalité virtuelle est désormais à la pointe de la mode. L'équipement qui pendant la tondeuse à gazon était scientifiques fous geeks avec beaucoup d'argent du ministère de la défense , maintenant c'est abordable pour une personne ordinaire, et ceux qui ont une poche complètement vide peuvent assembler un casque VR à partir de carton et d'un smartphone selon de nombreuses recettes.
Et les avantages de la réalité virtuelle peuvent apporter bien plus. que la salle de cinéma 3-4-5-6-7-plus-à-goûter-D. Disons que vous vivez à Moscou et que vous souhaitez investir des ressources honnêtement gagnées dans les devises les plus dures - l'immobilier quelque part sur la côte méditerranéenne. Comme vous le savez, il vaut mieux choisir un logement sur place et par vous-même, mais que faire si vous ne pouvez pas y consacrer suffisamment de temps? C'est là que la réalité virtuelle est nécessaire. Imaginez: un agent installe une caméra spéciale dans une pièce, et vous, sans quitter votre chaise préférée, pouvez examiner cette pièce, tourner la tête et même le plafond avec un plafond du XVIIIe siècle. "Les dieux grecs se rendent débauche repos "regarde!
Alors, tout de même, ne pas quitter l'endroit, ça vous intéresse, mais à quoi vos enfants s'adonnent-ils à la maternelle? Et encore une fois: la caméra est dans la salle de jeux, et vous avec l'effet de présence pouvez examiner tous les coins où se trouvent vos enfants placé se cachent.
Eh bien, nous allons trouver comment nous assurer que dans de tels cas tout fonctionne, et agents immobiliers les enfants n'ont pas eu le temps de s'enfuir.
Les nuances des images VR
"Vasily Ivanovich, expliquez quelle est la nuance?"
"Tu vois, Peter ..."
Du dialogue de deux messieurs éminents
Techniquement, un flux multimédia VR n'est pas différent d'un flux ordinaire: une piste vidéo plus une piste audio. Mais il y a une nuance.
Le flux VR suppose une image stéréo. Une caméra spéciale regarde le monde avec deux larges, 180 degrés, ouverts les yeux lentilles à peu près comme ce robot
les images sont collées ensemble dans un seul cadre,
par conséquent, un lecteur spécial devrait travailler sur l'appareil du spectateur, qui fera l'une des deux images. Comme vous pouvez le voir, le rapport hauteur / largeur de l'image est de 2: 1, image FullHD pour chaque œil.
Les nuances de la diffusion VR
Oui, oui, oui, je peux tout faire
Comptez comme des doigts sur une main
Chanson de film classique
Nous parlons donc de diffuser des flux 4K avec un débit binaire élevé. Qu'avons-nous? Et nous avons RTMP et WebRTC.
RTMP - pas cher fiable et pratique. Sous le capot, il utilise TCP, ce qui est utile pour les canaux moins bons. Il existe différentes solutions logicielles pour le client de publication, payantes et gratuites. Mais, pour tous ses avantages, RTMP offre une latence élevée. Dans un article précédent, nous avions noté un délai de 2-3 secondes pour un flux 720p. Dans certains cas, les retards sont acceptables, mais la virtualité sera déjà un peu en retrait par rapport à la réalité, et les enfants auront le temps de s'enfuir.
WebRTC - élégant, à la mode, jeune. Avec de bons canaux, les retards sont mesurés en millisecondes, la réalité restera la réalité. Mais il y a des nuances.
Premièrement, par défaut, WebRTC s'exécute sur UDP, ce qui entraîne des pertes avec la moindre détérioration de la qualité du canal. Et pour un flux 4K, tout éternuement sur la chaîne est déjà une détérioration. Cela peut être résolu en passant au transport TCP, mais nous attend ensuite ...
Deuxièmement, WebRTC est diffusé à partir du navigateur, et vous et moi savons quel navigateur est actuellement le plus populaire de la planète (spoiler - pas IE6 depuis longtemps). Et dans ce navigateur populaire, et au niveau du moteur, le débit binaire de publication maximum est de 2500 kbps. C'est assez. selon google pour FullHD, mais pas assez pour 4K, et si le débit n'est pas accéléré à 5 - 10 Mbit / s, les téléspectateurs verront des taches d'aquarelle en mouvement au lieu de la réalité virtuelle. Heureusement, il existe des paramètres spéciaux pour l'overclocking du débit binaire, qui fonctionnent dans à propos de tout la plupart des navigateurs sur le moteur Chromium. Ensuite, après avoir surmonté cet obstacle, nous nous reposerons ...
Troisièmement, nous serons confrontés à la capacité des canaux. Afin de publier et de lire une image VR, au débit binaire mentionné ci-dessus, le client aura besoin de canaux de 20 Mbit, ou mieux de 50, et encore mieux de 100 Mbit, dans les deux sens pour le téléchargement et le téléchargement. De plus, cela ne devrait pas être les paramètres dont le fournisseur parle dans les brochures publicitaires, mais la vraie bande passante du client au serveur. À propos, ici, vous pouvez lire comment il peut être mesuré sans iperf et sans connaissances en ligne de commande . Côté serveur, il est donc souhaitable d'avoir 10 Go si vous comptez sur un grand nombre de flux.
Enfin et quatrièmement, ce qui découle des exigences relatives aux chaînes. Le transcodage d'un flux 4K prendra trop de ressources processeur sur le serveur. Par conséquent, vous devez soit choisir un serveur tsar, qui est cher sur un budget limité, soit utiliser l'encodage sur les cartes vidéo, qui est également très cher, ou éviter le transcodage. Autrement dit, ne modifiez en aucun cas la résolution, la fréquence d'images et le débit binaire des flux pendant la traduction.
Donc, tous les bas-fonds sont numérotés, maintenant
Essayons
Qu'y a-t-il à penser, il faut secouer!
Personnage de dessin animé
Prenez:
Montez l'appareil photo sur une table ou un trépied
Connectez-vous au PC via USB 3.0 avec une alimentation de 1 A, comme pour les disques externes
Je dois dire que l'appareil photo est très sensible aux équipements, et si l'ordinateur portable dispose de 2 ports USB 3.0, il peut très bien refuser de fonctionner avec l'un d'eux. Le câble de connexion ne doit pas non plus être entièrement chinois, toutes les broches prévues par la norme doivent être en place. Et même avec une connexion parfaite, l'appareil photo peut produire des interférences, comme un vieux téléviseur à ventre pot dans un orage. Mais pour Windows 10, les pilotes ne sont pas nécessaires, un Plug-n-Play honnête.
Côté serveur, définissez les limites de débit nécessaires
webrtc_cc_min_bitrate=5000000 webrtc_cc_max_bitrate=10000000
Nous allons ouvrir un exemple de page dans le navigateur Chrome qui vous permet de définir les paramètres nécessaires pour capturer le flux depuis la caméra et de définir
- Résolution 3072x1536
- FPS 24 (lors de la diffusion à partir d'un navigateur, l'appareil photo prend uniquement en charge ces FPS)
- Transport TCP
et configurer les paramètres SDP pour que le navigateur ne nous coupe pas esturgeon débit binaire, côté client
x-google-max-bitrate=10000;x-google-min-bitrate=5000
ou côté serveur (dans ce cas, les paramètres seront valables pour tous les clients de publication)
webrtc_sdp_min_bitrate_bps=5000000 webrtc_sdp_max_bitrate_bps=10000000
Nous publions le flux de la caméra
Essayons maintenant de lire le flux avec un lecteur WebRTC standard
Tout va bien ... Presque. La virtualité n'est pas entièrement virtuelle. Eh bien, maintenant nous jouons le même flux dans un lecteur spécial intégré à la page
Tant mieux (et il y a des phoques). Si vous lisez le flux sur un appareil mobile ou dans des lunettes VR, vous pouvez tourner la tête et nous tournerons la souris dans le navigateur du PC. Quelque part dans cette pièce, un enfant s'est caché. Regardons à gauche
Maintenant bien
Et en haut
Et où est le bébé? Oui, ici, il se cache derrière le rideau. Mais le chat voit tout!
Code, vous avez besoin de plus de code!
Côté client, il n'y a pas beaucoup de code.
Publier le flux depuis la page du navigateur
session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, transport: "TCP", sdpHook: rewriteSdp, constraints: { audio:true, video: { width: 3072, height: 1536, frameRate: 24 } } }).publish();
Fonction de remplacement du navigateur 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; }
Exemple de page avec un lecteur VR
<!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>
Habituellement, lors de la création d'un flux pour un lecteur (appelant session.createStream() ), nous passons un élément div dans lequel un élément vidéo sera monté pour lire le flux via WebRTC. Mais le lecteur VR utilise son propre élément vidéo, et nous devons en quelque sorte le transférer dans le code de l'API utilisée. Pour ce faire, nous transmettons directement l'élément vidéo du lecteur tiers à la fonction session.createStream () avec le paramètre remoteVideo
Demo.flashphoner.com est utilisé côté serveur, des exemples d'applications web sont disponibles au sous-sol par les liens.
Bonne chance dans l'inspection sur place, sans quitter la place!
Les références
- Indicateur de qualité de canal WebRTC du serveur sur TCP - Contrôle de qualité des canaux du client au serveur
- Streaming vidéo depuis une webcam sur un navigateur ou un appareil mobile - Streaming WebRTC depuis un navigateur
- Documentation pour utiliser WCS avec un lecteur VR
- WCS - serveur pour la transmission de vidéo VR 360 via WebRTC