Die virtuelle Realität ist jetzt auf dem Höhepunkt der Mode. Die Ausrüstung, die während des Rasenmähers war verrückte Wissenschaftler Geeks mit großem Geld vom Verteidigungsministerium Jetzt kann es sich auch ein gewöhnlicher Mensch leisten, und wer eine völlig leere Tasche hat, kann ein VR-Headset aus Pappe und ein Smartphone nach vielen Rezepten zusammenbauen.
Und die Vorteile von VR können noch viel mehr bringen. als 3-4-5-6-7-weiter-nach-Geschmack-D-Kino. Nehmen wir an, Sie leben in Moskau und möchten ehrlich verdiente Ressourcen in den härtesten Währungen investieren - Immobilien irgendwo an der Mittelmeerküste. Wie Sie wissen, ist es besser, die Unterkunft vor Ort und selbst zu wählen, aber was ist, wenn Sie nicht genug Zeit dafür aufwenden können? Hier ist virtuelle Realität gefragt. Stellen Sie sich vor: Ein Agent stellt eine spezielle Kamera in einem Raum auf, und Sie können, ohne Ihren Lieblingsstuhl zu verlassen, diesen Raum untersuchen, Ihren Kopf und sogar die Decke mit einer Decke aus dem 18. Jahrhundert drehen. "Griechische Götter ergeben sich Ausschweifung Ruhe "Schau!
Dann sind Sie interessiert, obwohl Sie den Ort nicht verlassen, aber was machen Ihre Kinder im Kindergarten? Und wieder: Die Kamera ist im Spielzimmer und Sie können mit dem Effekt der Präsenz alle Ecken untersuchen, in denen sich Ihre Kinder befinden platziert verstecken sich.
Nun, wir werden herausfinden, wie wir sicherstellen können, dass in solchen Fällen alles funktioniert Makler Kinder hatten keine Zeit wegzulaufen.
Die Nuancen von VR-Bildern
"Vasily Ivanovich, erklären Sie, was die Nuance ist?"
"Siehst du, Peter ..."
Aus dem Dialog zweier prominenter Herren
Technisch unterscheidet sich ein VR-Media-Stream nicht von einem normalen: einem Video-Track und einem Audio-Track. Aber es gibt eine Nuance.
VR-Stream nimmt ein Stereobild an. Eine spezielle Kamera schaut mit zwei weit geöffneten 180 Grad in die Welt Augen Linsen in etwa wie dieser Roboter
Bilder werden in einem Rahmen zusammengeklebt,
Daher sollte ein spezieller Player auf dem Gerät des Betrachters arbeiten, der eines von zwei Bildern macht. Wie Sie sehen können, beträgt das Seitenverhältnis des Rahmens 2: 1, FullHD-Bild für jedes Auge.
Die Nuancen von VR-Sendungen
Ja, ja, ja, ich kann alles machen
Zähle wie die Finger einer Hand
Klassisches Filmlied
Wir sprechen also von der Übertragung von 4K-Streams mit einer hohen Bitrate. Was haben wir Und wir haben RTMP und WebRTC.
RTMP - billig zuverlässig und praktisch. Unter der Haube wird TCP verwendet, was für weniger gute Kanäle nützlich ist. Es gibt verschiedene Softwarelösungen für den Publishing-Client, sowohl kostenpflichtig als auch kostenlos. Bei allen Vorteilen bietet RTMP jedoch eine hohe Latenz. In einem früheren Artikel haben wir eine Verzögerung von 2-3 Sekunden für einen 720p-Stream festgestellt. In einigen Fällen sind Verzögerungen akzeptabel, aber die Virtualität wird bereits ein wenig hinter der Realität zurückbleiben, und die Kinder werden Zeit haben, wegzulaufen.
WebRTC - stilvoll, modisch, jung. Bei guten Kanälen werden Verzögerungen in Millisekunden gemessen, Realität bleibt Realität. Aber es gibt Nuancen.
Erstens läuft WebRTC standardmäßig auf UDP, was bei einer geringfügigen Verschlechterung der Kanalqualität zu Verlusten führt. Und für einen 4K-Stream ist jedes Niesen auf dem Kanal bereits eine Verschlechterung. Dies kann durch Umstellung auf TCP-Transport behoben werden, wartet dann aber auf uns ...
Zweitens wird WebRTC vom Browser gesendet, und Sie und ich wissen, welcher Browser derzeit der beliebteste auf dem Planeten ist (Spoiler - seit langer Zeit nicht mehr IE6). In diesem populären Browser und auf der Engine-Ebene beträgt die maximale Publikations-Bitrate 2500 kbit / s. Das ist schon genug. laut google für FullHD, aber nicht genug für 4K, und wenn die Bitrate nicht auf 5 - 10 Mbit / s beschleunigt wird, sehen die Betrachter bewegte Aquarellflecken anstelle von virtueller Realität. Glücklicherweise gibt es spezielle Einstellungen zum Übertakten der Bitrate, die funktionieren über alles die meisten Browser der Chromium Engine. Nachdem wir dieses Hindernis überwunden haben, werden wir uns ausruhen ...
Drittens werden wir in die Kanalkapazität laufen. Um ein VR-Bild mit der oben genannten Bitrate zu veröffentlichen und abzuspielen, benötigt der Client Kanäle ab 20 MBit oder besser ab 50 MBit und noch besser ab 100 MBit, beide in beide Richtungen zum Herunterladen und Hochladen. Darüber hinaus sollten dies nicht die Parameter sein, über die der Anbieter in Werbebroschüren spricht, sondern die tatsächliche Bandbreite vom Client zum Server. Übrigens können Sie hier nachlesen, wie es ohne Iperf und Kommandozeilenwissen gemessen werden kann . Auf der Serverseite ist es daher wünschenswert, 10 GB zu haben, wenn Sie mit einer großen Anzahl von Streams rechnen.
Gut und viertens, was sich aus den Anforderungen für Sender ergibt. Das Transcodieren eines 4K-Streams beansprucht zu viele Prozessorressourcen auf dem Server. Daher müssen Sie entweder einen für das Budget teuren Zar-Server auswählen oder die ebenfalls sehr teure Codierung für Grafikkarten verwenden oder die Transcodierung vermeiden. Das heißt, in keinem Fall die Auflösung, Bildrate und Bitrate der Streams während der Übersetzung ändern.
Also sind jetzt alle Untiefen nummeriert
Lass es uns versuchen
Was gibt es zu denken, müssen Sie schütteln!
Zeichentrickfigur
Nimm:
Stellen Sie die Kamera auf einen Tisch oder ein Stativ
Verbindung zum PC über USB 3.0 mit 1A-Stromversorgung wie bei externen Laufwerken
Ich muss sagen, die Kamera reagiert sehr empfindlich auf Geräte, und wenn der Laptop über zwei USB 3.0-Anschlüsse verfügt, kann es durchaus vorkommen, dass sie nicht mit einem dieser Anschlüsse funktionieren. Das Kabel für die Verbindung sollte auch nicht vollständig chinesisch sein, alle in der Norm vorgesehenen Stifte sollten vorhanden sein. Und selbst bei einer perfekten Verbindung kann die Kamera Störungen erzeugen, wie ein alter Fernseher mit starkem Bauch in einem Gewitter. Für Windows 10 werden aber keine Treiber benötigt, ein ehrliches Plug-n-Play.
Stellen Sie serverseitig die erforderlichen Bitratenlimits ein
webrtc_cc_min_bitrate=5000000 webrtc_cc_max_bitrate=10000000
Im Chrome-Browser wird eine Beispielseite geöffnet, auf der Sie die erforderlichen Parameter für die Aufzeichnung des Streams von der Kamera festlegen und festlegen können
- Auflösung 3072x1536
- FPS 24 (beim Senden über einen Browser unterstützt die Kamera nur solche FPS)
- TCP-Transport
und konfigurieren Sie die SDP-Einstellungen so, dass der Browser uns nicht schneidet Stör Bitrate, Client-Seite
x-google-max-bitrate=10000;x-google-min-bitrate=5000
oder auf der Serverseite (in diesem Fall gelten die Einstellungen für alle Publishing-Clients)
webrtc_sdp_min_bitrate_bps=5000000 webrtc_sdp_max_bitrate_bps=10000000
Wir veröffentlichen den Stream von der Kamera
Versuchen wir nun, den Stream mit einem normalen WebRTC-Player abzuspielen
Alles ist gut ... Fast. Virtualität ist nicht ganz virtuell. Nun, jetzt spielen wir den gleichen Stream in einem speziellen Player, der auf der Seite eingebettet ist
So viel besser (und es gibt Robben). Wenn Sie den Stream auf einem mobilen Gerät oder in einer VR-Brille abspielen, können Sie Ihren Kopf drehen, und wir drehen die Maus im Browser auf dem PC. Irgendwo in diesem Raum versteckte sich ein Kind. Lassen Sie uns nach links schauen
Jetzt richtig
Und auf
Und wo ist das Baby? Ja, hier versteckt er sich hinter dem Vorhang. Aber die Katze sieht alles!
Code, du brauchst mehr Code!
Auf der Clientseite gibt es nicht viel Code.
Veröffentlichen Sie den Stream über die Browserseite
session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, transport: "TCP", sdpHook: rewriteSdp, constraints: { audio:true, video: { width: 3072, height: 1536, frameRate: 24 } } }).publish();
Funktion zum Überschreiben des SDP-Browsers
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; }
Beispielseite mit einem VR-Player
<!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>
Normalerweise übergeben wir beim Erstellen eines Streams für einen Player (Aufruf von session.createStream() ) ein div-Element, in das ein Videoelement session.createStream() wird, um den Stream über WebRTC abzuspielen. Der VR-Player verwendet jedoch ein eigenes Videoelement, und wir müssen es irgendwie in den Code der verwendeten API weiterleiten. Dazu übergeben wir das Videoelement des Drittanbieter-Players mit dem Parameter remoteVideo direkt an die Funktion session.createStream ()
Als Server wird Demo.flashphoner.com verwendet, Beispiele für Webanwendungen finden Sie im Keller unter den Links.
Viel Glück bei der Inspektion vor Ort, ohne den Ort zu verlassen!
Referenzen
- Server WebRTC-Kanalqualitätsanzeige über TCP - Qualitätskontrolle der Kanäle vom Client zum Server
- Video-Streaming von einer Webcam auf einem Browser oder Mobilgerät - WebRTC-Streaming von einem Browser
- Dokumentation zur Verwendung von WCS mit einem VR-Player
- WCS - Server zur Übertragung von VR 360 Videos über WebRTC