Vizio Smart TV: A Comprehensive Guide To Start Initial App Development
Introduction
Vizio (Vizio Holding Corp.) is an American company that designs and sells TVs, sound bars, and more. Founded in 2002 and headquartered in Irvine, California, Vizio also offers viewer data and advertising services. Television is the primary product of this company, and in 2007 it became the largest TV seller in North America. This blog delves into the technical aspects of Vizio Smart TVs and the development of their apps, highlighting the evolution and impact on user experience.
Vizio Developer Ecosystem
The Vizio Developer Ecosystem provides open API access, enabling developers to create custom apps and integrations. Vizio collaborates with content and technology partners to offer unique apps and services. Comprehensive support includes detailed documentation, technical assistance, and development tools.
Vizio TV Platform for Apps
- Chromium-Based: TV apps run on a Chromium browser optimized for a 10-foot user interface.
- Remote Debugging: Utilize Chromium’s remote debugging tools.
- HTML5 Apps: Built for the 10-foot experience, running in the Chromium environment.
- Deep Linking: Launch content from Vizio Mobile directly into HTML5 apps.
- JavaScript Library: Apps must integrate with Vizio’s library for IR remote control and platform compliance.
Read More: Best Practices for Developing an OTT App on Roku
App Development for Vizio Smart TV
Registration and Access
Before beginning development, clients must register their applications with Vizio to access the companion library functionality. They need to provide both the pre-prod and prod URLs for their HTML5 TV app during this process. These URLs are essential for authentication within the Vizio framework.
Note: You will need a username and password to access App submission form which will be provided by Vizio during registration or It will be available in the documents shared by Vizio.
Integration of the Vizio Library
To access the Companion Library use the following URL on the local server:
"https//:"+"localhost:12345/scfs/cl/js/vizio-companion-lib.js"
Note: The above URL is written in two parts, concatenate it while using it in the code.
IMPORTANT: The app must initialize and bind all callbacks, including the primary VIZIO_LIBRARY_DID_LOAD event, before loading the companion library. This ensures that all handlers are ready when the event triggers. Simply place your app’s JavaScript calls before loading the companion library.
//---Vizio Library Integration------//
function loadVizioSDK(callback: any) {
var script = document.createElement("script");
script.src = "https//:" + "localhost:12345/scfs/cl/js/vizio-companion-lib.js";
document.body.appendChild(script);
script.onload = callback;
}
loadVizioSDK(function() {
document.addEventListener(
"VIZIO_LIBRARY_DID_LOAD",
function(e) {
// Closed Captions
window.VIZIO.setClosedCaptionHandler(function(isCCEnabled: any) {
window.VIZIO.setClosedCaptionHandler(function(isCCEnabled) {
if (isCCEnabled) {
console.log("Closed captioning enabled");
document.getElementById("cc-state").innerHTML = "ON";
} else {
console.log("Closed captioning disabled");
document.getElementById("cc-state").innerHTML = "OFF";
}
});
// Device ID
window.VIZIO.getDeviceId(function(deviceId: any) {
localStorage.setItem("deviceid", deviceId);
});
},
true
);
// TTS
document.addEventListener("VIZIO_TTS_ENABLED", function(e) {
console.log(e, "TTS ENABLED");
document.getElementById("tts-state").innerHTML = "ON";
}, false);
document.addEventListener("VIZIO_TTS_DISABLED", function(e) {
console.log(e, "TTS DISABLED");
document.getElementById("tts-state").innerHTML = "OFF";
}, false);
});
App Installation and Debugging in Vizio TV
The VIZIO platform uses a custom version of the Chromium browser. Smart Cast apps are built with HTML5 and JavaScript. For testing, the app’s full code must be hosted either publicly or locally, and the app URL can be launched in the browser for the target TV.
Enable Developer Mode on Vizio TV
- To enable dev mode contact your VIZIO AIM and provide the TV’s serial number (from the System Information pane).
- Request to switch the TV to a developer configuration.
- Once confirmed, the TV will show “Checking for updates” or “Software Update.”
- After the update, reboot the TV from the System pane.
App Installation In Vizio TV
- Make sure both your TV and laptop are connected to the same Wi-Fi.
- Launch the Chrome browser (Other browsers can be used, but Chrome is recommended for the best experience) on your laptop and open the following URL.
Screen to enter TV’s IP Address
- Enter your TV’s IP address (found in the TV’s network settings) and click “Start Pairing”.
Pick TV’s IP Address from here
- Now, enter the PIN shown on your TV and click to pair.
- Enter the hosted app’s URL in the input box which will come just after the devices are paired and click “Launch” to start the app on your TV.
Enter App URL here
How to Open Debugger
- After the app is installed in Vizio TV, Open a new tab in your browser and enter the following URL: “http://[TV_IP_ADDRESS]:9555/”
Example: http://182.16.26.91:9555/
Page having URL to open debugger
- Now click on the URL starting with “devtools://” to open the debugger for the app.
App Submission to Vizio store
- Ensure that all required feature integrations are implemented and the app is fully tested on VIZIO TVs before submission.
- Contact your App Integration Manager (AIM) for the latest pre-certification checklist for self-testing.
- New App Submission
When ready to submit a new app for VIZIO verification, complete the submission form here.
Enter App details here to store upload
- Assets-Only Submission
For existing apps needing new assets (e.g., on-device icons or app details), use the provisional form here.
Conclusion
Vizio Smart TVs offer a rich platform for both developers and users, combining advanced hardware with a flexible development environment. By understanding the technical details and following the proper procedures for development, installation, and submission, you can leverage Vizio’s ecosystem to create impactful apps and deliver enhanced user experiences. TO THE NEW is your one-stop shop for all your OTT development, Smart TV, and media monetization services. Talk to our experts today.
