PORTING SAMSUNG / LG HTML & REACT App à Vizio: Modifications clés

avril 18, 2025

Introduction

L’adaptation d’une application basée sur la réact conçue à l’origine pour Tizen OS ou LG de Samsung pour fonctionner sur la plate-forme SmartCast de Vizio nécessite des modifications pour s’aligner sur son environnement HTML5 basé sur le chrome. Les développeurs doivent répondre aux différences de comportement d’exécution, de formats d’emballage, d’API spécifiques à la plate-forme et de capacités matérielles. Ce blog décrit les ajustements techniques clés pour une transition en douceur et des performances optimales sur Vizio Smartcast.

1. Différences de plate-forme et considérations clés

Fonctionnalité	Samsung (Tizen)	LG (webOS)	Vizio (smartcast)
Déploiement d’applications	Installé via Tizen Studio ou Tizen Store	Installé via le mode de développeur WebOS ou le magasin de contenu LG	Hébergé sur un serveur Web distant (pas d’installation directe)
Emballage / structure	Usages `.wgt` Les packages incluent des fichiers de configuration spécifiques (par exemple, `config.xml`)	Usages `.ipk` emballage, configuration via `appinfo.json`et les métadonnées connexes	L’application HTML5 / JavaScript hébergée sur un serveur Web (exigences minimales d’emballage)
Support de l’API	API spécifiques à Tizen (par exemple, `webAPIs, avplay, tvinputdevice`)	API spécifiques à webOS, prise en charge des composants de l’interface utilisateur	Caractéristiques standard HTML5 et ECMAScript, propriétaire limité
Voilen	`tizen.tvinputdevice`	`window.webOS`	API HTML5 standard

Remarque clé: Vizio ne prend pas en charge les API spécifiques à Tizen ou WebOS, les développeurs doivent donc utiliser HTML5 et JavaScript standard à la place.

2. Refactorisation de base de code

Pour un guide complet sur le démarrage du développement initial d’applications, reportez-vous à Ce blog.

Ajustements de la structure des fichiers

Samsung / LG: Comprend des fichiers de configuration spécifiques à la plate-forme (Tizen config.xml ou LG appinfo.json).
Vizio: Les développeurs peuvent utiliser la même structure de répertoire de Samsung / LG en supprimant ou en refactoring les fichiers de configuration propriétaire pour s’aligner sur les directives de déploiement SmartCast. Alternativement, ils peuvent consolider les actifs (HTML, CSS, JavaScript) dans une structure de répertoire Web standard.

Gestion des dépendances

Supprimez les dépendances propriétaires comme les appels de service Webapis ou WebOS Luna de Tizen.
Remplacez par des bibliothèques standard qui sont universellement prises en charge par des navigateurs modernes.

Modifications de code obligatoires pour Vizio

Après avoir intégré la bibliothèque Companion, les développeurs doivent mettre à jour le code suivant pour activer ces fonctionnalités.

window.VIZIO.exitApplication()

Mise à jour de la gestion des événements clés

Si tizen.tvinputdevice (Samsung) ou window.webOS (LG) est utilisé pour la détection des événements clés, le remplacer par des écouteurs d’événements JavaScript standard.

useEffect(() => {
   const handleKeyDown = event => {
       if (event.key === "Enter") console.log("Enter pressed");
   };
   document.addEventListener("keydown", handleKeyDown);
   return () => document.removeEventListener("keydown", handleKeyDown);
}, []);

Une fois la bibliothèque complémentaire intégrée (Guide d’intégration de la bibliothèque), la bibliothèque d’accessibilité de texte à dispection Chromevox n’a pas besoin d’être intégrée séparément.

Fonctions et événements de texte vocal:

//To stop a TTS command:
window.VIZIO.Chromevox.play("Hello!");

//To stop a TTS command:
window.VIZIO.Chromevox.play(" ");

Sous-titrage fermé:

//Get Closed Captioning status 
window.VIZIO.setClosedCaptionHandler(callbackFunction) 

//Closed Caption Style 
window.VIZIO.getClosedCaptionStyles(callbackFunction) 
//Ex: 
window.VIZIO.getClosedCaptionStyles(function(captionStyleObj){ console.log(captionStyleObj) });

Informations et connectivité de l’appareil

Obtenez l’ID de l’appareil:

window.VIZIO.getDeviceId(cb)
//Ex:
window.VIZIO.getDeviceId(function(deviceId){
   console.log("Unique Device Id: " + deviceId)
})

Récupérer les informations sur l’appareil:

window.VIZIO.getDeviceInformation() 
//Example Output: 
{ 
"MODEL_NAME": "D43fM-K04", 
"CAPABILITIES": { 
   "VIZIO_PAY_CAPABLE": true, //Capable of VIZIO Account APIs 
   "VIZIO_PLAN_BUNDLES_CAPABLE": true, //Capable of VIZIO Account Bundle Plan Purchases 
}, 
"SYSTEM_INFO": { 
   "MODEL_GROUP": 335, 
   "MODEL_NAME": "D43fM-K04", 
   "SERIAL_NUMBER": "00LBVFK5KX00086", 
   "SERIES": "D", "SIZE": 43, //Screen Size 
   "VERSION": "3.710.30.2-1", //Firmware Version 
   "DIID": "4317801f-fa10-4283-95bf-e8c235384b2a", 
   "CHIPSET_NAME": "5583" }, 
   "SC_INFO": "partner-dev 99.11.1"
 }

Détecter l’état de la connexion:

window.addEventListener('offline', function(e) {
    console.log('The display is offline');
});
window.addEventListener('online', function(e) {
    console.log('The display is online');
});

Handler du langage de l’appareil:

window.VIZIO.setDeviceLanguageHandler(cb) 
//Example: 
window.VIZIO.setDeviceLanguageHandler(function(deviceLanguage){ 
   console.log("setDeviceLanguageHandler language: "+ deviceLanguage) 
});

3. Caractéristiques requises pour la certification

Normes de performance:
- Page d’éclaboussure dans les 10 secondes, prête à naviguer à 15 secondes
- Le joueur se lance dans les 5 secondes et commence la lecture dans les 10 secondes
- L’utilisateur ne doit pas être coincé sur un écran de chargement pendant plus de 3 secondes
Text-vocation (TTS): Doit être disponible sur tous les écrans et les paramètres persistent lors du lancement des applications.
Légendes fermées (CC): Disponible sur tous les contenus, prend en charge les paramètres distants, télévisés et les options intégrées.
Contrôles parentaux: Requis pour le contenu mature / non évalué, avec des options d’activation / désactiver et le blocage du contenu lorsqu’il est activé.
Géo-filtrage: Affichez un écran d’avertissement pour les emplacements non pris en charge et configurez les paramètres du Canada et du Mexique le cas échéant.
Qualité de service (QoS): Assurer la prise en charge de HD, FHD, UHD, Audio Bitstream, Audio alternatif, Dolby Vision et HDR10.
Vizio Companion Library & API Validation: Intégrez la bibliothèque de compagnon Vizio, liez aux événements après vizio_library_did_load, implémentez l’API Changement de contenu et assurez-vous de la prise en charge de l’API IFA pour les applications avec la publicité.

Conclusion

Le portage des applications Samsung / LG Smart TV à Vizio nécessite de supprimer les API spécifiques à la plate-forme et d’adopter des normes web Des technologies comme HTML5, JavaScript et React Hooks. Suivre ces modifications garantit une compatibilité multiplateforme et une amélioration de la maintenabilité pour une expérience utilisateur transparente sur Vizio Smartcast.

Vous cherchez un partenaire de développement Web? N’hésitez pas à parler à nos experts.

Vous avez trouvé cela utile? PARTAGEZ-LE

Source link