title: How to create CAF Receiver?
body: <p>In recently, Google upgrade its cast receiver to version V3.</p>
  
  <p>There is a simple demo in google demo page as below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;cast-media-player id="player"&gt;&lt;/cast-media-player&gt;
    &lt;style&gt;
      #player {
          --theme-hue: 210;
          --splash-image: url("my.png");
      }
    &lt;/style&gt;
    &lt;script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"&gt;
    &lt;/script&gt;
    &lt;script&gt;
      const context = cast.framework.CastReceiverContext.getInstance();
      const playerManager = context.getPlayerManager();
  
      // intercept the LOAD request to be able to read in a contentId and get data
      playerManager.setMessageInterceptor(
          cast.framework.messages.MessageType.LOAD, loadRequestData =&gt; {
              if (loadRequestData.media &amp;&amp; loadRequestData.media.contentId) {
                  return thirdparty.getMediaById(loadRequestData.media.contentId)
                  .then(media =&gt; {
                    if (media) {
                      loadRequestData.media.contentUrl = media.url;
                      loadRequestData.media.contentType = media.contentType;
                      loadRequestData.media.metadata = media.metadata;
                    }
                    return loadRequestData;
                  });
              }
              return loadRequestData;
          });
  
      // listen to all Core Events
      playerManager.addEventListener(cast.framework.events.category.CORE,
          event =&gt; {
              console.log(event);
          });
  
      const MyCastQueue = class extends cast.framework.QueueBase {
          initialize(loadRequestData) {
              const media = loadRequestData.media;
              const items = [];
              items.push(myCreateItem(media)); // your custom function logic
  
              const queueData = new cast.framework.messages.QueueData();
              queueData.items = items;
  
              return queueData;
          }
  
          nextItems(itemId) {
             return [myCreateNextItem()]; // your custom function logic
          }
      };
  
      const playbackConfig = new cast.framework.PlaybackConfig();
  
      // Sets the player to start playback as soon as there are five seconds of
      // media contents buffered. Default is 10.
      playbackConfig.autoResumeDuration = 5;
  
      const myCastQueue = new MyCastQueue(); // create instance of queue Object
  
      context.start({queue: myCastQueue, playbackConfig: playbackConfig});
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>From:
  <a href="https://developers.google.com/cast/docs/caf_receiver_features#styling-the-player" rel="nofollow noreferrer">https://developers.google.com/cast/docs/caf_receiver_features#styling-the-player</a></p>
  
  <p>But when I debugged it, there is an error that <code>'thirdparty' is undefined</code>.</p>
  
  <p>Does anyone can show me how to create a CAF receiver?</p>