User Experience With the Google Cast Platform

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/cast/docs/ux_guidelines"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/cast/docs/ux_guidelines" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/cast/docs/ux_guidelines" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/cast/docs/ux_guidelines?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/cast/docs/ux_guidelines?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/cast/docs/ux_guidelines?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/cast/docs/ux_guidelines?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/cast/docs/ux_guidelines?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/cast/docs/ux_guidelines?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/cast/docs/ux_guidelines?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/cast/docs/ux_guidelines?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/cast/docs/ux_guidelines?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/cast/docs/ux_guidelines?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/cast/docs/ux_guidelines?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/cast/docs/ux_guidelines?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/cast/docs/ux_guidelines?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/cast/docs/ux_guidelines?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/cast/docs/ux_guidelines?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/cast/docs/ux_guidelines?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/cast/docs/ux_guidelines?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/cast/docs/ux_guidelines?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/cast/docs/ux_guidelines?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/cast/docs/ux_guidelines?hl=vi" /><title>User Experience With the Google Cast Platform  |  Google for Developers</title> <meta property="og:title" content="User Experience With the Google Cast Platform  |  Google for Developers"><meta name="description" content="User experience considerations, design principles, and brand guidelines to observe when developing with the Cast SDK."> <meta property="og:description" content="User experience considerations, design principles, and brand guidelines to observe when developing with the Cast SDK."><meta property="og:url" content="https://developers.google.com/cast/docs/ux_guidelines"><meta property="og:image" content="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/opengraph/google-blue.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "User Experience With the Google Cast Platform" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Cast", "item": "https://developers.google.com/cast" },{ "@type": "ListItem", "position": 2, "name": "User Experience With the Google Cast Platform", "item": "https://developers.google.com/cast/docs/ux_guidelines" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="google-blue" type="article" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/cast"> <div class="devsite-product-logo-container" size="medium" > <div class="devsite-product-logo material-icons" aria-hidden="true"> cast </div> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/cast" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Cast" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Cast </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-active"> <a href="https://developers.google.com/cast" track-metadata-eventdetail="https://developers.google.com/cast" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - home" track-metadata-module="primary nav" aria-label="Home, selected" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" > Home </a> </tab> <tab > <a href="https://developers.google.com/cast/chromecast-builtin" track-metadata-eventdetail="https://developers.google.com/cast/chromecast-builtin" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - chromecast built-in" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chromecast built-in" track-name="chromecast built-in" > Chromecast built-in </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Cast" tenant-name="Google for Developers" project-scope="/cast" url-scoped="https://developers.google.com/s/results/cast" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developers.google.com/cast" track-metadata-eventdetail="https://developers.google.com/cast" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - home" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" > Home </a> </tab> <tab class="devsite-active"> <a href="https://developers.google.com/cast/docs/overview" track-metadata-eventdetail="https://developers.google.com/cast/docs/overview" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" aria-label="Guides, selected" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developers.google.com/cast/docs/reference" track-metadata-eventdetail="https://developers.google.com/cast/docs/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://developers.google.com/cast/docs/sample_apps" track-metadata-eventdetail="https://developers.google.com/cast/docs/sample_apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - sample apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Sample Apps" track-name="sample apps" > Sample Apps </a> </tab> <tab > <a href="https://developers.google.com/cast/codelabs" track-metadata-eventdetail="https://developers.google.com/cast/codelabs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - codelabs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Codelabs" track-name="codelabs" > Codelabs </a> </tab> <tab > <a href="https://developers.google.com/cast/support" track-metadata-eventdetail="https://developers.google.com/cast/support" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/cast"> <div class="devsite-product-logo-container" size="medium" > <div class="devsite-product-logo material-icons" aria-hidden="true"> cast </div> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/cast" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Cast" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Cast </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/cast" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Home" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Home </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/cast" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Home" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Home </span> </a> </li> <li class="devsite-nav-item"> <a href="/cast/docs/overview" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/cast/docs/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/cast/docs/sample_apps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Sample Apps" track-name="sample apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sample Apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sample Apps </span> </a> </li> <li class="devsite-nav-item"> <a href="/cast/codelabs" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Codelabs" track-name="codelabs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Codelabs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Codelabs </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/cast/support" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/cast/chromecast-builtin" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Chromecast built-in" track-name="chromecast built-in" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromecast built-in" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromecast built-in </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Cast SDK</span> </div></li> <li class="devsite-nav-item"><a href="/cast/docs/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/cast/docs/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/get-started" ><span class="devsite-nav-text" tooltip>Get Started</span></a></li> <li class="devsite-nav-item"><a href="/cast/docs/registration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/registration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/registration" ><span class="devsite-nav-text" tooltip>Registration</span></a></li> <li class="devsite-nav-item"><a href="/cast/docs/terms" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/terms" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/terms" ><span class="devsite-nav-text" tooltip>Terms of Service</span></a></li> <li class="devsite-nav-item"><a href="/cast/glossary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/glossary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/glossary" ><span class="devsite-nav-text" tooltip>Glossary</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Sender Apps</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop Android Sender App</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/android_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender" ><span class="devsite-nav-text" tooltip>Setup</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/data_disclosure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/data_disclosure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/data_disclosure" ><span class="devsite-nav-text" tooltip>Data Safety Section</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/integrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/integrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/integrate" ><span class="devsite-nav-text" tooltip>Integrate Cast</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/customize_ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/customize_ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/customize_ui" ><span class="devsite-nav-text" tooltip>Customize UI</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/automate_ui_tests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/automate_ui_tests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/automate_ui_tests" ><span class="devsite-nav-text" tooltip>Automate UI Tests</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Advanced Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/android_sender/media_tracks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/media_tracks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/media_tracks" ><span class="devsite-nav-text" tooltip>Media Tracks</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/queueing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/queueing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/queueing" ><span class="devsite-nav-text" tooltip>Queueing</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/intent_to_join" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/intent_to_join" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/intent_to_join" ><span class="devsite-nav-text" tooltip>Intent to Join</span></a></li><li class="devsite-nav-item devsite-nav-new"><a href="/cast/docs/android_sender/output_switcher" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/output_switcher" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/output_switcher" ><span class="devsite-nav-text" tooltip>Output Switcher</span><span class="devsite-nav-icon material-icons" data-icon="new" data-title="New!" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/advanced" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/advanced" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/advanced" ><span class="devsite-nav-text" tooltip>Additional Features</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/cast/docs/android_sender/exoplayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_sender/exoplayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_sender/exoplayer" ><span class="devsite-nav-text" tooltip>ExoPlayer Integration</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop iOS Sender App</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/ios_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender" ><span class="devsite-nav-text" tooltip>Setup</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/app_privacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/app_privacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/app_privacy" ><span class="devsite-nav-text" tooltip>Privacy</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/permissions_and_discovery" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/permissions_and_discovery" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/permissions_and_discovery" ><span class="devsite-nav-text" tooltip>iOS Permissions and Discovery</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/integrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/integrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/integrate" ><span class="devsite-nav-text" tooltip>Integrate Cast</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/customize_ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/customize_ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/customize_ui" ><span class="devsite-nav-text" tooltip>Customize UI</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Advanced Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/media_tracks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/media_tracks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/media_tracks" ><span class="devsite-nav-text" tooltip>Media Tracks</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/queueing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/queueing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/queueing" ><span class="devsite-nav-text" tooltip>Queueing</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/ios_sender/advanced" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ios_sender/advanced" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ios_sender/advanced" ><span class="devsite-nav-text" tooltip>Additional Features</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop Web Sender App</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/web_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_sender" ><span class="devsite-nav-text" tooltip>Setup</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_sender/integrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_sender/integrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_sender/integrate" ><span class="devsite-nav-text" tooltip>Integrate Cast</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_sender/advanced" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_sender/advanced" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_sender/advanced" ><span class="devsite-nav-text" tooltip>Add Advanced Features</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/cast/docs/discovery" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/discovery" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/discovery" ><span class="devsite-nav-text" tooltip>Discovery Troubleshooting</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate Sender v2 App to CAF</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/migrate_v2/ccl_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/migrate_v2/ccl_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/migrate_v2/ccl_sender" ><span class="devsite-nav-text" tooltip>From Cast Companion Library</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/migrate_v2/android_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/migrate_v2/android_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/migrate_v2/android_sender" ><span class="devsite-nav-text" tooltip>From Android SDK v2</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/migrate_v2/ios_sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/migrate_v2/ios_sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/migrate_v2/ios_sender" ><span class="devsite-nav-text" tooltip>From iOS SDK v2</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Receiver Apps</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop Web Receiver App</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/web_receiver" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/styled_receiver" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/styled_receiver" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/styled_receiver" ><span class="devsite-nav-text" tooltip>Styled Media Receiver</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/basic" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/basic" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/basic" ><span class="devsite-nav-text" tooltip>Custom Web Receiver</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/core_features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/core_features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/core_features" ><span class="devsite-nav-text" tooltip>Core Features</span></a></li><li class="devsite-nav-item devsite-nav-new"><a href="/cast/docs/web_receiver/shaka_migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/shaka_migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/shaka_migration" ><span class="devsite-nav-text" tooltip>HLS on Shaka Player Migration</span><span class="devsite-nav-icon material-icons" data-icon="new" data-title="New!" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Customize UI</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/customize_ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/customize_ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/customize_ui" ><span class="devsite-nav-text" tooltip>Style the Player</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/optimize-smart-displays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/optimize-smart-displays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/optimize-smart-displays" ><span class="devsite-nav-text" tooltip>Optimize for Smart Displays</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/media-browse" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/media-browse" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/media-browse" ><span class="devsite-nav-text" tooltip>Media Browse</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Advanced Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/tracks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/tracks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/tracks" ><span class="devsite-nav-text" tooltip>Tracks</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/queueing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/queueing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/queueing" ><span class="devsite-nav-text" tooltip>Queueing</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/ad_breaks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/ad_breaks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/ad_breaks" ><span class="devsite-nav-text" tooltip>Ad Breaks</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/live" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/live" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/live" ><span class="devsite-nav-text" tooltip>Live</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/secondary_image" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/secondary_image" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/secondary_image" ><span class="devsite-nav-text" tooltip>Secondary Image</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Debugging</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/debugging/cast_debug_logger" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/debugging/cast_debug_logger" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/debugging/cast_debug_logger" ><span class="devsite-nav-text" tooltip>Cast Debug Logger</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/debugging/cac_tool" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/debugging/cac_tool" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/debugging/cac_tool" ><span class="devsite-nav-text" tooltip>Command and Control (CaC) Tool</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/debugging/remote_debugger" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/debugging/remote_debugger" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/debugging/remote_debugger" ><span class="devsite-nav-text" tooltip>Chrome Remote Debugger</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/cast/docs/web_receiver/error_codes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/web_receiver/error_codes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/web_receiver/error_codes" ><span class="devsite-nav-text" tooltip>Error Codes</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop Android TV Receiver App</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/core_features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/core_features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/core_features" ><span class="devsite-nav-text" tooltip>Core Features</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Advanced Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/tracks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/tracks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/tracks" ><span class="devsite-nav-text" tooltip>Tracks</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/queueing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/queueing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/queueing" ><span class="devsite-nav-text" tooltip>Queueing</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/ad_breaks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/ad_breaks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/ad_breaks" ><span class="devsite-nav-text" tooltip>Ad Breaks</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/mediasession_validator" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/mediasession_validator" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/mediasession_validator" ><span class="devsite-nav-text" tooltip>Media Session Validator</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/debugging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/debugging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/debugging" ><span class="devsite-nav-text" tooltip>Debugging</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/android_tv_receiver/troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/android_tv_receiver/troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/android_tv_receiver/troubleshooting" ><span class="devsite-nav-text" tooltip>Troubleshooting</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/cast/docs/migrate_v2/receiver" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/migrate_v2/receiver" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/migrate_v2/receiver" ><span class="devsite-nav-text" tooltip>Migrate Receiver v2 to CAF</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Media</span> </div></li> <li class="devsite-nav-item"><a href="/cast/docs/media" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/media" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/media" ><span class="devsite-nav-text" tooltip>Supported Media</span></a></li> <li class="devsite-nav-item"><a href="/cast/docs/media/messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/media/messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/media/messages" ><span class="devsite-nav-text" tooltip>Media Playback Messages</span></a></li> <li class="devsite-nav-item"><a href="/cast/docs/media/streaming_protocols" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/media/streaming_protocols" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/media/streaming_protocols" ><span class="devsite-nav-text" tooltip>Streaming Protocols</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Design Guide</span> </div></li> <li class="devsite-nav-item"><a href="/cast/docs/ux_guidelines" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/ux_guidelines" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/ux_guidelines" ><span class="devsite-nav-text" tooltip>UX Guidelines</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design Checklist</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/design_checklist" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/cast-basics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/cast-basics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/cast-basics" ><span class="devsite-nav-text" tooltip>Cast basics</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/cast-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/cast-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/cast-button" ><span class="devsite-nav-text" tooltip>Cast button</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/cast-dialog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/cast-dialog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/cast-dialog" ><span class="devsite-nav-text" tooltip>Cast dialog</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/cast-autoplay" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/cast-autoplay" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/cast-autoplay" ><span class="devsite-nav-text" tooltip>Cast autoplay</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/sender" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/sender" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/sender" ><span class="devsite-nav-text" tooltip>Sender app</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Receiver app</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/receiver" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/receiver" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/receiver" ><span class="devsite-nav-text" tooltip>Non-Touch</span></a></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/receiver_touch" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/receiver_touch" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/receiver_touch" ><span class="devsite-nav-text" tooltip>Touch</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/cast/docs/design_checklist/changelog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/design_checklist/changelog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/design_checklist/changelog" ><span class="devsite-nav-text" tooltip>Changelog</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Test Cases</span> </div></li> <li class="devsite-nav-item"><a href="/cast/docs/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/testing" ><span class="devsite-nav-text" tooltip>Testing Cast Apps</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Devices</span> </div></li> <li class="devsite-nav-item"><a href="/cast/docs/audio" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /cast/docs/audio" track-type="bookNav" track-name="click" track-metadata-eventdetail="/cast/docs/audio" ><span class="devsite-nav-text" tooltip>Audio Devices</span></a></li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/cast" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Google Cast" > Cast </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/cast/docs/overview" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Guides </a> </li> </ul> </div> <h1 class="devsite-page-title" tabindex="-1"> User Experience With the Google Cast Platform </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Google Cast allows Android, iOS, and Chrome web apps to "stream" content — like video, audio and screen sharing (mirroring) — to Cast-ready devices like:</p> <ul> <li>Google Chromecast</li> <li>TVs that work with Google Cast</li> <li>Speakers that work with Google Cast</li> <li>Smart Displays (a portable touchscreen LCD monitor used as a thin client)</li> <li>Android Tablets</li> </ul> <p>In the Google Cast interaction model, the mobile phone, tablet or laptop is the <strong>sender</strong> which acts as a remote control to control the playback, and the TV, display or docked tablet is the <strong>receiver</strong> which receives instructions from the sender and displays the content from the receiver's Internet connection. All the user actions (taps and swipes) can take place on <strong>both</strong> the sender device or the Web Receiver.</p> <p>Casting relies on the coordination between two or more screens; the sender UI and the receiver UI — they must work together. For example, if you press a button on a mobile device to pause the content, the TV should indicate that it is paused, while the mobile device should provide a play button to resume playback.</p> <h2 id="considerations" data-text="Considerations" tabindex="-1">Considerations</h2> <p>Due to hardware and resource limitations, there are certain restrictions placed on Google Cast-enabled applications:</p> <ul> <li>The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.</li> <li>For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, <em>all</em> actions on the application must be triggered from either a Web Receiver or sender application.</li> <li>Smart Displays support user input through a sender app or via touch on the UI.</li> <li>The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.</li> <li>Cast supports a single concurrent media stream playback in the <code translate="no" dir="ltr"><audio></code> and <code translate="no" dir="ltr"><video></code> tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.</li> </ul> <h2 id="overall_design_principles" data-text="Overall design principles" tabindex="-1">Overall design principles</h2> <p>Keep the following in mind as you develop your user interface.</p> <p><strong>Web Receiver interface:</strong></p> <ul> <li>The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).</li> <li>Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible <a href="/cast/docs/caf_receiver/customize_ui#overscan">overscan</a>.</li> <li>When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.</li> </ul> <p><strong>Sender interface:</strong></p> <ul> <li>The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).</li> <li>Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.</li> </ul> <p>The easiest way to ensure that your Cast application follows these principles is to review your user interface with the Cast <a href="/cast/docs/design_checklist">Design Checklist</a> and <a href="/cast/docs/testing">test your Cast applications</a>.</p> <h2 id="brand_guidelines" data-text="Brand guidelines" tabindex="-1">Brand guidelines</h2> <p>The following Google Cast brand guidelines are for app developers and focus on the additional requirements you must comply with to describe your app in text. For Cast devices brand guidelines see the <a href="https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/">Partner Marketing Hub</a>. You can let others know that your app works with Google Cast by using the term "Google Cast-enabled". However be sure that your app complies with the Cast <a href="/cast/docs/terms">SDK Additional Developer Terms of Service</a> and the <a href="/cast/docs/design_checklist">Design Checklist</a>, and that your use of "Google Cast-enabled" complies with our branding guidelines.</p> <p>You can similarly use a <a href="#google_cast_badge">Google Cast badge</a> as long as your app or device complies with our badging guidelines. Google reserves the right to request that you modify or cease your use of the badge if it does not comply with the brand guidelines.</p> <h3 id="google_cast_in_text" data-text='"Google Cast" in text' tabindex="-1">"Google Cast" in text</h3> <ul> <li>When describing an app (not a hardware product) as being Cast-enabled, use the phrase "Google Cast-enabled". For example: "This app is Google Cast-enabled".</li> <li>When describing a Cast compatible third-party hardware product, use "This {TV} works with Google Cast", "These {speakers} work with Google Cast".</li> <li>When written in text, "Google" and "Cast" should be capitalized.</li> <li>In any marketing asset that uses "Google Cast" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.</li> <li>Don't put Google Cast in the title of the app (such as XYZ Google Cast App).</li> </ul> <h3 id="google_cast-enabled_app_messaging" data-text="Google Cast-enabled app messaging" tabindex="-1">Google Cast-enabled app messaging</h3> <p>You can promote your app as follows:</p> <ul> <li>"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV."</li> <li>"The XYZ app is now available for TVs that work with Google Cast."</li> <li>"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast."</li> <li>"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast."</li> <li>"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast."</li> </ul> <h3 id="google_cast_badge" data-text="Google Cast badge" tabindex="-1">Google Cast badge</h3> <p>You can use the "Google Cast" badges on your website, app store listing, marketing materials and promotional materials to display compatibility with devices that use the Cast protocol.</p> <ul> <li>Don't modify the color, proportions, spacing or any other aspect of the badge image.</li> <li>When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.</li> <li>Don't make the badge the primary element on your page.</li> <li>Keep some distance between the badge and other logos and icons on your page.</li> <li>When used on white, light, or medium-toned background, use a black badge.</li> <li>When used on a black or dark-toned background, use the white badge.</li> <li>Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.</li> </ul> <h3 id="badge_linking" data-text="Badge linking" tabindex="-1">Badge linking</h3> <p>When used online, the Google Cast badge must link to one of the following:</p> <ul> <li>Google's list of Google Cast-enabled apps and products at <a href="http://g.co/castapps">g.co/castapps</a>.</li> <li>A list of products published by you.</li> <li>A specific product detail page published by you.</li> <li>A list of apps published by you.</li> <li>A specific app detail page published by you, on Google Play, or in the Apple App Store.</li> </ul> <h3 id="download_google_cast_badge_assets" data-text="Download Google Cast badge assets" tabindex="-1">Download Google Cast badge assets</h3> <p>The download bundle includes Portable Network Graphics (.png), Adobe Illustrator (.ai), and Enapsulated Postscript (.eps) formats.</p> <ul> <li><a href="https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/">Partner Hub Downloads page</a></li> </ul> <h3 id="preview_google_cast_badges" data-text="Preview Google Cast badges" tabindex="-1">Preview Google Cast badges</h3> <p>Refer to the <a href="https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines">Partner Hub Badges Guidelines page</a> for all available badges and instructions on usage.</p> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-10-24 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-24 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="https://stackoverflow.com/questions/tagged/Google-Cast" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 1)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-stack-overflow.svg" loading="lazy" alt="Stack Overflow"> </picture> <span class="devsite-footer-promo-label"> Stack Overflow </span> </a> <div class="devsite-footer-promo-description">Ask questions under the google-cast tag.</div> </li> <li class="devsite-footer-promo"> <a href="https://github.com/googlecast/" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 2)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-github.svg" loading="lazy" alt="GitHub"> </picture> <span class="devsite-footer-promo-label"> GitHub </span> </a> <div class="devsite-footer-promo-description">View examples of working Cast SDK code.</div> </li> <li class="devsite-footer-promo"> <a href="https://groups.google.com/forum/#!forum/cast-sdk-announcements" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 3)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-google-g.svg" loading="lazy" alt="Google Groups"> </picture> <span class="devsite-footer-promo-label"> Google Groups </span> </a> <div class="devsite-footer-promo-description">Join to get Cast SDK announcements.</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Product Info</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Cast Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/cast/docs/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Terms of Service </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/cast/docs/release-notes" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Release Notes </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Programs</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.womentechmakers.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Women Techmakers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/gdg" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Developer Groups </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/experts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Developer Experts </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/accelerators" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Accelerators </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/gdsc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Google Developer Student Clubs </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.home.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 8)" > Google Home Developer Console </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension11": false, "dimension4": "Cast", "dimension5": "en", "dimension6": "en", "dimension1": "Signed out", "dimension3": false}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Cast", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="rKBvk5/T51NYd3PpQmP/vlHeSHfxtB"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Significatio__enable_by_tenant","Profiles__enable_completecodelab_endpoint","Concierge__enable_concierge","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_view_transitions","Search__enable_page_map","Profiles__enable_release_notes_notifications","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__emergency_css","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_variable_operator","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_shell","Cloud__enable_cloudx_experiment_ids","Profiles__enable_page_saving","Cloud__enable_cloud_facet_chat","Search__enable_ai_search_summaries_restricted","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_recognition_badges","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__enable_firebase_utm","Search__enable_ai_eligibility_checks","Profiles__enable_developer_profiles_callout","DevPro__enable_cloud_innovators_plus","TpcFeatures__enable_mirror_tenant_redirects","TpcFeatures__enable_required_headers","MiscFeatureFlags__enable_project_variables","Search__enable_suggestions_from_borg","Profiles__require_profile_eligibility_for_signin","EngEduTelemetry__enable_engedu_telemetry","DevPro__enable_developer_subscriptions","Search__enable_ai_search_summaries","Profiles__enable_awarding_url","Profiles__enable_profile_collections","Profiles__enable_complete_playlist_endpoint","CloudShell__cloud_shell_button","Cloud__enable_cloudx_ping","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__developers_footer_image","Cloud__enable_legacy_calculator_redirect","Concierge__enable_pushui","MiscFeatureFlags__developers_footer_dark_image","Concierge__enable_concierge_restricted","CloudShell__cloud_code_overflow_menu","Analytics__enable_clearcut_logging","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_llm_concierge_chat"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[12,9],[6,5],[16,13],[13,10],[14,11],[3,2],[5,4],[11,8],[1,1],[15,12],[4,3]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

User Experience With the Google Cast Platform | Google for Developers