media not playing when casting + casting youtube videos #75
Description
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.