getUserMedia mutes the sound while recording current tab - google-chrome

[Goal]: To record the sound of a tab and at the same time hear the sound while it's being recorded
[Means]: To use chrome.tabCapture because it's less invasive than chrome.desktopCapture or navigator.mediaDevices.getDisplayMedia. The former provides a better user experience as opposed to the latter which asks for tab selection every time and then intrusively shows the blue rectangle with a status bar and the "Stop Sharing" button
[Issue]: Tab sound is muted after getting the stream (recording not necessary, only calling getUserMedia) and can not be unmuted. Is this a bug? How can it be avoided?
[Technicals]:
Obtain the stream id in a foreground page (popup, options, or iframe pointing to an extension page, injected in the current DOM by a content script) because that's the only place where tabCapture is available
const tabId = ...get current tab id...
chrome.tabCapture.getMediaStreamId({ consumerTabId: tabId }, function(streamId) {
// send the streamId to the content script
})
Receive the streamId then use it to start the capture
const options = {
audio: {
mandatory: {
chromeMediaSource: 'tab',
chromeMediaSourceId: streamId
}
}
}
navigator.mediaDevices.getUserMedia(options).then((tabStream) => {
// at this point the sound of the tab becomes muted with no way to unmute it
});
Just invoking tabCapture will mute the tab. AudioContext source connecting to the default destination doesn't do anything for this stream and no error is thrown. If the callback promise from getUserMedia is empty, the sound of the tab comes back on its own in about 20 seconds or so. If MediaRecorder actually uses the stream to record the sound, the sound doesn't come back until recording is stopped. The sound of the tab is present in the recording, just muted while recording.
[Comparison 1]: Obtaining a MediaStream directly with chrome.tabCapture.capture instead of the above mechanism works as intended. The tab sound is muted, but can be reconnected to the speakers using AudioContext. The issue with this approach is that chrome.tabCapture.capture can't be started successfully in an injected iframe (always fails with the cryptic "Error starting tab capture"), so there's no way to capture the sound. It does work in a popup though, but not really an option given its volatile nature.
[Comparison 2]: chrome.desktopCapture works in the opposite way. The sound is always present in the tab while recording and can not be muted, not that this poses a problem.

Related

play sound when page has loaded in Ionic4

Not sure if it's related to Ionic, but when the page is loaded I have a button that play a sound.
If I click on that button - the sound does play.
Then, I wanted to play the same sound from that button - but when the page is loaded, so when the page is loaded - sound will play, when you click on that button - same sound will play.
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
I tried using ionViewDidEnter, setTimeout for 5 seconds ... but I'm keep getting this error msg of permission ...
UPDATE - MEI score
On purpose I set my permissions for Auto play sound: Block for finding the right solution.
I can raise the MEI score according to the following statement:
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
This means:
- if somewhere on previous pages - I made a sound - switching to any other page - will also trigger sounds.
- Or a valid click ( that loads a silent sound just to "collect" the permissions ) - also does the trick ..
Counting on that - when loading the Ionic project for the first time, then home.page.ts is being loaded, the trick here, is, when I click on the menu item for selecting an inner page to go to -> this is considered a valid click event for allowing playing audio files - in which the sound which didn't work before ( because I kept refreshing the same page w/o any clicks ) - now works on page switch..
UPDATE for background music ( for video games )
Found this thread ... I think it's the only way
How to make audio autoplay on chrome
It sounds like your issue is more related to browser permissions on automatically playing sounds.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
You can find more information here:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
The article goes on to suggest that when initiating programmatic audio play, a promise will be returned which can be used to handle success/fail cases, e.g.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}

How to properly dispose of an HTML5 Video and close socket or connection

I am building a web page with a list of video records. Clicking on each video record opens a modal dialog on the same page with detail of the record and an HTML5 Video player.
A user can open one video, close it, and open another as many times as they want. However, on Chome specifically, after 3-5 videos, the browser starts hanging for upwards of two minutes while displaying a message "waiting for socket".
Doing some reading, I have narrowed it to Chrome's inability to open more than 6 connections to the same host.
I must be doing something wrong with how I dispose of the Media players. I believe the socket remains open to the media for some period even though the html for the player has been removed from the dom.
Using:
Bootstrap,
MediaElement.js,
HTML5 Video,
MVC,
Controller returning "Range Request" of FilePathResult
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
player.remove();
}
});
I am going to go for my Self Learner badge, here, and answer my own question.
I did about 8 hours of research on this and came up with a great solution. Three things had to be done.
Set the HTML5 video src to something other than the original URL. This will trigger the player to close the open socket connection.
Set the HTML5 video src to a Base64 encoded data object. This will prevent the Error Code 4 issue MEDIA_ERR_SRC_NOT_SUPPORTED.
For issues in older versions of Firefox, also trigger the .load() event.
My Code:
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src","data:video/mp4;base64,AAAAHG...MTAw");
player.load();
player.remove();
}
});
I came up with the idea to load the data object as the src. However, I'd like to thank kud on GitHub for the super small base64 video.
https://github.com/kud/blank-video
Added a line between pause() and remove():
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src", "");
player.remove();
}
});

How can I stop and resume a live audio stream in HTML5 instead of just pausing it?

A notable issue that's appearing as I'm building a simple audio streaming element in HTML5 is that the <audio> tag doesn't behave as one would expect in regards to playing and pausing a live audio stream.
I'm using the most basic HTML5 code for streaming the audio, an <audio> tag with controls, the source of which is a live stream.
Current outcome: When the stream is first played, it plays whatever is streaming as expected. When it's paused and played again, however, the audio resumes exactly where it left off when the stream was previously paused. The user is now listening to a delayed version of the stream. This occurrence isn't browser-specific.
Desired outcome: When the stream is paused, I want the stream to stop. When it is played again, I want it resume where the stream is currently at, not where it was when the user paused the stream.
Does anyone know of a way to make this audio stream resume properly after it's been paused?
Some failed attempts I've made to fix this issue:
Altering the currentTime of the audio element does nothing to streaming audio.
I've removed the audio element from the DOM when the user stops stream playback and added it back in when user resumes playback. The stream still continues where the user left off and worse yet downloads another copy of the stream behind the scenes.
I've added a random GET variable to the end of the stream URL every time the stream is played in an attempt to fool the browser into believing that it's playing a new stream. Playback still resumes where the user paused the stream.
Best way to stop a stream, and then start it again seems to be removing the source and then calling load:
var sourceElement = document.querySelector("source");
var originalSourceUrl = sourceElement.getAttribute("src");
var audioElement = document.querySelector("audio");
function pause() {
sourceElement.setAttribute("src", "");
audioElement.pause();
// settimeout, otherwise pause event is not raised normally
setTimeout(function () {
audioElement.load(); // This stops the stream from downloading
});
}
function play() {
if (!sourceElement.getAttribute("src")) {
sourceElement.setAttribute("src", originalSourceUrl);
audioElement.load(); // This restarts the stream download
}
audioElement.play();
}
Resetting the audio source and calling the load() method seems to be the simplest solution when you want to stop downloading from the stream.
Since it's a stream, the browser will stop downloading only when the user gets offline. Resetting is necessary to protect your users from burning through their cellular data or to avoid serving outdated content that the browser downloaded when they paused the audio.
Keep in mind though that when the source attribute is set to an empty string, like so audio.src = "", the audio source will instead be set to the page's hostname. If you use a random word, that word will be appended as a path.
So as seen below, setting audio.src ="", means that audio.src === "https://stacksnippets.net/js". Setting audio.src="meow" will make the source be audio.src === "https://stacksnippets.net/js/meow" instead. Thus the 3d paragraph is not visible.
const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');
document.getElementById('p1').innerHTML = `First audio source: ${audio1.src}`;
document.getElementById('p2').innerHTML = `Second audio source: ${audio2.src}`;
if (audio1.src === "") {
document.getElementById('p3').innerHTML = "You can see me because the audio source is set to an empty string";
}
<audio id="audio1" src=""></audio>
<audio id="audio2" src="meow"></audio>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
Be aware of that behavior if you do rely on the audio's source at a given moment. Using the about URI scheme seems to trick it into behaving in a more reliable way. So using "about:" or "about:about", "about:blank", etc. will work fine.
const resetAudioSource = "about:"
const audio = document.getElementById('audio');
audio.src = resetAudioSource;
document.getElementById('p1').innerHTML = `Audio source: -- "${audio.src}"`;
// Somewhere else in your code...
if (audio.src === resetAudioSource){
document.getElementById('p2').innerHTML = "You can see me because you reset the audio source."
}
<audio id="audio"></audio>
<p id="p1"></p>
<p id="p2"></p>
Resetting the audio.src and calling the .load() method will make the audio to try to load the new source. The above comes in handy if you want to show a spinner component while the audio is loading, but don't want to also show that component when you reset your audio source.
A working example can be found here: https://jsfiddle.net/v2xuczrq/
If the source is reset using a random word, then you might end up with the loader showing up when you also pause the audio, or until the onError event handler catches it. https://jsfiddle.net/jcwvue0s/
UPDATE: The strings "javascript:;" and "javascript:void(0)" can be used instead of the "about:" URI and this seems to work even better as it will also stop the console warnings caused by "about:".
Note: I'm leaving this answer for the sake of posterity, since it was the best solution I or anyone could come up with at the time for my issue. But I've since marked Ciantic's later idea as the best solution because it actually stops the stream downloading and playback like I originally wanted. Consider that solution instead of this one.
One solution I came up with while troubleshooting this issue was to ignore the play and pause functions on the audio element entirely and just set the volume property of the audio element to 0 when user wishes to stop playback and then set the volume property back to 1 when the user wishes to resume playback.
The JavaScript code for such a function would look much like this if you're using jQuery (also demonstrated in this fiddle):
/*
* Play/Stop Live Audio Streams
* "audioElement" should be a jQuery object
*/
function streamPlayStop(audioElement) {
if (audioElement[0].paused) {
audioElement[0].play();
} else if (!audioElement[0].volume) {
audioElement[0].volume = 1;
} else {
audioElement[0].volume = 0;
}
}
I should caution that even though this achieves the desired functionality for stopping and resuming live audio streams, it isn't ideal because the stream, when stopped, is actually still playing and being downloaded in the background, using up bandwidth in the process.
However, this solution doesn't necessarily take up more bandwidth than just using .play() and .pause() on a streaming audio element. Simply using the audio tag with streaming audio uses up a great deal of bandwidth anyway, because once streaming audio is played, it continues to download the contents of the stream in the background when it is paused.
It should be noted that this method won't work in iOS because of purposefully built-in limitations for iPhones and iPads:
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
If you choose to use the workaround in this answer, you'll need to create a fallback for iOS devices that uses the play() and pause() functions normally, or your interface will be unable to pause the stream.
Tested #Ciantics code and it worked with some modifications, if you want to use multiple sources.
As the source is getting removed, the HTML audio player becomes inactive, so the source (URL) needs to be added directly after again to become active.
Also added an event listener at the end to connect the function when pausing:
var audioElement = document.querySelector("audio");
var sources = document.querySelector("audio").children;
var sourceList = [];
for(i=0;i<sources.length;i++){
sourceList[i] = sources[i].getAttribute("src");
}
function pause() {
for(i=0;i<sources.length;i++){
sources[i].setAttribute("src", "");
}
audioElement.pause();
// settimeout, otherwise pause event is not raised normally
setTimeout(function () {
audioElement.load(); // This stops the stream from downloading
});
for(i=0;i<sources.length;i++){
if (!sources[i].getAttribute("src")) {
sources[i].setAttribute("src", sourceList[i]);
audioElement.load(); // This restarts the stream download
}
}
}
audioElement.addEventListener("pause", pause);

HTML5 capture audio from default microphone

Can somebody help me on how to capture audio from default microphone using HTML5?
There are many samples available, but none of them seem to working.
I have tried Audio capturing with HTML5
As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'
There's some great articles on HTML5 Rocks. This is just one that I pulled.
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled
// success callback when requesting audio input stream
function successCallback(stream) {
var audioContext = new (window.webkitAudioContext)();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function errorCallback() {
console.log("The following error occurred: " + err);
}
navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );
make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.
Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.

HTML5 Videos in Mobile Safari Issue

Here is my scenario:
I am building a "kiosk" application in safari with 2 videos, one acting as a "screensaver" and the other is a supplementary video. The SS is looping fine via: (done on body onload="init()")
var myVideo = document.getElementById('screensaver');
myVideo.addEventListener('ended', playVideo, false);
function playVideo(){
var myVideo = document.getElementById('screensaver');
myVideo.play();
}
When the user taps the screen during the SS, it fades out $('#screensaver').fadeOut(1000); and the user is presented a question with a button to play the next video.
When the second video is done via:
$('#presentation').bind('ended', function(){
$(this).fadeOut(1000, function(){
$('#swapVideo').show(); //Overlay for user interaction
$('#screensaver').fadeIn(1000);
$('#screensaver').get(0).play();
});
});
The SS shows up, plays, but no longer loops. Are eventListeners lost when the display is set to none?
The same thing happens when I try to play the second video again. The 'ended' eventListener seems to be lost...
I believe that iOS ignores .play(). Apple believes it's best to prevent sites from automatically playing content, which could potentially eat up someone's data plan or create undesirable actions on iOS.
On iOS, .play() can only executed directly from a user interaction.
Documentation
As for your question, event listeners are not unbound if you change the display property.
Fiddle
$('.container').on('custom', function (evt) {
$(this).toggle();
});