Giter VIP home page Giter VIP logo

fx_cast's Introduction

Preview of cast device selection popup

fx_cast

A Firefox extension that implements the Chromecast API and exposes it to web apps to enable cast support. Communication with receiver devices is handled by a companion application (bridge).

Installing

Install the Firefox extension (from within Firefox) and bridge application via the installer packages. These are two separate downloads that can be found on the website or in the GitHub releases section.

The bridge application is currently supported on Windows, macOS and Linux.

Important: On Linux platforms such as Arch, it may be necessary to configure local hostname resolution1.

Installing via package managers

Note: These packages are maintained by third parties and any issues specfic to these packages should be directed to the respective package maintainers.

Daemon Configuration

See documentation on the daemon wiki page.

Usage

Clicking on the toolbar button or Cast... menu item in the page context menu will open a popup that shows a list of receiver devices will allow you to start casting the currently detected app2 or media.

Site Whitelist

The extension provides a whitelist for ensuring only trusted sites are allowed to load the cast API and communicate with receiver devices.

Sites may be added to the whitelist, either by clicking one of the whitelist options in the toolbar button context menu whilst visiting the site, or by manually entering a valid match pattern on the options page.

Whitelisted sites should then display a cast button as in Chrome, provided they're compatible with the extension/Firefox.

Building

Requirements

  • Node.js v16.x.x
  • Native build tools (see here)
  • Bonjour/Avahi (on Windows/Linux respectively)

Installing dependencies

Windows:

Debian / Ubuntu:

$ sudo apt install libavahi-compat-libdnssd-dev dpkg rpm

Runtime packages: avahi-daemon.

Fedora:

$ sudo dnf install avahi-compat-libdns_sd-devel dpkg rpm-build

Runtime packages: avahi, nss-mdns.

Arch Linux:

$ sudo pacman -S avahi dpkg rpm-tools

Instructions

$ git clone https://github.com/hensm/fx_cast.git
$ cd fx_cast
$ npm install
$ npm run build

# Install manifest for dist/ build. Installs to
# user-specific location and overrides a system-wide
# install. Call `remove-manifest` to restore previous state.
$ npm run install-manifest
$ npm run remove-manifest

This will build the extension and bridge, outputting to dist/:

  • dist/bridge/
    ... contains the built bridge with launcher script and manifest (with the path pointing that script). The install-manifest npm script copies this manifest to the proper location (or adds its current location to the registry on Windows).
  • dist/extension/
    ... contains the unpacked extension.

Watching extension changes:

$ npm run watch:extension

Launch Firefox with built extension (run in separate terminal):

$ npm run start:extension

32-bit on Windows

Building a 32-bit version is only supported for Windows. If you're building from a 64-bit system, you'll also need to rebuild any native dependencies as 32-bit.

$ npm clean-install --prefix ./bridge --arch=ia32  # If on a 64-bit system

# If building without packaging
$ npm run build:bridge -- -- --arch=x86 --use-pkg

# If packaging
$ npm run package:bridge -- -- --arch=x86

Build scripts

Extension build script (build:extension) arguments:

  • --watch
    Rebuild on changes. Incompatible with --package.
  • --package
    Package with web-ext.
  • --mode "development", "production"
    Sets build mode. Defaults to development unless packaging.

Bridge build script (build:bridge) arguments:

  • --package
    Builds and creates installer packages for distribution.

  • --package-type "deb", "rpm"
    Linux installer package type.

  • --use-pkg
    Create single binary with pkg.

  • --arch "x64", "x86", "arm64"
    Select platform arch to build for. Defaults to current arch.

    Platform Supported Architectures
    Windows x86, x64
    macOS x64, arm64
    Linux x64

Packaging

Build and package extension and bridge application for current platform:

$ npm run package
  • dist/bridge/
    ... contains the installer package: fx_cast_bridge-<version>-<arch>.(pkg|deb|rpm|exe)
  • dist/extension/
    ... contains the built extension archive: fx_cast-<version>.xpi.

Packaging examples:

$ npm run package:extension # Packaging extension
$ npm run package:bridge # Packaging bridge application

# Linux platforms
$ npm run package:bridge -- -- --package-type=deb
$ npm run package:bridge -- -- --package-type=rpm

Testing

Testing requires geckodriver (or chromedriver for Chrome parity testing). See selenium-webdriver installation instructions (ignore npm install).

The test script expects a compatible installed bridge version and a packaged extension archive at dist/extension/.

Test results will be displayed in the terminal and within the opened browser tab. Chrome may take some time to initialize the media router component before the cast API is available for testing.

$ npm run build:bridge
$ npm run install-manifest
$ npm run package:extension
$ npm test

# Or if testing in Chrome
$ SELENIUM_BROWSER=chrome npm test

Video Demos

These are somewhat outdated now, but show the basic function of the extension:

fx_cast Netflix fx_cast HTML5

Credit

  • electron-chromecast3
  • Icons by icons8:
    • extension/src/ui/options/assets/icons8-cancel-120.png
    • extension/src/ui/options/assets/icons8-ok-120.png
    • extension/src/ui/options/assets/icons8-warn-120.png

Donations

PayPal

Donate with PayPal button Donate with PayPal

Footnotes

  1. By default, Arch does not configure Avahi to resolve .local hostnames via the name service switch (NSS), and the underlying mdns module used by this project relies on getaddrinfo to resolve these hostnames correctly.

  2. Some sites may only function properly when initiating casting from the in-page player buttons.

  3. Since it seems to be causing confusion, this project does not use electron. The electron-chromecast library was only used as a reference for the initial implementation of the API.

fx_cast's People

Contributors

barraihsan avatar benjamin-dobell avatar colindean avatar csicar avatar d3sox avatar dependabot[bot] avatar edwardbetts avatar hensm avatar jlevon avatar mattblaha avatar rashmi-k-a avatar ravmn avatar rimrul avatar thadavos avatar thijswouters avatar vistaus avatar xdavidwu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fx_cast's Issues

Local media streaming

Create an HTTP server in the native app to stream local media files to the receiver.

*.deb package missing maintainer field

When the *.deb package is installed, if the user does ANYTHING with apt/dpkg through the command line, dkpg throws this error:

dpkg-query: warning: parsing file '/var/lib/dpkg/status' near line 53457 package 'fx-cast-bridge':
 missing maintainer

If the *.deb package is built using some sort of helper tool such as Debreate then this should be easy to fix. If this is being built in a more manual method then it may be more involved.

Audio is not casting with Video

When casting a video, audio is not being played on the device being cast to. Same issue on YouTube, Netflix, and VRV. Others may potentially have that issue as well. This may also be a Linux specific issue. Unsure about that part.

Desktop Chromecast Emulator

The Chrome/Android/iOS sender API libraries implement device authentication to prevent unauthorised cast devices, but fx_cast can run chrome sender apps without the authentication opening up the possibility of creating a custom generic Chromecast emulator without app-specific workarounds.

PoC demo:
https://www.youtube.com/watch?v=hWVsYcUSAzw

Add file picker for local media casting to receiver selector

Either a separate button or an <option> that triggers a file picker dialog. Will need to change the way media casting is triggered since there's no calling page for the cast API, either allowing cast API to be called from privileged contexts or making a new interface to the bridge.

Implement cast v2 missing API stubs

  • chrome.cast.addReceiverActionListener
  • chrome.cast.precache
  • chrome.cast.removeReceiverActionListener
  • chrome.cast.requestSessionById
  • chrome.cast.setCustomReceivers
  • chrome.cast.setPageContext
  • chrome.cast.setReceiverDisplayStatus
  • chrome.cast.Session#addMediaListener
  • chrome.cast.Session#removeMediaListener
  • chrome.cast.Session#queueLoad
  • chrome.cast.media.Media#editTracksInfo
  • chrome.cast.media.Media#getEstimatedBreakClipTime
  • chrome.cast.media.Media#getEstimatedBreakTime
  • chrome.cast.media.Media#getEstimatedLiveSeekableRange
  • chrome.cast.media.Media#queueAppendItem
  • chrome.cast.media.Media#queueInsertItems
  • chrome.cast.media.Media#queueJumpToItem
  • chrome.cast.media.Media#queueMoveItemToNewIndex
  • chrome.cast.media.Media#queueNext
  • chrome.cast.media.Media#queuePrev
  • chrome.cast.media.Media#queueRemoveItem
  • chrome.cast.media.Media#queueReorderItems
  • chrome.cast.media.Media#queueSetRepeatMode
  • chrome.cast.media.Media#queueUpdateItems
  • chrome.cast.media.Media#supportsCommand

Cleaner message handling

Message passing between the different destinations is fragile and difficult to understand.

Destinations:

  • Background script (main)
  • Shim content/page script
  • Receiver selection popup
  • Bridge app
  • Options page (TODO #5)
  • Media control popup (TODO #10)

Need some way to handle this cleanly. Possibly a separate library or util class that allows for registering a destination with a callback for sending messages. Needs to provide a message handler function to be called from runtime.onMessage / port.onMessage.

Should also document existing messages and order in which they're sent during initialization.

HTML5 video subtitles

Should forward any subtitles defined as <track> elements to the MediaInfo passed as part of the media load request.

For local media, should try to detect if there are subtitles present in the same directory and convert if necessary (from SRT to WebVTT).

  • Remote media
  • Local media

pop-up overflow

I can't find this issue already reported, so if it's already reported, please correct me.

On the FF 66.0b14 (Dev Edition) on MacOS 10.14.3 I've got this popup:

image

I see in other screenshots that it's not supposed to be like that. So what could be wrong?

User Agent Whitelist breaks YouTube's "New Look"

When the user agent whitelist is enabled, the user agent applied to YouTube is deemed incompatible with YouTube's "New Look," as determined by the page youtube.com/new.

While it doesn't harm actual casting functionality, it is a bit annoying to not be able to use dark mode on YouTube.

The match pattern I applied for YouTube is https://www.youtube.com/*.

This issue does not persist if the whitelist is disabled.

In case it helps, Firefox v67.0.1 w/ extension, bridge v0.0.3.

Resources loaded from whitelisted URLs should have rewritten UA string

Embedded iframe players or scripts on CDN domains won’t inherit the user agent string that the main page has and won’t load the cast API.

webRequest.onBeforeSendHeaders listener can get document URL, but the current request filter only allows for the listener to be called on URLs matching the whitelist match patterns.

Check performance on expanded filter vs temporary additional listeners, if at all significant.

Options page

  • View and edit site whitelist
  • Manage native app installation/update
  • View receiver debug info

Distribution/updates

Best way to distribute?

  • AMO for the extension or bundled with the application?
  • Squirrel (mac/win)
  • Custom install scripts with manual updates

Doesn't seem to work on Mac?

I installed the bridge, as well as the extension. But it never seems able to actually cast. No cast button appears on any media, and trying to use the toolbar button never populates the list of chromecast devices, nor can I ever enable casting.

I tried fiddling with the various addon options but nothing seems to help. What am I doing wrong?

Windows bridge installer doesn't automatically run as administrator

I'm not sure if this is because SmartScreen tried to block the .exe but the installer doesn't automatically try to run as administrator, which makes the install fail since it doesn't have the permissions to write the files to the Program Files directory. Manually running the .exe as admin works fine though.

Spanish translation

Hi,
I want to help with translating the extension into spanish. I'm part of the es-CL localization team from Firefox.
Can I send a PR?

Thanks

Latency is Extreamly High

When casting on Wi-Fi latency is extremely high (about 2 seconds). This of course will vary with internet speeds, but with the internet speeds I deal with, normal latency when casting from Android or a Chromium-based browser is usually below a quarter of a second. Issue found on YouTube, VRV, and Netflix.

AirPlay support

  • Auth
    Entirely HTTP-based so can be done from within extension. Should look at removing node module dependencies.
  • Device discovery
    Same as with CC discovery, will want to modify bridge to report back multiple types of devices and split extension StatusManager into device/status handling.
  • Receiver selection
    Modify receiver selection process to handle multiple types of receivers and conditions where different device types are valid selection targets.
  • WebKit JS AirPlay API
    Can be implemented fine. Doesn't seem like sites actually check the UA, so will work fine with Chrome UA and no need for more complex mixed whitelist behaviour.
  • Media sender support
    Either adding a separate sender code path that calls AirPlay API or (for an interesting experiment) faking the default media receiver and translating into AirPlay API calls indirectly from the CC sender.
  • Mirroring sender support
    Current screen capture methods not sufficient for AirPlay mirroring. Can't implement protocol in extension either way.

[Suggestion] Snap support

The current state of things

Right now the extension is looking for the bridge under /opt/fx_cast/ but inside a snap, Firefox is unable to read such directory.

A possible approach

Under Linux, when /opt/fx_cast/bridge fails to be found, could it be possible to look for the bridge under a user-owned directory (like $HOME, for example)? Maybe a symlink could make the trick in such case.

Another possible approach

Give the user the option to indicate the path under which the bridge is located.

Note

I'm not by any means a Linux nor a Firefox extensions expert. But I'd like to try fx_cast without giving away the option of using Firefox as a snap (I like it to has limited access to my system).

YouTube + Fire TV stick

I'm using version 0.0.3, trying to cast YouTube to a Fire TV stick with AirPlay&UPnP app.
This app support miracast, chromecast, airplay and other services and works fine normally.
Just when I try to cast with fx_cast I get an error on the Fire TV stick that the app isn't supported.

Do you think you could take a look at it?

Firefox 60.6

It cannot be installed in Firefox 60.6, opensuse. It says it is incompatible.

Add whitelist browser_action menu items

Provide context menu items to construct match patterns for sites to add to the whitelist

Example:

with https://www.example.com/some/directory/with?a=file

  • Add to Whitelist
    • Add https://www.example.com/* (Recommended)
    • Advanced
      • Add https://www.example.com/some/directory/with?a=file
      • Add https://www.example.com/some/directory/with*
      • Add https://www.example.com/some/directory/*
      • Add https://www.example.com/some/*
      • Add *://www.example.com/*
      • Add *://*.example.com/*

HTML5 media sender

The media sender currently casts to a receiver and then uses the local player for playback control. Video downloads on both. Downside of this is increased bandwidth, though syncing the player state allows for audio playback on the sender device with video playback on the receiver.

  • Use a dummy player by default
    Ideally we'd have the Firefox media player without the video download, but using a dummy file will remove the ability to seek (unless it's the same length, but that seems needlessly complicated).
  • Custom player
    Possible, but inserting a custom HTML player into random web pages is a can of worms.
  • Media controls popup
    Not as clean, but much easier to just stop playback and use controls from a popup (#10).

No Casting Notification on Android Devices

Normally, when casting from an Android App or Chromium-based browser, a notification pops up on any Android smartphone or tablet on the same Wi-Fi as the device that is casting. FX_Cast is not doing this.

If you could add this in it would be great, to help with controlling casting. It would also provide an easier (for the end user at least), temporary work around to Issue #50 . Otherwise, users have to have the Google Home app installed and go through that to end the casting. And even then, it only works if the device is linked somehow to your account. So doing at least this for the time being would be greatly appreciated!

This is on the latest release of the FX_Cast app and extension.

Add a Icon

Could we get an actual icon for the extension? Possibly even with the letter Beta on it to show that it's in beta status.

Not really "critical", but it would be nice to have a actual icon.

Technically there should be four modes:

A Unavailable: While Cast receivers are not available, the Cast button does not appear. (Probably easier to make the icon red or with an X instead of the cast waves. Useful to show that there is nothing to cast to.)
B Disconnected: While Cast receivers are available, the Cast button appears. (Normal default behavior, probably all we really need right now.)
C Connecting: While the Cast receiver is connecting, the Cast button animates the waves in the icon progressively. (Not essential at this stage but should be planned for)
D Connected: While this app is connected to the Cast receiver, its Cast button appears with a filled frame shape. (Again not required at this stage but should be planned for)

README Installation Guide Typo

Suggested fix: "sudo apt install dpkg rpm makensis" -> "sudo apt install dpkg rpm nsis"
Within the Debian/Ubuntu installation guide section.

Error below:

par@parcar-LG-Laptop:~/Downloads$ sudo apt install dpkg rpm makensis
Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Unable to locate package makensis
par@parcar-LG-Laptop:~/Downloads$ makensis
The program 'makensis' is currently not installed. You can install it by typing:
sudo apt install nsis
par@parcar-LG-Laptop:~/Downloads$ sudo apt-get install dpkg rpm nsis
Reading package lists... Done
...
0 upgraded, 11 newly installed, 0 to remove and 0 not upgraded.

Media controls

Implement controls for existing sessions. Should be able to view existing session status, play, pause, adjust volume and seek.

Receiver selector media type dropdown doesn't work

Currently the receiver selector does not allow (or ignores) changes to the media type once opened. Instead, it should cancel session requests if launched from a sender app and initialize an alternate sender for screen sharing or vice versa.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.