HoloLens (1. generációs) és Azure 306: Videó streamelése


Megjegyzés

A Mixed Reality Academy oktatóanyagait a HoloLens (1. generációs) és Mixed Reality modern headsetekkel tervezték. Ezért fontosnak tartjuk, hogy ezeket az oktatóanyagokat megtartsuk azoknak a fejlesztőknek, akik továbbra is útmutatást keresnek az eszközök fejlesztéséhez. Ezek az oktatóanyagok nem frissülnek az HoloLens 2 legújabb eszközkészleteivel vagy interakcióival. A támogatott eszközökön való munka folytatásához megmaradnak. A jövőben egy új oktatóanyag-sorozat jelenik meg, amely bemutatja, hogyan fejleszthet HoloLens 2. Ezt az értesítést a közzétételükkor az oktatóanyagokra mutató hivatkozással frissítjük.


Képernyőkép egy Windows Mixed Reality V R-példáról.Képernyőkép egy Windows Mixed Reality V R-felületről.

Ebben a tanfolyamban megtudhatja, hogyan csatlakoztathatja az Azure Media Servicest egy Windows Mixed Reality VR-élményhez, hogy lehetővé tegye a 360 fokos videolejátszást modern headseteken.

Az Azure Media Services olyan szolgáltatások gyűjteménye, amelyek közvetítési minőségű videostreamelési szolgáltatásokat kínálnak, hogy nagyobb közönséget érjenek el a mai legnépszerűbb mobileszközökön. További információért látogasson el az Azure Media Services oldalára.

A tanfolyam elvégzése után vegyes valóságú, magával ragadó headset-alkalmazással rendelkezik, amely a következőket fogja tudni elvégezni:

  1. Egy 360 fokos videó lekérése egy Azure Storage-ból az Azure Media Service-ben.

  2. A lekért 360 fokos videó megjelenítése egy Unity-jelenetben.

  3. Navigálás két jelenet között két különböző videóval.

Az alkalmazásban ön múlik, hogyan fogja integrálni az eredményeket a tervével. Ez a kurzus arra szolgál, hogy megtanítsa, hogyan integrálhat egy Azure-szolgáltatást a Unity Projecttel. Az Ön feladata, hogy felhasználja a tanfolyamból megszerzett tudást a vegyes valóság alkalmazásának továbbfejlesztéséhez.

Eszköztámogatás

Tanfolyam HoloLens Modern headsetek
MR és Azure 306: Videó streamelése ✔️

Előfeltételek

Megjegyzés

Ez az oktatóanyag olyan fejlesztőknek készült, akik alapszintű tapasztalattal rendelkeznek a Unityben és a C#-ben. Felhívjuk a figyelmét arra is, hogy a jelen dokumentumban foglalt előfeltételek és írásos utasítások az írás időpontjában (2018. május) tesztelt és ellenőrzött adatokat jelölik. Szabadon használhatja a legújabb szoftvert, ahogy az az eszközök telepítéséről szóló cikkben szerepel, bár nem szabad feltételezni, hogy a tanfolyam információi tökéletesen megfelelnek az újabb szoftverekben található információknak, mint az alább felsoroltak.

A tanfolyamhoz a következő hardvereket és szoftvereket ajánljuk:

Előkészületek

  1. A projekt létrehozásával kapcsolatos problémák elkerülése érdekében javasoljuk, hogy hozza létre az oktatóanyagban említett projektet egy gyökér- vagy gyökérmappában (a hosszú mappaútvonalak buildeléskor problémákat okozhatnak).

  2. Állítsa be és tesztelje a Mixed Reality modern headsetet.

    Megjegyzés

    Ehhez a kurzushoz nem lesz szükség mozgásvezérlőkre. Ha segítségre van szüksége a Modern headset beállításához, kattintson a Windows Mixed Reality beállítására szolgáló hivatkozásra.

1. fejezet – Az Azure Portal: az Azure Storage-fiók létrehozása

Az Azure Storage szolgáltatás használatához létre kell hoznia és konfigurálnia kell egy tárfiókot a Azure Portal.

  1. Jelentkezzen be az Azure Portalra.

    Megjegyzés

    Ha még nem rendelkezik Azure-fiókkal, létre kell hoznia egyet. Ha ezt az oktatóanyagot osztályteremben vagy laborhelyzetben követi, kérjen segítséget az oktatótól vagy az egyik proktortól az új fiók beállításához.

  2. Miután bejelentkezett, kattintson a bal oldali menü Tárfiókok elemére .

    Képernyőkép az Azure Portal menüjéről. A tárfiókok ki van emelve.

  3. A Tárfiókok lapon kattintson a Hozzáadás gombra.

    Képernyőkép a tárfiók párbeszédpanelről. A Hozzáadás elem ki van emelve.

  4. A Tárfiók létrehozása lapon:

    1. Adjon meg egy nevet a fióknak, ne feledje, hogy ez a mező csak számokat és kisbetűket fogad el.

    2. Az Üzembehelyezési modell beállításnál válassza az Erőforrás-kezelő lehetőséget.

    3. A Fiók típusa beállításnál válassza a Tárolás (általános célú v1) lehetőséget.

    4. A Teljesítmény beállításnál válassza a Standard lehetőséget.*

    5. Replikáció esetén válassza a Helyileg redundáns tárolás (LRS) lehetőséget.

    6. Hagyja letiltva a biztonságos átvitelt.

    7. Válasszon ki egy előfizetést.

    8. Válasszon egy Erőforráscsoportot , vagy hozzon létre egy újat. Az erőforráscsoportok lehetővé teszi az Azure-eszközök gyűjteményéhez tartozó számlázás monitorozását, vezérlését, kiépítését és kezelését.

    9. Határozza meg az erőforráscsoport helyét (ha új erőforráscsoportot hoz létre). A hely ideális esetben abban a régióban lenne, ahol az alkalmazás futna. Egyes Azure-eszközök csak bizonyos régiókban érhetők el.

  5. Meg kell erősítenie, hogy megértette a szolgáltatásra vonatkozó feltételeket.

    Képernyőkép a tárfiók létrehozása lapról.

  6. Miután a Létrehozás gombra kattintott, meg kell várnia a szolgáltatás létrehozását, ez eltarthat egy percig.

  7. A szolgáltatáspéldány létrehozása után megjelenik egy értesítés a portálon.

    Képernyőkép az üzembe helyezés sikeres értesítéséről.

  8. Ezen a ponton nem kell követnie az erőforrást, egyszerűen lépjen a következő fejezetre.

2. fejezet – Az Azure Portal: a Media Service létrehozása

Az Azure Media Service használatához konfigurálnia kell a szolgáltatás egy példányát, amelyet elérhetővé kell tenni az alkalmazás számára (ahol a fióktulajdonosnak Rendszergazda kell lennie).

  1. Az Azure Portalon kattintson az Erőforrás létrehozása elemre a bal felső sarokban, és keresse meg a Media Service-t, nyomja le az Enter billentyűt. A kívánt erőforrásnak jelenleg rózsaszín ikonja van; kattintson erre az új lap megjelenítéséhez.

    Képernyőkép az Azure Portalról. A Media Services lehetőség ki van emelve.

  2. Az új oldal a Media Service leírását adja meg. A parancssor bal alsó sarkában kattintson a Létrehozás gombra a szolgáltatással való társítás létrehozásához.

    Képernyőkép az Azure Portalról. A Létrehozás gomb ki van emelve.

  3. Miután a Create a panelre kattintott, megjelenik, ahol meg kell adnia néhány részletet az új Media Service-ről:

    1. Szúrja be a kívánt fióknevet ehhez a szolgáltatáspéldányhoz.

    2. Válasszon ki egy előfizetést.

    3. Válasszon egy erőforráscsoportot , vagy hozzon létre egy újat. Az erőforráscsoportok lehetővé teszi az Azure-eszközök gyűjteményéhez tartozó számlázás monitorozását, vezérlését, kiépítését és kezelését. Javasoljuk, hogy az egyetlen projekthez (például a tesztkörnyezetekhez) társított összes Azure-szolgáltatást egy közös erőforráscsoportban tartsa.

    Ha többet szeretne megtudni az Azure-erőforráscsoportokról, kövesse ezt a hivatkozást az Azure-erőforráscsoportok kezelésével kapcsolatban.

    1. Határozza meg az erőforráscsoport helyét (ha új erőforráscsoportot hoz létre). A hely ideális esetben abban a régióban lenne, ahol az alkalmazás futna. Egyes Azure-eszközök csak bizonyos régiókban érhetők el.

    2. A Tárfiók szakaszban kattintson a Kérjük, válassza a... szakaszt, majd kattintson az előző fejezetben létrehozott tárfiókra .

    3. Azt is meg kell erősítenie, hogy megértette a szolgáltatásra vonatkozó feltételeket.

    4. Kattintson a Létrehozás lehetőségre.

      Képernyőkép a Media Service-fiók létrehozása lapról.

  4. Miután a Létrehozás gombra kattintott, meg kell várnia a szolgáltatás létrehozását, ez eltarthat egy percig.

  5. A szolgáltatáspéldány létrehozása után megjelenik egy értesítés a portálon.

    Képernyőkép a portál menüjének értesítés ikonjáról.

  6. Kattintson az értesítésre az új szolgáltatáspéldány megismeréséhez.

    Képernyőkép a sikeres üzembe helyezésről szóló értesítésről.

  7. Az értesítésben kattintson az Erőforrás megnyitása gombra az új szolgáltatáspéldány megismeréséhez.

  8. Az új Médiaszolgáltatás lapon, a bal oldali panelen kattintson az Eszközök hivatkozásra, amely körülbelül félúton van.

  9. A következő lapon, a lap bal felső sarkában kattintson a Feltöltés elemre.

    Képernyőkép az Eszközök lapról. A Feltöltés és az Eszközök lehetőség ki van emelve.

  10. Kattintson a Mappa ikonra a fájlok tallózásához, és válassza ki az első 360 videót, amelyet streamelni szeretne.

    Ezt a hivatkozást követve tölthet le egy mintavideót.

    Képernyőkép a videoeszköz feltöltési oldaláról.

Figyelmeztetés

A hosszú fájlnevek problémát okozhatnak a kódolóval kapcsolatban: a videók nem okoznak problémát, ezért érdemes lerövidíteni a videófájlnevek hosszát.

  1. Ha a videó feltöltése befejeződött, a folyamatjelző sáv zöld színűre vált.

    Képernyőkép a videoeszköz folyamatjelző sávjának feltöltéséről.

  2. Kattintson a fenti szövegre (saját szolgáltatásnév – Eszközök) az Eszközök lapra való visszatéréshez.

  3. Megfigyelheti, hogy a videó feltöltése sikeresen megtörtént. Kattintson rá.

    Képernyőkép az Eszközök lapról. Videó 1 pont M P 4 ki van emelve.

  4. A átirányított lap részletes információkat jelenít meg a videóról. Ahhoz, hogy használni tudja a videót, kódolnia kell azt a lap bal felső részén található Kódolás gombra kattintva.

    Képernyőkép az eszközoldalról. A kódolás gomb ki van emelve.

  5. Megjelenik egy új panel a jobb oldalon, ahol megadhatja a fájl kódolási beállításait. Állítsa be a következő tulajdonságokat (néhány már alapértelmezés szerint be lesz állítva):

    1. Médiakódoló neve Media Encoder Standard

    2. Előre beállított tartalom adaptív többszörös sávszélességű MP4 kódolása

    3. Feladatnév Media Encoder Standard Video1.mp4feldolgozása

    4. Kimeneti adathordozó adategységének neveVideo1.mp4 – Media Encoder Standard kódolása

      Képernyőkép az eszközkódolás oldaláról.

  6. Kattintson a Létrehozás gombra.

  7. Ekkor megjelenik egy sáv, amelyen a Kódolás feladat van hozzáadva, kattintson erre a sávra, és megjelenik egy panel, amelyen a Kódolás állapota látható.

    Képernyőkép a hozzáadott kódolási feladat címkével ellátott értesítési sávról.

    Képernyőkép a kódoló feldolgozási oldaláról.

  8. Várjon, amíg a feladat befejeződik. Miután elkészült, nyugodtan zárja be a panelt a panel jobb felső sarkában található "X" jellel.

    Képernyőkép a folyamatjelzőről, amelyen az állapot befejeződött.

    Képernyőkép a médiakódoló feldolgozási oldalának felső menüjéről.

    Fontos

    Ez a videó fájlméretétől függ. Ez a folyamat hosszabb időt vehet igénybe.

  9. Most, hogy létrejött a videó kódolt verziója, közzéteheti, hogy akadálymentes legyen. Ehhez kattintson az Eszközök kék hivatkozásra az Eszközök lapra való visszatéréshez.

    Képernyőkép az Azure Portalról. Az eszközök hivatkozás ki van emelve.

  10. A videó egy másik, többbites mp4-es eszköztípussal együtt jelenik meg.

    Képernyőkép a Microsoft Azure-eszközök menüről.

    Megjegyzés

    Észreveheti, hogy az új objektum a kezdeti videó mellett Ismeretlen, és mérete 0 bájt, csak frissítse az ablakot a frissítéshez.

  11. Kattintson erre az új objektumra.

    Képernyőkép a könyvtár adategységeinek listájáról.

  12. A korábban használt panelhez hasonló panel jelenik meg, csak ez egy másik objektum. Kattintson a lap felső részén található Közzététel gombra.

    Képernyőkép a felső menüsorról. A Közzététel gomb ki van emelve.

  13. A rendszer kérni fogja, hogy állítson be egy Locatort, amely a belépési pont, hogy fájl/s legyen az objektumokban. A forgatókönyvben adja meg a következő tulajdonságokat:

    1. Lokátor típusa>Progresszív.

    2. A dátum és az idő az aktuális dátumtól kezdve egy jövőbeli időpontra (ebben az esetben száz évre) lesz beállítva. Hagyja változatlanul, vagy módosítsa a megfelelőre.

    Megjegyzés

    A Lokátorokról és a választható lehetőségekről az Azure Media Services dokumentációjában talál további információt.

  14. A panel alján kattintson a Hozzáadás gombra.

    Képernyőkép a könyvtárlistákról a közzétenni kívánt adategységet tartalmazó párbeszédpanellel.

  15. A videó most már közzé van téve, és a végpontjával streamelhető. A lap további része a Fájlok szakasz. Itt lesznek a videó különböző kódolású verziói. Válassza ki a lehető legnagyobb felbontást (az alábbi képen a 1920x960-os fájl látható), majd megjelenik egy jobb oldali panel. Itt megtalálja a letöltési URL-címet. Másolja ki ezt a végpontot , mert később használni fogja a kódban.

    Képernyőkép a Microsoft Azure Files szakaszról.

    Képernyőkép az eszközinformációs oldalról.

    Megjegyzés

    A Lejátszás gombra kattintva lejátszhatja és tesztelheti a videót.

  16. Most fel kell töltenie a laborban használni kívánt második videót. Kövesse a fenti lépéseket, és ismételje meg ugyanezt a folyamatot a második videó esetében is. Győződjön meg arról, hogy a második végpontot is másolja. Az alábbi hivatkozásra kattintva letölthet egy második videót.

  17. Miután mindkét videót közzétette, készen áll arra, hogy továbblépjen a következő fejezetre.

3. fejezet – A Unity-projekt létrehozása

Az alábbiakban egy tipikusan a Mixed Reality való fejlesztésre állítottuk be, és mint ilyen, jó sablon más projektekhez.

  1. Nyissa meg a Unityt , és kattintson az Új gombra.

    Képernyőkép a Unity-projektek lapról. Az Új gomb ki van emelve.

  2. Most meg kell adnia egy Unity-projektnevet, és be kell szúrnia MR_360VideoStreaming.. Győződjön meg arról, hogy a projekttípus 3D értékre van állítva. Állítsa a Hely értéket az Ön számára megfelelő helyre (ne feledje, a gyökérkönyvtárakhoz való közelebbi beállítás jobb). Ezután kattintson a Projekt létrehozása elemre.

    Képernyőkép a Unity új projektek oldaláról.

  3. Ha a Unity meg van nyitva, érdemes ellenőrizni, hogy az alapértelmezett SzkriptszerkesztőVisual Studióra van-e állítva. Lépjen a Beállításokszerkesztése elemre, majd az új ablakban lépjen a Külső eszközök elemre. Módosítsa a Külső szkriptszerkesztőtVisual Studio 2017-re. Zárja be a Beállítások ablakot.

    Képernyőkép a külső szkriptszerkesztő menüről. A Visual Studio 2017 ki van jelölve.

  4. Ezután lépjen a Fájlbuildelési beállításai területre, és váltson Univerzális Windows-platform platformra aPlatformváltás gombra kattintva.

  5. Győződjön meg arról is, hogy:

    1. A Céleszköz bármely eszköz értékre van állítva .

    2. A build típusaD3D értékre van állítva.

    3. Az SDK a Legújabb telepített értékre van állítva.

    4. A Visual Studio verziója a Legújabb telepítve értékre van állítva.

    5. A Build and Run (Létrehozás és futtatás) beállítás helyi gépre van állítva.

    6. Ne aggódjon a Jelenetek beállítása miatt, mivel ezeket később fogja beállítani.

    7. A többi beállításnak egyelőre alapértelmezettként kell maradnia.

      Képernyőkép a Unity buildelési beállításainak képernyőről.

  6. A Build Settings (Összeállítási beállítások ) ablakban kattintson a Player Settings (Lejátszó beállításai ) gombra. Ekkor megnyílik a kapcsolódó panel azon a helyen, ahol az Inspector található.

  7. Ebben a panelen ellenőrizni kell néhány beállítást:

    1. Az Egyéb beállítások lapon:

      1. A szkriptelésifuttatókörnyezet verziójánakstabilnak kell lennie (.NET 3.5-ös egyenértékű).

      2. A szkriptelési háttérrendszernek.NET-nek kell lennie.

      3. Az API-kompatibilitási szintnek.NET 4.6-osnak kell lennie.

        Képernyőkép a Beállítások Univerzális Windows-platform lapról.

    2. A panelen lejjebb, az XR-beállítások területen (amely a Közzétételi beállítások alatt található) jelölje be a Támogatott virtuális valóság jelölőnégyzetet, és győződjön meg arról, hogy a Windows Mixed Reality SDK hozzá van adva.

      Képernyőkép a Unity X R-beállítások képernyőről.

    3. A Közzétételi beállítások lapon, a Képességek területen ellenőrizze a következőt:

      • InternetClient

        Képernyőkép a Képességek képernyőről. Az internetügyfél be van jelölve.

  8. Miután végrehajtotta ezeket a módosításokat, zárja be a Build Settings (Létrehozási beállítások ) ablakot.

  9. Mentse a Projektfájlmentése projektet.

4. fejezet – Az InsideOutSphere Unity-csomag importálása

Fontos

Ha ki szeretné hagyni a kurzus Unity Set up összetevőjét, és közvetlenül a kódba szeretne lépni, nyugodtan töltse le ezt a .unitypackage csomagot, importálja a projektbe egyéni csomagként, majd folytassa az 5. fejezettel. Továbbra is létre kell hoznia egy Unity-projektet.

Ehhez a kurzushoz le kell töltenie egy InsideOutSphere.unitypackage nevű Unity Asset-csomagot.

A unitypackage importálása:

  1. Az Előtted lévő Unity irányítópulton kattintson a képernyő tetején lévő menüBen található Eszközök elemre, majd kattintson az Egyéni csomag > importálása elemre.

    Képernyőkép az Eszközök menüről. Meg van nyitva az importálási csomag menüje. Az egyéni csomag ki van jelölve.

  2. A fájlválasztóval válassza ki az InsideOutSphere.unitypackage csomagot, és kattintson a Megnyitás gombra. Ekkor megjelenik az eszköz összetevőinek listája. Az Importálás gombra kattintva erősítse meg az importálást.

    Képernyőkép a Unity-csomag importálása képernyőről.

  3. Miután végzett az importálással, három új mappát fog látni, az Anyagok, a Modellek és az Előfabák bekerült az Eszközök mappába. Ez a fajta mappastruktúra jellemző egy Unity-projektre.

    Képernyőkép az eszközök mappáról.

    1. Nyissa meg a Modellek mappát, és látni fogja, hogy az InsideOutSphere-modell importálása megtörtént.

    2. Az Anyagok mappában megtalálható az InsideOutSpheres anyag lambert1, valamint egy ButtonMaterial nevű anyag, amelyet a GazeButton használ, amelyet hamarosan látni fog.

    3. A Prefabs mappa tartalmazza az InsideOutSphere előfabot, amely az InsideOutSpheremodellt és a GazeButtont is tartalmazza.

    4. A program nem tartalmaz kódot, a kódot a tanfolyam követésével fogja megírni.

  4. A hierarchián belül válassza ki a Fő kamera objektumot, és frissítse a következő összetevőket:

    1. Átalakítás

      1. Pozíció = X: 0, Y: 0, Z: 0.

      2. Forgatás = X: 0, Y: 0, Z: 0.

      3. Skálázás X: 1, Y: 1, Z: 1.

    2. Fényképezőgép

      1. Jelzők törlése: Egyszínű.

      2. Vágósíkok: Közel: 0,1, Távol: 6.

        Képernyőkép az Inspector képernyőről.

  5. Lépjen a Prefab mappába, majd húzza az InsideOutSphere előfabját a Hierarchia panelre.

    Képernyőkép a Prefab mappamenüről és a fejlesztői környezetről.

  6. Bontsa ki a hierarchiaInsideOutSphere objektumát a mellette lévő kis nyílra kattintva. Megjelenik alatta egy GazeButton nevű gyermekobjektum. Ezzel megváltoztatja a jeleneteket és így a videókat.

    Képernyőkép a hierarchia lapról.

  7. Az Inspector ablakban kattintson az InsideOutSphere Átalakítás összetevőjére, és győződjön meg arról, hogy a következő tulajdonságok vannak beállítva:

Átalakítás – Pozíció

X Y Z
0 0 0

Átalakítás – Forgatás

X Y Z
0 -50 0

Átalakítás – Skálázás

X Y Z
0 0 0

Képernyőkép az Inside Out Sphere-hez megnyitott Inspector képernyőről.

  1. Kattintson a GazeButton gyermekobjektumra, és állítsa be az átalakítást az alábbiak szerint:

Átalakítás – Pozíció

X Y Z
3,6 1.3 0

Átalakítás – Forgatás

X Y Z
0 0 0

Átalakítás – Skálázás

X Y Z
1 1 1

Képernyőkép a jelenet lap megnyitásáról.

5. fejezet – A VideoController-osztály létrehozása

A VideoController osztály üzemelteti azt a két videovégpontot, amelyek a tartalom Azure Media Service-ből való streameléséhez lesznek használva.

Az osztály létrehozása:

  1. Kattintson a jobb gombbal az Eszköz mappára a Projekt panelen, majd kattintson a Mappa létrehozása >parancsra. Nevezze el a szkriptek mappát.

    Képernyőkép az eszközmappa menüjéről. A létrehozás menü meg van nyitva, és a mappa ki van jelölve.

    Képernyőkép a projekt lapról. Az Eszközök mappa ki van jelölve.

  2. Kattintson duplán a Szkriptek mappára a megnyitásához.

  3. Kattintson a jobb gombbal a mappába, majd kattintson a C# szkript létrehozása >parancsra. Nevezze el a VideoController szkriptet.

    Képernyőkép a Video Controller nevű fájlról.

  4. Kattintson duplán az új VideoController-szkriptre a Visual Studio 2017 megnyitásához.

    Képernyőkép a Video Controller-fájl kódról.

  5. Frissítse a kódfájl tetején található névtereket az alábbiak szerint:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Adja meg a következő változókat a VideoController osztályban az Awake() metódussal együtt:

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static VideoController instance; 
    
        /// <summary> 
        /// Reference to the Camera VideoPlayer Component.
        /// </summary> 
        private VideoPlayer videoPlayer; 
    
        /// <summary>
        /// Reference to the Camera AudioSource Component.
        /// </summary> 
        private AudioSource audioSource; 
    
        /// <summary> 
        /// Reference to the texture used to project the video streaming 
        /// </summary> 
        private RenderTexture videoStreamRenderTexture;
    
        /// <summary>
        /// Insert here the first video endpoint
        /// </summary>
        private string video1endpoint = "-- Insert video 1 Endpoint here --";
    
        /// <summary>
        /// Insert here the second video endpoint
        /// </summary>
        private string video2endpoint = "-- Insert video 2 Endpoint here --";
    
        /// <summary> 
        /// Reference to the Inside-Out Sphere. 
        /// </summary> 
        public GameObject sphere;
    
        void Awake()
        {
            instance = this;
        }
    
  7. Most adhatja meg a végpontokat az Azure Media Service-videókból:

    1. Az első a video1endpoint változóba.

    2. A második a video2endpoint változóban.

    Figyelmeztetés

    Ismert probléma merült fel a Https használata a Unityben a 2017.4.1f1-es verzióval. Ha a videók lejátszás közben hibát jeleznek, próbálkozzon a "http" használatával.

  8. Ezután szerkeszteni kell a Start() metódust. Ez a módszer minden alkalommal aktiválódik, amikor a felhasználó bekapcsolja a jelenetet (következésképpen a videót) a Tekintet gombra kattintva.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. A Start() metódust követve szúrja be a PlayVideo()IEnumerator metódust, amellyel a videók zökkenőmentesen indíthatók el (így nem látható dadogás).

        private IEnumerator PlayVideo()
        {
            // create a new render texture to display the video 
            videoStreamRenderTexture = new RenderTexture(2160, 1440, 32, RenderTextureFormat.ARGB32);
    
            videoStreamRenderTexture.Create();
    
            // assign the render texture to the object material 
            Material sphereMaterial = sphere.GetComponent<Renderer>().sharedMaterial;
    
            //create a VideoPlayer component 
            videoPlayer = gameObject.AddComponent<VideoPlayer>();
    
            // Set the video to loop. 
            videoPlayer.isLooping = true;
    
            // Set the VideoPlayer component to play the video from the texture 
            videoPlayer.renderMode = VideoRenderMode.RenderTexture;
    
            videoPlayer.targetTexture = videoStreamRenderTexture;
    
            // Add AudioSource 
            audioSource = gameObject.AddComponent<AudioSource>();
    
            // Pause Audio play on Awake 
            audioSource.playOnAwake = true;
            audioSource.Pause();
    
            // Set Audio Output to AudioSource 
            videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource;
            videoPlayer.source = VideoSource.Url;
    
            // Assign the Audio from Video to AudioSource to be played 
            videoPlayer.EnableAudioTrack(0, true);
            videoPlayer.SetTargetAudioSource(0, audioSource);
    
            // Assign the video Url depending on the current scene 
            switch (SceneManager.GetActiveScene().name)
            {
                case "VideoScene1":
                    videoPlayer.url = video1endpoint;
                    break;
    
                case "VideoScene2":
                    videoPlayer.url = video2endpoint;
                    break;
    
                default:
                    break;
            }
    
            //Set video To Play then prepare Audio to prevent Buffering 
            videoPlayer.Prepare();
    
            while (!videoPlayer.isPrepared)
            {
                yield return null;
            }
    
            sphereMaterial.mainTexture = videoStreamRenderTexture;
    
            //Play Video 
            videoPlayer.Play();
    
            //Play Sound 
            audioSource.Play();
    
            while (videoPlayer.isPlaying)
            {
                yield return null;
            }
        }
    
  10. Ehhez az osztályhoz az utolsó szükséges metódus a ChangeScene() metódus, amely a jelenetek közötti felcseréléshez lesz használva.

        public void ChangeScene()
        {
            SceneManager.LoadScene(SceneManager.GetActiveScene().name == "VideoScene1" ? "VideoScene2" : "VideoScene1");
        }
    

    Tipp

    A ChangeScene() metódus a feltételes operátor nevű hasznos C#-funkciót használja. Ez lehetővé teszi a feltételek ellenőrzését, majd az ellenőrzés eredménye alapján visszaadott értékeket, mindezt egyetlen utasításban. A feltételes operátorral kapcsolatos további információkért kövesse ezt a hivatkozást.

  11. Mentse a módosításokat a Visual Studióban, mielőtt visszatér a Unitybe.

  12. A Unity-szerkesztőben kattintson és húzza a VideoController osztályt [from]{.underline} a Scripts mappából a Hierarchia panel Fő kamera objektumába.

  13. Kattintson a fő kamerára , és nézze meg az Inspector Panelt. Megfigyelheti, hogy az újonnan hozzáadott Szkript összetevőben van egy üres értékkel rendelkező mező. Ez egy referenciamező, amely a kódban lévő nyilvános változókat célozza meg.

  14. Húzza az InsideOutSphere objektumot a Hierarchia panelről a Sphere-pontra az alábbi képen látható módon.

    Képernyőkép a hierarchia menüről. A fő kamera ki van jelölve.Képernyőkép a Sphere-pontról.

6. fejezet – A Tekintet osztály létrehozása

Ez az osztály felelős egy Raycast létrehozásáért, amely előre lesz vetve a fő kameráról, és észleli, hogy a felhasználó melyik objektumot nézi. Ebben az esetben a Raycastnak azonosítania kell, hogy a felhasználó a gazeButton objektumot pillantja-e meg a jelenetben, és aktiválnia kell egy viselkedést.

Az osztály létrehozása:

  1. Nyissa meg a korábban létrehozott Szkriptek mappát.

  2. Kattintson a jobb gombbal a Projekt panel C#-szkriptlétrehozása elemére. Nevezze el a szkriptet a Gaze névvel.

  3. Kattintson duplán az új Gaze szkriptre a Visual Studio 2017 megnyitásához.

  4. Győződjön meg arról, hogy a következő névtér található a szkript tetején, és távolítsa el a többit:

    using UnityEngine;
    
  5. Ezután adja hozzá a következő változókat a Gaze osztályban:

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static Gaze instance;
    
        /// <summary> 
        /// Provides a reference to the object the user is currently looking at. 
        /// </summary> 
        public GameObject FocusedGameObject { get; private set; }
    
        /// <summary> 
        /// Provides a reference to compare whether the user is still looking at 
        /// the same object (and has not looked away). 
        /// </summary> 
        private GameObject oldFocusedObject = null;
    
        /// <summary> 
        /// Max Ray Distance 
        /// </summary> 
        float gazeMaxDistance = 300;
    
        /// <summary> 
        /// Provides whether an object has been successfully hit by the raycast. 
        /// </summary> 
        public bool Hit { get; private set; }
    
  6. Az Awake() és a Start() metódus kódját most már hozzá kell adni.

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Adja hozzá a következő kódot az Update() metódushoz a Raycast kivetítéséhez és a célütem észleléséhez:

        void Update()
        {
            // Set the old focused gameobject. 
            oldFocusedObject = FocusedGameObject;
            RaycastHit hitInfo;
    
            // Initialise Raycasting. 
            Hit = Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hitInfo, gazeMaxDistance);
    
            // Check whether raycast has hit. 
            if (Hit == true)
            {
                // Check whether the hit has a collider. 
                if (hitInfo.collider != null)
                {
                    // Set the focused object with what the user just looked at. 
                    FocusedGameObject = hitInfo.collider.gameObject;
                }
                else
                {
                    // Object looked on is not valid, set focused gameobject to null. 
                    FocusedGameObject = null;
                }
            }
            else
            {
                // No object looked upon, set focused gameobject to null.
                FocusedGameObject = null;
            }
    
            // Check whether the previous focused object is this same 
            // object (so to stop spamming of function). 
            if (FocusedGameObject != oldFocusedObject)
            {
                // Compare whether the new Focused Object has the desired tag we set previously. 
                if (FocusedGameObject.CompareTag("GazeButton"))
                {
                    FocusedGameObject.SetActive(false);
                    VideoController.instance.ChangeScene();
                }
            }
        }
    
  8. Mentse a módosításokat a Visual Studióban, mielőtt visszatér a Unitybe.

  9. Kattintson és húzza a Tekintet osztályt a Szkriptek mappából a Hierarchia panel Fő kamerája objektumába.

7. fejezet – A két Unity-jelenet beállítása

Ennek a fejezetnek az a célja, hogy beállítsa a két jelenetet, és mindegyikben egy videó streamel. Duplikálja a már létrehozott jelenetet, hogy ne kelljen újra beállítania, bár ezután szerkeszteni fogja az új jelenetet, hogy a GazeButton objektum más helyen legyen, és más megjelenésű legyen. Ez bemutatja, hogyan válthat a jelenetek között.

  1. Ehhez lépjen a Fájl > mentési jelenete... elemre. Ekkor megjelenik egy mentési ablak. Kattintson az Új mappa gombra.

    7. fejezet – A két Unity-jelenet beállítása

  2. Nevezze el a Mappát Jelenetek névvel.

  3. A Jelenet mentése ablak továbbra is nyitva lesz. Nyissa meg az újonnan létrehozott Jelenetek mappát.

  4. A Fájlnév: szöveg mezőbe írja be a VideoScene1 kifejezést, majd nyomja le a Mentés gombot.

  5. A Unityben nyissa meg a Jelenetek mappát, és kattintson a bal gombbal a VideoScene1 fájlra. Használja a billentyűzetet, és nyomja le a Ctrl + D billentyűkombinációt , és duplikálja ezt a jelenetet

    Tipp

    A Duplikálás parancs a Duplikátum szerkesztése >parancsra lépve is végrehajtható.

  6. A Unity automatikusan növeli a jelenetnevek számát, de mindenképpen ellenőrzi, hogy megegyezik-e a korábban beszúrt kóddal.

    Rendelkeznie kell a VideoScene1 és a VideoScene2 fájlokkal.

  7. A két jelenettel lépjen a Fájl > buildelési beállításai területre. Ha meg van nyitva a Build Settings ablak, húzza a jeleneteket a Jelenetek a Buildben szakaszba .

    Képernyőkép a Build Settings (Létrehozási beállítások) ablakról.

    Tipp

    Mindkét jelenetet kiválaszthatja a Jelenetek mappából a Ctrl gomb lenyomva tartásával, majd az egyes jelenetek bal gombbal való kattintásával, végül mindkettőt áthúzva.

  8. Zárja be a Build Settings (Létrehozási beállítások ) ablakot, és kattintson duplán a VideoScene2 elemre.

  9. Ha a második jelenet meg van nyitva, kattintson az InsideOutSphereGazeButton gyermekobjektumára, és állítsa be az átalakítást az alábbiak szerint:

Átalakítás – Pozíció

X Y Z
0 1.3 3,6

Átalakítás – Forgatás

X Y Z
0 0 0

Átalakítás – Skálázás

X Y Z
1 1 1
  1. Ha a GazeButton gyermek még mindig ki van jelölve, tekintse meg az Inspector és a Mesh szűrőt. Kattintson a Mesh referenciamező melletti kis célra:

    Képernyőkép a Tekintet gomb felügyelő képernyőjén.

  2. Ekkor megjelenik a Rács kiválasztása előugró ablak. Kattintson duplán a Kockahálóra az Eszközök listából.

    Képernyőkép a Rács kiválasztása előugró ablakról.

  3. A Hálószűrő frissül, és mostantól kocka lesz. Most kattintson a Fogaskerék ikonra a Sphere Collider mellett, majd kattintson az Összetevő eltávolítása elemre a ütköző törléséhez ebből az objektumból.

    Képernyőkép a Sphere Collider menüről. Az Összetevő eltávolítása lehetőség ki van jelölve.

  4. Ha a GazeButton továbbra is ki van jelölve, kattintson az Összetevő hozzáadása gombra az Inspector alján. A keresőmezőbe írja be a mezőt, és a Box Collider egy lehetőség lesz – erre kattintva hozzáadhat egy Box Collidert a GazeButton objektumhoz.

    Képernyőkép az Összetevő hozzáadása keresőmezőről.

  5. A GazeButton most részben frissült, hogy másképp nézzen ki, most azonban létre fog hozni egy új Anyagot, hogy teljesen másnak tűnjön, és könnyebb felismerni, mint egy másik objektumot, mint az első jelenetben.

  6. Lépjen az Anyagok mappába a Projekt panelen. Duplikálja a ButtonMaterial Material elemet (nyomja le a CtrlDbillentyűkombinációt + a billentyűzeten, vagy kattintson a bal gombbal az Anyag elemre, majd a Fájl szerkesztése menüben válassza a Duplikálás lehetőséget).

    Képernyőkép a projektlap Anyag mappáról.Képernyőkép a szerkesztési menüről, amelyen a duplikált elem van kijelölve.

  7. Válassza ki az új ButtonMaterial Anyagot (itt ButtonMaterial 1 néven), majd az Inspector területen kattintson az Albedo színablakra. Ekkor megjelenik egy előugró ablak, ahol kiválaszthat egy másik színt (válassza ki a kívánt színt), majd zárja be az előugró ablakot. Az Anyag a saját példánya lesz, és különbözik az eredeti példánytól.

    Képernyőkép a színkijelölés előugró ablakáról.

  8. Húzza az új Anyagot a GazeButton gyermekre, hogy most teljesen frissítse a megjelenését, hogy könnyen megkülönböztethető legyen az első jelenetek gombtól.

    Képernyőkép a projektszerkesztő jelenetlapról.

  9. Ezen a ponton tesztelheti a projektet a Szerkesztőben az UWP-projekt létrehozása előtt.

    • Nyomja le a Lejátszás gombot a Szerkesztőben , és viselje a headsetet.

      Képernyőkép a lejátszás, a szüneteltetés és a kihagyás gombról. A lejátszás gomb ki van emelve.

  10. Tekintse meg a két GazeButton objektumot, hogy váltson az első és a második videó között.

8. fejezet – Az UWP-megoldás létrehozása

Miután meggyőződett arról, hogy a szerkesztőben nincsenek hibák, készen áll a buildelésre.

Buildelés:

  1. Mentse az aktuális jelenetet a Fájl > mentése gombra kattintva.

  2. Jelölje be a Unity C#-projektek nevű jelölőnégyzetet (ez azért fontos, mert lehetővé teszi az osztályok szerkesztését a buildelés befejezése után).

  3. Lépjen a Fájl > buildelési beállításai területre, és kattintson a Build elemre.

  4. A rendszer kérni fogja, hogy válassza ki azt a mappát, amelyben létre szeretné tenni a megoldást.

  5. Hozzon létre egy BUILDS mappát, és a mappán belül hozzon létre egy másik mappát a kívánt névvel.

  6. Kattintson az új mappára, majd a Mappa kiválasztása elemre, így a mappa kiválasztásához indítsa el a buildet az adott helyen.

    Képernyőkép a kiemelt BUILDS mappáról.Képernyőkép a Kiemelt Video Streaming Build mappáról.

  7. Ha a Unity befejezte az építést (eltarthat egy ideig), megnyit egy Fájlkezelő ablakot a build helyén.

9. fejezet – Üzembe helyezés helyi gépen

A build befejezése után egy Fájlkezelő ablak jelenik meg a build helyén. Nyissa meg a nevű és a mappába épített mappát, majd kattintson duplán a mappában lévő megoldásfájlra a megoldás Visual Studio 2017-ben való megnyitásához.

Az egyetlen teendője az alkalmazás központi telepítése a számítógépen (vagy a helyi gépen).

Üzembe helyezés a helyi gépen:

  1. A Visual Studio 2017-ben nyissa meg az imént létrehozott megoldásfájlt.

  2. A Megoldásplatformon válassza az x86, Helyi gép lehetőséget.

  3. A Megoldás konfigurációja területen válassza a Hibakeresés lehetőséget.

    Képernyőkép a Megoldáskonfiguráció menüről.

  4. Most minden csomagot vissza kell állítania a megoldásba. Kattintson a jobb gombbal a megoldásra, majd kattintson a Megoldás nuGet-csomagjainak visszaállítása... elemre.

    Megjegyzés

    Ennek az az oka, hogy a Unity által létrehozott csomagokat meg kell célozni a helyi gépek referenciáinak használatához.

  5. Nyissa meg a Build (Build) menüt , és kattintson a Deploy Solution (Megoldás üzembe helyezése ) elemre az alkalmazás gépre való közvetlen telepítéséhez. A Visual Studio először létrehozza és üzembe helyezi az alkalmazást.

  6. Az alkalmazásnak ekkor meg kell jelennie a telepített alkalmazások listájában, készen áll az indításra.

    Képernyőkép a telepített alkalmazások listájáról.

A Mixed Reality alkalmazás futtatásakor az alkalmazáson belül használt InsideOutSphere-modellben fog tartózkodni. Ez a gömb lesz, ahol a videó lesz streamelt, amely egy 360 fokos nézetet, a bejövő videó (amely filmezett az ilyen típusú perspektívát). Ne lepődjön meg, ha a videó betöltése néhány másodpercet vesz igénybe, az alkalmazás a rendelkezésre álló internetes sebességnek van kitéve, mivel a videót le kell tölteni, majd le kell tölteni, hogy streameljen az alkalmazásba. Ha készen áll, váltson jelenetet, és nyissa meg a második videót a vörös gömbre tekintve! Akkor nyugodtan menjen vissza, a kék kockát használva a második jelenetben!

A kész Azure Media Service-alkalmazás

Gratulálunk, olyan vegyes valósági alkalmazást készített, amely az Azure Media Service-t használja 360 videó streameléséhez.

Képernyőkép egy példa vegyes valósági alkalmazásról.

Képernyőkép egy vegyes valósági alkalmazás példájáról.

Bónusz gyakorlatok

1. gyakorlat

Ebben az oktatóanyagban teljes mértékben csak egyetlen jelenettel módosíthatók a videók. Kísérletezzen az alkalmazással, és alakítsa egyetlen jelenetté! Talán még egy videót is hozzáad a mixhez.

2. gyakorlat

Kísérletezzen az Azure-ral és a Unityvel, és próbálja meg megvalósítani, hogy az alkalmazás automatikusan kiválasztjon egy másik fájlméretű videót az internetkapcsolat erősségétől függően.