We Keep Coding

JavaScript ignore alert if reloading page

I am detecting the end of a webrtc stream in JavaScript like this...
stream.getVideoTracks()[0].onended = () => {
alert('Feed Has Ended');
};
This is working correctly, but if the user refreshes or reloads the page then the alert is also shown.
I understand that this is technically correct, but how can I get it to not display the alert under those conditions?

Why don't you use a global boolean to check if video is playing or not? When you will reload or refresh the page, isVideoRunning will become false and alert won't show.
Like
this.isVideoRunning = false;
On addtrack,
this.rtcPeerCon_.ontrack = function (event) {
if (!this.rtcPeerCon_) {
return;
}
if( !this.remoteVideo_ ) {
return;
}
this.remoteVideo_.srcObject = event.streams[0];
this.isVideoRunning = true;
}
then in your onStream ended callback you can check
if (this.isVideoRunning) {
alert('whatever');
this.isVideoRunning = false;
}
(I wanted this to be comment but I am not allowed to comment yet)

Can someone help me with Picture in Picture for a HTML5 Player in Safari?

Can anybody tell me how to fix this issue I have with Picture in Picture? I added it for a HTML5 player and took the code from the Apple website, but it's not working for me. It gives me an error saying:
TypeError: null is not an object (evaluating 'video.webkitSupportsPresentationMode')
(anonymous function)-jquery-3.min.js:2:31697
The code:
var video = document.getElementById('video');
var PiP = document.getElementById('picture-in-picture');
// picture-in-picture
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
// Toggle PiP when the user clicks the button.
PiP.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
});
} else {
PiP.disabled = true;
}
I wasn't sure were to place this code. I just put it inside a javascript script tag in the footer.
Updated:
I replaced :
var video = document.getElementById('video');
var PiP = document.getElementById('picture-in-picture');
with just:
var video = $( "video" );
var PiP = $( "#picture-in-picture" );
Inside the jQuery ready and the error is gone but still doesn't work. I put an alert on each of the if and else condition and it looks like it doesn't even recognize the function.
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
// Toggle PiP when the user clicks the button.
PiP.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
});
alert("works")
} else {
PiP.disabled = true;
alert("no works") //<--- This is the alert I get
}
i have never tried this PiP until now. Could it be that Apple removed this function in the new Safari? It seems like any html5 video I go to has this option already next to the full screen. But won't be good for a custom HTML5 player which is why I want to add this function to a button.

Why the error?
document.getElementById returns a DOM object while the jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM. You can [read the detailed explanation here][1].
This mean that if you wanna use jQuery you need to to change:
var video = $( "video" );
to
var video = $( "video" )[0];

How to get the event Handler for stop sharing button in chrome browser in emberjs

I am using twilio API to implement screen sharing in an emberjs app, I am successfully able to share the screen and also toggle on stopping it. Here is my code ->
this.get('detectRtc').isChromeExtensionAvailable(available => {
if (available) {
const { twilioParticipant } = this.get('participant')
if (this.get('stream') && this.get('stream').active) {
this.get('streamTrack').stop()
this.get('userMedia.mediaStream')
.removeTrack(this.get('streamTrack'))
this.set('isEnabled', false)
twilioParticipant.removeTrack(this.get('streamTrack'))
} else {
this.get('detectRtc').getSourceId(sourceId => {
// "cancel" button is clicked
if (sourceId !== 'PermissionDeniedError') {
// "share" button is clicked extension returns sourceId
this.get('userMedia')
.getScreen(sourceId)
.then(mediaStream => {
this.set('isEnabled', true)
this.set('stream', mediaStream)
this.set('streamTrack', mediaStream.getVideoTracks()[0])
twilioParticipant.addTrack(mediaStream.getVideoTracks()[0])
})
.catch(() => { /* do nothing, but return something */ })
}
})
}
} else {
this.get('flash').status(
'base',
this.get('intl').t('chromeExtension.install'),
{
icon: 'alert-circle',
push: true
}
)
// TODO Show the system popup to install chrome extension from web store
// !!chrome.webstore &&
// !!chrome.webstore.install &&
// chrome.webstore.install(this.webStoreUrl)
}
})
The issue I'm facing is with the stop sharing button which is at the bottom of the app as seen in screenshot below
I need a way to listen to an event handler and execute the some code after clicking on the stop sharing screen button, I know there is an onended event Handler which is mentioned in the MediaStreamTrack docs, but I don't know how to use it, any help will be highly appreciated.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack

The "stop sharing" button will trigger the MediaStreamTracks 'ended' event. Try this:
mediaStream.getVideoTracks()[0].addEventListener('ended', () => console.log('screensharing has ended'))

for some reason, #philipp answer is not working for me and I found this quite helpful
https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/getdisplaymedia/js/main.js#L88
this.get('stream').addEventListener('inactive', e => {
console.log('Capture stream inactive - stop recording!');
});

Make a div in full screen mode in javascript

I need to make a div in full screen mode.
In this div I have a video and the custom controls.
so I want when user click FS video and custom controls goes into full screen mode.
Here is code which I use.
<div id="custom-video">
<video id="video" src="path/to/src"></video>
<button onclick="fsMode()">FS</button>
</div>
Here is javascript code.
function fsMode(){
var i = $('#custom-video');
if (i.requestFullscreen) {
console.log('1');
i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
console.log('2');
i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
console.log('3');
i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
console.log('4');
i.msRequestFullscreen();
}else{
console.log('Not available');
}
}
When I try this code output is Not available.
But I try same code in that way and its work, it mean browser support fullscreenMode, but why this is not for above code.
// this code is working but I don't want to use it because
// custom controls will not show in fullscreen mode
var video = $('#video').get(0);
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
Any suggestion ?
Thanks...

what is returned by jQuery selectors like $("#video-id") and what is returned by document.getElementById("video-id") are not same. In most cases, you can use $("#video-id")[0] or $("#video-id").get(0) to get the javascript equivalent, which is what we need in this case. That's why your code is not working.

Seems like you are testing the fullscreen on the div containing the video and not the video itself. Try var i = $('#video').get(0); like in the second example and see it it works.

Problems with ionic back button

I have a problem with the back button of my application.
Initially I thought that the problem was in Cordova, but I have identified that the problem is actually in Ionic.
I found this code while researching for a solution:
// Disable BACK button on home
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, 100);
However, it is giving the following error:
Uncaught ReferenceError: $ionicPlatform is not defined
I am putting that code within a new document called functionAngular.js and I add it at the end of the body tag. As I must inform this function ?
My problem is that:
I want my back button to send the user further back in the navigation stack instead of closing the application instantly.
I am grateful for this help.

I recommend you first add $ionicPlatform in controller, and in the first controller loaded, test every state (see below) that the back button should have different actions.
$ionicPlatform.registerBackButtonAction(function () {
if ($state.current.name == " login (example) ") {
ionic.Platform.exitApp();
}
if ($state.current.name == " main menu buttons (example) ") {
// Sample message "want to exit the application?" (YES/NO)
if (YES) {
$ionicViewSwitcher.nextDirection('back');
$state.go(' ????');
};
};
if ($state.current.name == " order (example) ") {
// Sample message "want to exit the order?" (YES/NO)
if (YES) {
$ionicViewSwitcher.nextDirection('back');
$state.go(' ????');
};
};
}, 100);

angular.module('EGLISE')
.run(function($ionicPlatform,$state,$ionicHistory){
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp();
}
else {
$ionicHistory.backHistory();
}
}, 100);
});
Please modify your functionAngular.js to the above code.