media not playing when casting + casting youtube videos

[esanchezvz]

Hi there! First of all, thank you for creating this plugin. I was trying to implement this plugin using @ionc/angular with cordova following th example code in the repo but whenever I select the device to cast the video it doesn't show anything on the smartTV screen but the casting icon and not the media. I'm using the default receiver appId as you do in the example, but would I have to make and register a custom receiver to be able to play the video on a smartTV or chromecast?

This is my implementation:

// cast.component.ts

@Component({
  selector: 'app-cast',
  templateUrl: 'cast.component.html',
  styleUrls: ['cast.component.scss'],
})
export class Cast implements OnInit {
  private cast: any;
  private castSession: any;
  private castMedia: any;
  isCasting: boolean = false;

  constructor() {}

  ngOnInit() {
    document.addEventListener('deviceready', () => this.initializeCast());
  }

  private initializeCast() {
    this.cast = chrome.cast;
    const castId = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
    const apiConfig = new this.cast.ApiConfig(
      new this.cast.SessionRequest(castId),
      (session: any) => {
        console.log(session);
      },
      (receiverAvailable: any) => {
        console.log(receiverAvailable);
      }
    );

    this.cast.initialize(
      apiConfig,
      () => {
        console.log('Cast initialized correctly!');
      },
      (err: string) => alert('Error initializing cast.')
    );
  }

  requestSession() {
    this.cast.requestSession(
      (session: any) => {
        this.castSession = session;
        alert('Is suppossed to be casting!!!');
        this.isCasting = true;
      },
      (err: string) => alert('Error requesting session.')
    );
  }

  loadMedia() {
    const videoUrl = 'https://ia801302.us.archive.org/1/items/TheWater_201510/TheWater.mp4';
    const mediaInfo = new this.cast.media.MediaInfo(videoUrl, 'video/mp4');

    this.castSession.loadMedia(
      new this.cast.media.LoadRequest(mediaInfo),
      (media: any) => {
        console.log('Video should be playing now')
        this.castMedia = media;

        setTimeout(function () => this.pauseMedia(), 4000);
      },
      (err: string) => {
        // Failed (check that the video works in your browser)
        alert('Error loading media.');
      }
    );
  }

  pauseMedia() {
    this.castMedia.pause(
      {},
      () => {
        setTimeout(function () =>  this.stopSession(), 2000);
      },
      (err: any) => {
        // Fail
        alert(err);
      }
    );
  }

  stopCastSession() {
    this.castSession.stop(
      () => {
        this.isCasting = false;
      },
      (err: string) => {
        // Fail
        alert(err);
      }
    );
  }
}

And on the html

// cast.component.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Testing App </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Some title</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-button (click)="requestSession()">
      {{isCasting ? 'Stop Casting' : 'Cast Video'}}
    </ion-button>
  </div>
</ion-content>

YOUTUBE - This really isn't an issue, but was looking through the repo and issues but didn't find any mention to casting Youtube videos and I was wondering if this was possible with this plugin.

[Lindsay-Needs-Sleep]

Okay, easier question first:
Youtube - if you can get access to the correct video link from youtube, and then call the cast api with it, theoretically it should work.
(Though, I think it is a bit tricky to get the correct url from a youtube video.)

If you are just opening the actual youtube page in an ionic/cordova webview, there is a tiny (extremely tiny) chance that if you call window['__onGCastApiAvailable'](true); that you will trigger youtube into using it's existing code to attempt to use this plugin. (Of course it will only succeed if youtube only uses API that this plugin supports.)

[Lindsay-Needs-Sleep]

Actually, the first question might have been easier. :p

You should be fine using the default receiver.
You should only need a custom receiver if you want a custom progress bar on the tv or something (as far as I understand).

I believe the reason that you aren't seeing any video is because you aren't calling loadMedia anywhere.
After you request the session (which sounds like you've got that working based on your description), you then need to call loadMedia to give the session some media.

[Lindsay-Needs-Sleep]

I would also recommend using version 1.1.0 of the plugin (I just made some bug fixes but the changes haven't been incorporated here yet)
Here: https://github.com/miloproductionsinc/cordova-plugin-chromecast
Or this PR #74

[esanchezvz]

@Lindsay-Needs-Sleep Thank you! You are absolutely right, the problem was not calling loadMedia within a successful sessionRequest (didn't realize I wasn't calling it lol).

I will be using v1.1.0, thank you for the tip.

As far as Youtube, I think the better solution would be to build a custom receiver that uses the Youtube API to play the video from the videoId, but this would only work if I'm able to pass the videoId that I get from my backend to the custom receiver through this cast plugin. Is there a way to pass custom data (like the videoId) via cast from my ionic app to my custom receiver using this plugin?

[Lindsay-Needs-Sleep]

That does sound like it would be a better solution! Hmm I haven’t done any work with a custom receiver really... But I think the way you would get custom info to your receiver easiest would probably be via sendMessage (I can’t remember if it is media.sendMessage or session.sendMessage [I guess it is only appropriate in this case if it is session.sendMessage though :p]) You would want to create a custom namespace string for your custom communications. One of the open issues I created [something to do with setPlaybackRate I think] has a small sample of how to use sendMessage from the sender side. You would have to find other docs for how to set up the listener on the receiver. I have briefly seen them somewhere I believe... sendMessage partially exists in Android (I played with it a bit the other day, seems the only problem is that the callback always returns with an error even on a successful communication). As for iOS, I can’t remember at all if we translated the sendMessage function to objc. (a ctrl+f of the src/ios files should provide an answer about it’s existence though! You can also try the sample code from my other issue to just see if it works at all.) On Nov 4, 2020, at 06:45, Esteban Sánchez <[email protected]<mailto:[email protected]>> wrote: @Lindsay-Needs-Sleep<https://github.com/Lindsay-Needs-Sleep> Thank you! You are absolutely right, the problem was not calling loadMedia within a successful sessionRequest (didn't realize I wasn't calling it lol). I will be using v1.1.0, thank you for the tip. As far as Youtube, I think the better solution would be to build a custom receiver that uses the Youtube API to play the video from the videoId, but this would only work if I'm able to pass the videoId that I get from my backend to the custom receiver through this cast plugin. Is there a way to pass custom data (like the videoId) via cast from my ionic app to my custom receiver using this plugin? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#75 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AMLADYZ3POCOUSJLKIMK3BLSOFLITANCNFSM4TJIIZVA>.

[esanchezvz]

Thank you! I will go ahead and try to do this following the roadmap you mention!
And again, thank you for this great plugin! (It saved me a lot of headaches)