Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Caststatuschanged catch error: "Cannot read property 'newStatus' of undefined"

See original GitHub issue

I catch error, when set addEventListener.

Init, and call like this question.

shaka.pl.js

export default class ShPlayer {

	async changeUrl(newUrl) {
		const video = document.getElementById('video');
		const videoContainer = document.getElementById('videoContainer');
		const player = new shaka.Player(video);

		const ui = new shaka.ui.Overlay(player, videoContainer, video);
		const controls = ui.getControls();

		controls.addEventListener('caststatuschanged', this.onCastStatusChanged());

		try {
			await player.load(newUrl);
		} catch (error) {
			console.error(error);
		}
	}
	
	onCastStatusChanged(event) {
		const newCastStatus = event['newStatus'];
		// Handle cast status change
		console.log('The new cast status is: ' + newCastStatus);
	}
	
	onPlayerErrorEvent(errorEvent) {
		// Extract the shaka.util.Error object from the event.
		this.onPlayerError(event.detail);
	}

	onPlayerError(error) {
		// Handle player error
		 console.error('Error code', error.code, 'object', error);
	}

	onUIErrorEvent(errorEvent) {
		// Extract the shaka.util.Error object from the event.
		this.onPlayerError(event.detail);
	}

	initFailed() {
		// Handle the failure to load
		console.error('Unable to load the UI library!');
	}
}

Player.vue

<template>
    <div>
        <div  ref="main" data-shaka-player-container data-shaka-player-cast-receiver-id="7B25EC44">
            <video data-shaka-player ref="video" id="video"
                autoplay controls></video>
        </div>
    </div>
</template>

<script>
    import ShakaPlayer from '../shaka.pl.js';
    export default {
        name: "Player",
        data() {},
        mounted() {
            var a = new ShakaPlayer ();
            a.changeUrl(someUrl);

        },
    };
</script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>
        Player
    </title>
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet"/>
    <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
    <script src="./shaka-player.ui.debug.js"></script>
    <link rel="stylesheet" href="./controls.css"/>
</head>
<body>
<div id="app"></div>
<script src="/mux.js"></script>
</body>
</html>

If remove line controls.addEventListener('caststatuschanged', this.onCastStatusChanged()); video play. Controls appear, but there are no cast buttons among them.

And incorrect time. (when i change url, i set url to live stream) I did everything according to the example

If i set my url to shaka demo page . Always ok, i can select tv to cast, cast was working.

Why doesn’t the cast button appear? What could I do wrong?

Issue Analytics

State:
Created 4 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

ismenacommented, Nov 14, 2019

@ivansteff Is this the same application as you reference above or a different one? 😃

Using the code you posted above:

export default class ShPlayer {
	
	constructor() {
		this.video = document.getElementById('video');
		this.videoContainer = document.getElementById('videoContainer');
		this.player = new shaka.Player(this.video);
	        this.ui = new shaka.ui.Overlay(this.player, this.videoContainer, this.video);
            this.controls = this.ui.getControls();
            // TRY THIS!
            this.ui.configure('castReceiverAppId', '7B25EC44');
		this.controls.addEventListener('caststatuschanged', (e) => this.onCastStatusChanged(e));
	}
	async changeUrl(newUrl) {
		try {
			await this.player.load(newUrl);
		} catch (error) {
			console.error(error);
		}
	}
	onCastStatusChanged(event) {
		const newCastStatus = event['newStatus'];
		// Handle cast status change
		console.log('The new cast status is: ' + newCastStatus);
	}

}

0reactions

ivansteffcommented, Nov 15, 2019

@ismena Finally, I get it! Many thanks to your team for such a detailed explanation!