A brief guide to integrating Google Cast functionality into TiddlyWiki (see e.g. the music player showcase at Music player (classical music)).
Google’s documentation is at Cast | Google for Developers.
Relevant files are at GitHub - janttt/tiddlywiki.player: Example integration of Google Cast into TiddlyWiki · GitHub.
Note that my implementation casts audio, not video, though the principles are essentially the same for both. Also, my implementation is not a plugin. It is tailored to my use cases. Nevertheless, it may inspire others.
The code implements a web sender – see Google’s documentation: Develop Web Sender App. It does not implement a web receiver. This means that when the audio is streamed to a standard Chromecast device, Google Cast uses its standard receiver app, which has limitations, such as limited metadata. Implementation of a custom receiver app requires registration with Google to get an ID for it.
The essential steps are the following:
Include Google’s cast code.
Create a tiddler with the following content:
<script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
and tag $:/tags/RawMarkup
(tiddlywiki.player/googlecast-framework.tid at main · janttt/tiddlywiki.player · GitHub).
Create a Google Cast button.
Create a tiddler with the following content:
<google-cast-launcher id="castbutton"></google-cast-launcher>
and tag $:/tags/SideBarSegment (tiddlywiki.player/castbutton.tid at main · janttt/tiddlywiki.player · GitHub).
The cast button must be styled with display: inline-block (https://github.com/janttt/tiddlywiki.player/blob/main/cast.css).
Initialize Google Cast:
window['__onGCastApiAvailable'] = (isAvailable) => {
if (isAvailable) {
this.initializeCastApi()
...
initializeCastApi() {
const options = {
receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
}
const context = cast.framework.CastContext.getInstance()
context.setOptions(options)
...
(tiddlywiki.player/googlecast.js at main · janttt/tiddlywiki.player · GitHub)
Note that the receiver ID is Google’s ID for its default receiver:
receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
Beyond these steps, the remaining code is specific to the use cases at hand.
As can be seen in the showcase mentioned above, each CD has its own tiddler and controller. The implementation uses standard HTML audio elements for playing locally. Google Cast, by contrast, provides just one player. The code thus had to ensure they play together gracefully.
It was desirable to control each one of the audio players and Google Cast’s player with the same UI. This necessitated implementation of a custom controller, both UI and logic.
A brief description of the files:
From a user’s point of view, all that is required is
<$audio sources=<<currentTiddler>> sourcesType="cd"/>
where sourcesType depends on the type of the source: CD, selection or movement.
The audio widget is implemented in audiowidget.js
(tiddlywiki.player/audiowidget.js at main · janttt/tiddlywiki.player · GitHub).
The controller logic is in audiocontroller.js
(https://github.com/janttt/tiddlywiki.player/blob/main/audiocontroller.js).
As mentioned, there may be many controllers. They are managed by audiocontrollermanager.js
(tiddlywiki.player/audiocontrollermanager.js at main · janttt/tiddlywiki.player · GitHub).
googlecast.js contains Google Cast logic
(tiddlywiki.player/googlecast.js at main · janttt/tiddlywiki.player · GitHub).
trackfactory.js converts tiddler titles to tracks
(tiddlywiki.player/trackfactory.js at main · janttt/tiddlywiki.player · GitHub).
cast.css contains styles for the cast button, as mentioned, and for the custom audio controller
(tiddlywiki.player/cast.css at main · janttt/tiddlywiki.player · GitHub).