Is it possible to call chrome cast via a HTML button?
I've written a web page that uses a custom receiver and basically allows a user to show reports to a room of people in the form of stats/charts, but they see controls on their screen.
However because this is PURELY a cast app, I want to show a button on the webpage that shows when the user isn't casting and then disappears when they are not casting.
So something like:
<button id="castStart" style="display:none;">Start</button>
<button id="castStop" style="display:none;">Stop</button>
And then some JS like:
if( CASTAVAILBLE ) {
if( CASTING ) {
$('#castStart').hide();
$('#castStop').show();
} else {
$('#castStart').show();
$('#castStop').hide();
}
$('#castStart').on('click', function(e){
startCasting();
$('#castStart').hide();
$('#castStop').show();
});
$('#castStop').on('click', function(e){
sttopCasting();
$('#castStart').show();
$('#castStop').hide();
});
}
So basically the plan is to hide and show the buttons based on when they are casting and ONLY if they are ABLE to cast (i.e. the cast extension is installed).
Is this possible?
Update: This seems to do what I want: https://chrome.com/photowall so it is possible!
Casting is part of browser chrome (i.e. "everything that's not the web page" not "Chrome browser") functionality.
If you're looking at displaying different content for desktop and cast version, you can get away with just css media queries
#media tv {
.only-visible-on-chromecast { /*or when a tv is used as a screen ¯\_(ツ)_/¯ */
display: block;
}
}
If you're looking for a javascript implementation of casting functionality, you may want to look into adapting the chromecasts package for browser usage.
Related
Following Mozilla's API document on Fullscreen, I've placed the following code in my website, it simply takes the whole document (html element) and makes the page go fullscreen once the user clicks anywhere in the page, and once there's another click, page goes back to normal.
var videoElement = document.getElementsByTagName('html')[0];
function toggleFullScreen() {
if (!document.mozFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
My question is how can I save this fullscreen state so every time that Firefox loads up, that page is still on fullscreen.
Or any workaround? This is for Firefox for Android.
It's an extreme workaround, but you can make your website a progressive web app and put "display": "fullscreen" in its manifest. Then you can launch your site from the home screen and use it like a fullscreen native app.
Following my experiments and the specs, this isn't doable, from client browser javascript
This api need an user interaction. We can't activate the fullscreen by scripting.
From the fullscreen api specification:
Fullscreen is supported if there is no previously-established user
preference, security risk, or platform limitation.
An algorithm is allowed to request fullscreen if one of the following
is true:
The algorithm is triggered by user activation.
The algorithm is triggered by a user generated orientation change.
https://fullscreen.spec.whatwg.org/#model
About activation events:
An algorithm is triggered by user activation if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event's isTrusted attribute is true.
The task in which the algorithm is running is currently running the
event listener for an event whose isTrusted attribute is true and
whose type is one of:
change
click
dblclick
mouseup
pointerup
reset
submit
touchend
https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
We can't trigger fullscreens from scripts, or if so, the script must be triggered by the user.
Including simulating a click won't works, this is regular behavior, made to protect user experience.
With some reflexion, we can't agree more on this, imagine any ads page can launch full screens, the web would be a hell to browse!
You told in comment: «I am the only user here»
What you can do if using unix: (( probably alternatives exists in other os )).
Using midori (a lightweight webkit browser), this will start a real fullscreen.
midori -e Fullscreen -a myurl.html
There is no ways to start firefox or chromium in a fullscreen state from the command line, to my knowledge.
But what is doable is to trigger a F11 click at system level, focusing on the good window, just after the page launch. ((sendkey in android adb shell?))
xdotool can do that.
Here is a pipe command line that will launch firefox with myurl.html, search for the most recent firefox window id, then trigger the F11 key on this window.. (Press F11 again to exit)
firefox myurl.html && xdotool search --name firefox | tail -1 | xdotool key F11
This should be easy to adapt for other browsers.
As last alternative, have a look at electron or nw.js.
take a look at this add on for Firefox, i have not tried it, as I'm posting this from mobile, it's description does say that it can force start in full screen. I'm just quoting their description .
Saves the last state or force start in full screen forever! Simple and
complete for this purpose.
Edit : And the link to it
https://addons.mozilla.org/en-US/firefox/addon/mfull/
What about using localStorage like this?
function goFullScreen() {
if (videoElement.mozRequestFullScreen) {
localStorage.setItem('fullscreenEnabled', true)
videoElement.mozRequestFullScreen();
}
}
window.onload = function () {
if (localStorage.getItem('fullscreenEnabled') === true) {
goFullScreen();
}
};
function toggleFullScreen() {
if (!document.mozFullScreen) {
goFullScreen();
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
localStorage.setItem('fullscreenEnabled', false)
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false)
I've created a sidebar using Firefox WebExtensions, but I'd love to dock the sidebar to the bottom, I did search a lot, and couldn't find anything.
The code I used is this one:
Sidebar.js
var thisPanel = browser.extension.getURL("/this.html");
var thatPanel = browser.extension.getURL("/that.html");
function toggle(panel) {
if (panel === thisPanel) {
browser.sidebarAction.setPanel({panel: thatPanel});
} else {
browser.sidebarAction.setPanel({panel: thisPanel});
}
}
browser.browserAction.onClicked.addListener(() => {
browser.sidebarAction.getPanel({}).then(toggle);
});
Well, it's called a sidebar..
Quoting WebExtension documentation, emphasis mine:
A sidebar is a pane that is displayed at the left-hand side of the browser window, next to the web page.
If you want something docked elsewhere, either you need to inject DOM into the page with content scripts (fragile), or write a devtools.panels extension and dock it within Dev Tools.
This is limited by Webextension standards: you can't call user actions that awaiting promises, because this isn't considered as a "user action handler". Read more here:
Some WebExtension APIs perform functions that are generally performed as a result of a user action. [...]
To follow the principle of "no surprises", APIs like this can only be called from inside the handler for a user action.
There is a good workaround for some alike problems using runtime.connect()
I wrote this script to pop-up a message any time a user clicks on an external link from our site. When I wrote this I assumed the best way to do this would be to check location.host and compare it to the url the user is attempting to visit.
<script type="text/javascript">
$(function(){
$('a').click(function(){
if (this.href.match(location.host)) {
//alert('Please continue on to our site.');
window.onbeforeunload = null;
}
else {
if (window.confirm('NOTICE: By accessing this link, you will be leaving the DBPR website. DBPR is not responsible for the content of the Internet website you are entering. DBPR neither warrants nor makes any representations nor endorsements as to the accuracy, quality, content or completeness of the information, text, images, graphics, hyperlinks, and other items contained on the Internet website you are entering. DBPR is not responsible or liable for any viruses or contaminations of your hardware, software, peripherals or property, resulting from use of the Internet websites linked to or from the DBPR Internet website. Do you want to proceed?')
){
// They clicked Yes
}
else
{
// They clicked no
return false;
}
}
});
});
</script>
The way the code currently stands, it works in the majority of cases, however I noticed that a couple buttons on our home page reference javascript:void(0), and they cause the confirm box to prompt on click .
Is there a way you would recommend to treat javascript:void(0) as an internal link or completely diregard it?
Thanks,
TG
You could do it like this:
if (this.href.match(location.host) ||
this.href.toLowerCase().indexOf('javascript') !== -1) {
// allow
}
I want to do
$('#foo').insertAfter('#bar');
but only when the user prints the page. I don't want to do any scripting while on screen.
I realize this would have been simple if I wanted to manipulate styles, because then I would have just used #media print {} in CSS. However the goal I am trying to achieve (DOM manipulation) cannot be achieved with CSS, hence I need to use JS.
How can I run JavaScript (or jQuery) only when the user prints or does print-preview?
If you do not care about cross browser functionality you can use the window.onbeforeprint event, but it is only supported in IE and firefox 6+
window.onbeforeprint = function(){
$('#foo').insertAfter('#bar');
};
Another way is to override the CTRL+P keystrokes
window.onkeydown = function(e){
var char = String.fromCharCode(e.keyCode);
if(char == "P" && e.ctrlKey){
$('#foo').insertAfter('#bar');
}
};
Fiddle
But this will not work if the user uses the menu system to do a print or right clicks to print.
Basically, I have a little arrow key graphic I want displayed for desktop browsers, to tell users they can navigate the site with the arrow keys on their keyboard. However, I want to change this image to a fingerprint graphic if the site is loaded on a touch device.
I'm a novice when it comes to JavaScript, so I'm not sure how to go about this.
Any ideas?
You need to determine if the browser supports touch. You can do this with user agent detection, or by using one of Modernizr's techniques. (http://modernizr.github.com/Modernizr/touch.html) Different techniques work in different cases, so you may need to use user agent detection.
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
Then you can set your image source
if (isTouchDevice()) {
document.getElementById("myImage").src = "fingerprint.png";
}