Créer une visionneuse vidéo Android Cardboard 360

La réalité augmentée et virtuelle, bien que relativement nouvelle, sont rapidement devenues populaires pour les applications, y compris pour les jeux et l’éducation. Auparavant, je vous ai montré comment installer Cardboard à l'aide du SDK Android et comment créer une visionneuse d'images panoramique. Cet article vous montrera comment utiliser la vidéo à 360 degrés dans vos applications..

Installer

Avant de commencer à créer votre application de visionneuse de vidéos, vous devez cloner le SDK Cardboard Android sur votre ordinateur via Git. Vous pouvez trouver des instructions à ce sujet dans l’article précédent de cette série..

Pour notre exemple, créez un nouveau projet Android avec un SDK minimum d’API 19 (KitKat) et utilisez le Activité vide modèle.

Une fois votre projet de base créé, vous devrez copier le commun, commonwidget et videowidget dossiers du carton SDK à la racine de votre projet. Une fois ces répertoires déplacés, vous devrez les inclure en tant que modules dans votre projet en modifiant votre paramètres.gradle fichier qui ressemble à l'extrait suivant. 

include ': app', ": common", "commonwidget", "videowidget"

Enfin, incluez ces bibliothèques et d’autres nécessaires dans votre projet en ajoutant les lignes suivantes à votre app modules build.gradle déposer sous le les dépendances nœud.

dependencies compile 'com.android.support:appcompat-v7:25.0.0' compile projet (': common') compile projet (': commonwidget') compile projet (': videowidget') compile 'com.google.android. exoplayer: exoplayer: r1.5.10 'compiler' com.google.protobuf.nano: protobuf-javanano: 3.0.0-alpha-7 '

Vous remarquerez que nous avons ajouté la bibliothèque Protocol Buffers de Google, qui facilite la gestion des ressources d’exécution sur le périphérique, et ExoPlayer, une bibliothèque de lecteur vidéo créée par Google. VrVideoView composant est construit sur. Cardboard SDK est nécessaire pour que ces deux bibliothèques fonctionnent, et vous avez peut-être remarqué que la version d'ExoPlayer utilisée est celle de la première version, et non de la deuxième. Elle peut donc générer des conflits si vous utilisez ExoPlayer v2 dans vos propres projets..

Ensuite, nous voudrons mettre à jour notre activity_main.xml fichier pour notre exemple de projet pour inclure un VrVideoView, une Barre de recherche, et un Bouton que nous travaillerons plus tard.

Une fois que vous avez fini de configurer les bibliothèques Cardboard et que vous avez créé la disposition que nous allons utiliser, il est temps de passer au code Java..

Travailler avec du carton et de la vidéo VR

Avant de pouvoir commencer à écrire tout le code qui contrôle l’état de la lecture, la position et le chargement dans votre fichier vidéo 360, nous devons déterminer la source de notre vidéo. Pour ce tutoriel, nous allons simplement créer un les atouts dossier sous le répertoire principal et placez une vidéo 360 à cet endroit. Bien qu'il existe quelques sources pour 360 vidéos en ligne, j'ai inclus une courte vidéo du domaine public de Sea World rapportant une tortue de mer à l'océan dans le projet GitHub qui l'accompagne pour ce tutoriel.. 

Initialisation et structure

Maintenant que vous avez un fichier vidéo à jouer, ouvrez votre Activité principale classe.

Vous devez d’abord déclarer et initialiser le Vue éléments définis par le fichier de mise en page, ainsi que deux booléen valeurs pour garder la trace de l’état muet et de la lecture / pause. De plus, nous placerons un OnClickListener sur notre volume Bouton objet.

Classe publique MainActivity étend AppCompatActivity private VrVideoView mVrVideoView; SeekBar privée mSeekBar; Bouton privé mVolumeButton; privé booléen mIsPaused; privé booléen mIsMuted; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); initViews ();  private void initViews () mVrVideoView = (VrVideoView) findViewById (R.id.video_view); mSeekBar = (SeekBar) findViewById (R.id.seek_bar); mVolumeButton = (Button) findViewById (R.id.btn_volume); mVolumeButton.setOnClickListener (new View.OnClickListener () @Override public void onClick (Affichage de la vue) onVolumeToggleClicked (););  public void playPause ()  public void onVolumeToggleClicked () 

Ensuite, créez une nouvelle classe interne qui s'étend VrVideoEventListener. Cette classe aura cinq méthodes que nous pouvons implémenter pour notre visualiseur vidéo simple.

La classe privée ActivityEventListener étend VrVideoEventListener @Override public void onLoadSuccess () super.onLoadSuccess ();  @Override public void onLoadError (String errorMessage) super.onLoadError (errorMessage);  @Override public void onClick () super.onClick ();  @Override public void onNewFrame () super.onNewFrame ();  @Override public void onCompletion () super.onCompletion (); 

Vous devrez également mettre en œuvre SeekBar.OnSeekBarChangeListener dans votre classe et créer les talons de méthode pour cette interface.

public class MainActivity étend AppCompatActivity implémente SeekBar.OnSeekBarChangeListener … public void onPlayPausePressed ()  public void onVolumeToggleClicked ()  @Override public void onProgressChanged (SeekBar seekB, i

Une fois que vous avez créé cette nouvelle classe interne et Barre de recherche mise en œuvre, associez-les à votre VrVideoView et Barre de recherche, respectivement, à la fin de la initViews () méthode qui a été définie ci-dessus.

mVrVideoView.setEventListener (new ActivityEventListener ()); mSeekBar.setOnSeekBarChangeListener (this);

Il y a encore un élément de configuration à prendre en compte. Vous devrez gérer le cycle de vie de l'activité Android en prenant en charge le onPause (), pour résumer() et onDestroy () méthodes pour mettre en pause ou reprendre le rendu dans le VrVideoView, ou de le fermer complètement. Vous devrez également garder trace de l'état de pause dans ces méthodes.

@Override protected void onPause () super.onPause (); mVrVideoView.pauseRendering (); mIsPaused = true;  @Override protected void onResume () super.onResume (); mVrVideoView.resumeRendering (); mIsPaused = false;  @Override protected void onDestroy () mVrVideoView.shutdown (); super.onDestroy ();  

Maintenant que la configuration initiale de notre classe de tutoriel est terminée, nous pouvons passer au sujet plus intéressant: charger une vidéo, contrôler la lecture et personnaliser l'expérience utilisateur..

Démarrer et contrôler VrVideoView

Étant donné que le chargement d'une vidéo 360 peut durer d'une fraction de seconde à plusieurs secondes, vous devrez gérer le chargement de votre vidéo via une tâche en arrière-plan. Commençons par créer un nouveau AsyncTask cela va créer un nouveau VrVideoView.Options objet, définissez le type d'entrée pour qu'il corresponde au formatage de notre vidéo (dans le cas de ce tutoriel), TYPE_MONO), puis chargez notre vidéo à partir du les atouts annuaire.

la classe VideoLoaderTask étend AsyncTask @Override protected Boolean doInBackground (Void… voids) try VrVideoView.Options options = new VrVideoView.Options (); options.inputType = VrVideoView.Options.TYPE_MONO; mVrVideoView.loadVideoFromAsset ("seaturtle.mp4", options);  catch (IOException e) // Une exception de traitement return true; 

Ensuite, allez dans votre onCreate () méthode et créer une nouvelle instance de cette tâche, puis appeler exécuter() pour le démarrer. Bien qu'il reste encore beaucoup à faire pour maintenir correctement cette tâche, nous l'utilisons simplement localement dans cette méthode pour plus de simplicité et sans souci. AsyncTask considérations relatives au cycle de vie.

VideoLoaderTask mBackgroundVideoLoaderTask = new VideoLoaderTask (); mBackgroundVideoLoaderTask.execute ();

À ce stade, vous devriez pouvoir exécuter votre application et regarder la lecture de la vidéo à 360 ° dans la vue vidéo en carton. Maintenant que cela fonctionne, ajoutons un utilitaire pour notre utilisateur. Retour à la ActivityEventListener objet que vous avez créé précédemment dans ce didacticiel, car nous voudrions en préciser certaines des méthodes. Lorsque la vidéo a été chargée avec succès, nous devons définir la valeur maximale pour notre Barre de recherche, ainsi que de suivre l'état de lecture / pause de notre vidéo.

@Override public void onLoadSuccess () super.onLoadSuccess (); mSeekBar.setMax ((int) mVrVideoView.getDuration ()); mIsPaused = false; 

Pendant la lecture de la vidéo, nous mettrons à jour cette Barre de recherche à travers onNewFrame (), et réinitialiser la vidéo à la position initiale en complément(). Enfin, dans sur clic(), nous allons déclencher notre méthode de lecture / pause.

@Override public void onClick () playPause ();  @Override public void onNewFrame () super.onNewFrame (); mSeekBar.setProgress ((int) mVrVideoView.getCurrentPosition ());  @Override public void onCompletion () // Redémarre la vidéo, lui permettant de mettre en boucle mVrVideoView.seekTo (0); 

En mettant à jour notre Barre de recherche basé sur la lecture est important, nous voudrons également permettre à l'utilisateur de changer où il se trouve dans la vidéo en interagissant avec le Barre de recherche. Nous pouvons le faire en utilisant le SeekBar.OnSeekBarChangeListener interface que nous avons mis en place plus tôt.

@Override public nul onProgressChanged (SeekBar seekBar, int progress, booléen fromUser) if (fromUser) mVrVideoView.seekTo (progress); 

Pour compléter notre VrVideoView contrôles, nous devrons mettre en œuvre les méthodes play / pause et bascule du volume.

public void playPause () if (mIsPaused) mVrVideoView.playVideo ();  else mVrVideoView.pauseVideo ();  mIsPaused =! mIsPaused;  public void onVolumeToggleClicked () mIsMuted =! mIsMuted; mVrVideoView.setVolume (mIsMuted? 0.0f: 1.0f); 

À ce stade, vous devez disposer d’un lecteur vidéo 360 entièrement fonctionnel et interactif dans votre application.. 

Toutefois, si vous faites pivoter votre appareil, vous remarquerez peut-être le comportement indésirable de la vidéo qui redémarre complètement. Nous pouvons résoudre ce problème en travaillant avec Android onSaveInstanceState () et onRestoreInstanceState () pour sauvegarder et réinitialiser l'état de notre VrVideoView.

private static final String STATE_PROGRESS = "state_progress"; private static final String STATE_DURATION = "state_duration"; @Override protected void onSaveInstanceState (Bundle outState) outState.putLong (STATE_PROGRESS, mVrVideoView.getCurrentPosition ()); outState.putLong (STATE_DURATION, mVrVideoView.getDuration ()); super.onSaveInstanceState (outState);  @Override protected void onRestoreInstanceState (Ensemble, savedInstanceState) super.onRestoreInstanceState (savedInstanceState); long progress = savedInstanceState.getLong (STATE_PROGRESS); mVrVideoView.seekTo (progrès); mSeekBar.setMax ((int) savedInstanceState.getLong (STATE_DURATION)); mSeekBar.setProgress ((int) progress); 

Désormais, lorsque le périphérique est pivoté, votre vidéo doit revenir à sa position d'origine et votre utilisateur peut continuer à vivre l'expérience ininterrompue..

Conclusion

VrVideoView de Cardboard SDK nécessite quelques petits détails, mais les parties difficiles, telles que la lecture et l'optimisation, sont gérées pour vous par un composant facile à implémenter. 

Vous devriez maintenant pouvoir ajouter 360 vidéos à vos applications multimédias, offrant ainsi à vos utilisateurs une fonctionnalité intéressante qui enrichit leur expérience. Dans le prochain didacticiel de cette série, nous nous concentrerons sur la nouvelle expérience de Google en matière de RV, appelée Daydream, et sur l'utilisation du contrôleur apparié avec vos applications..

En attendant, consultez certains de nos autres tutoriels sur la réalité virtuelle Android et la réalité augmentée!