PG Software Development

Posted: **Mon Mar 16, 2020 7:27 am**

Hi Clifton,

This is nothing to do with Powerpac but maybe you could help. I have noticed a very recent change in Firefox. I have always used an online html5 recording system in my program and it is loaded into an iframe using pgGotoURL. The day before yesterday this stopped working. I have now found 2 reasons that explain why. The first was that navigatorUserMedia.getUserMedia() is now obsolete https://developer.mozilla.org/fr/docs/NavigatorUserMedia.getUserMedia and has been replaced by navigator.mediaDevices.getUserMedia(). The second reason is more problematic. It seems that it is now impossible to authorise the use of a microphone from code in an iframe. The error message: no live audio input: notallowederror: the request is not allowed by the user agent or the platform in the current context is always displayed.

I was able to update my system using navigator.mediaDevices.getUserMedia() but it will only work if the code is contained in a top level html. For example this original demo https://www.mediacours.com/test_recorder/recorder1.html fails (surprisingly without an error message) but this one https://www.mediacours.com/test_recorder/recorder2.html works using the new function if you first click on the Setup button.

So I thought the easiest solution might be to put all the necessary code into the /ns7/index.html file. I have done this successfully adding an authorisation button etc. but I don't know how to call functions in the index file from the TB part of the program. I have tried top.myFunction() and Window.document.myFunction() but they don't work. Is there another way?

The other frustrating thing is that there is little or no information available about this. I guess there will be soon if it affects other apps. Online recording is probably not yet a mainstream activity. To check that it wasn't a malfunction I uninstalled and reinstalled Firefox but to no avail.

Jon

Posted: **Mon Mar 16, 2020 8:16 am**

For starters, the way to call a top or window level function is like this:
window.myFunction(); ... not window.document.myFunction()

Also, a window level function can be called be just invoking:
myFunction(); because the browser assumes "window" is the reference.

All PowerPac functions are window level functions.

It is possible to create all your window level objects using XML <make> tags. You assign functions the same way as will ToolBook objects and can execute those functions by using various PowerPac functions, most of which will work on window level objects. You shouldn't have to manipulate the index.html files if you just rely on XML in this way. Plus it is much more flexible.

As to the microphone issue, if you can make a very basic example, I'll take a look at it.

Posted: **Mon Mar 16, 2020 8:34 am**

Thanks Clifton.

I have made some progress. Using this info https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe I can call functions in the top window like this: window.parent.testMe(); if the function is in the <head> section but your <make> tag solution sounds better. I'm not sure making 'a very basic example' would be all that easy. The recording process is quite complex with timed recording and / or user-controlled recording. It may well be that timed recording is off the menu with these new Firefox updates which I gather are prompted by security concerns but as I said before there is very little info on any of this.

I think for the moment I'll attempt to finish what I've started and if I find this impossible I'll have to make that very basic example for you. Thanks for your offer.
John

Posted: **Mon Mar 16, 2020 8:53 am**

In the ToolBook iframe, you technically should not need to use window.parent.myFunction(). Just myFunction() should work unless your application is stacked in some unusual way.

But at any rate, use whatever works.

Posted: **Tue Mar 17, 2020 11:15 am**

Hi Clifton,
I think I have managed to make as basic an example as possible. I've put everything in a zip https://www.mediacours.com/tb_examples/recorder_test.zip
The recording works in this example because I have added code to the /ns7/index.html file. Previously this code has always been in an html loaded by pgGotoURL. You will need to add a folder and a file to the export folder as shown below if you export the tbk.

Thanks for your time
John

Posted: **Wed Mar 18, 2020 12:32 am**

I understand you have a ways to go on this development.

However, I've made some adjustments so you don't have to modify the index.html files everytime you run an export.

You're getting pretty proficient with XML so you should be able to understand the modifications I've made to the XML to get this to work without any modifying of index.html files. In this case, you don't even need the sharedActions element, but it may sitll be necessary for the rest of your development work on this.

I also changed the behavior of your page to use the Export option called "Auto-load XML with each page". That part is not necessary but it gives you a chance to see the benefits of this option in the future.

Posted: **Wed Mar 18, 2020 6:14 am**

Thanks Clifton,

Unfortunately I can't get the new version to work. I get this error:

This is line 51:

I got plenty of errors while I was trying to make the test app but not this one. I've been trying to figure out how to fix it but I haven't found a solution yet. I don't understand it because it's the standard function to use in this situation as explained here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

John

UPDATE
I have just discovered that if I use Xampp there is no problem!? Meno male! (untranslateable italian - so less bad

)

Posted: **Wed Mar 18, 2020 8:15 am**

Please note that I couldn't get the recording system to initialize using the app.js in the js folder. I copied your index.html <script> tag into a new app.js and that is the that loads in my example.

I guess, I mostly show how to avoid all the complexity with this by not requiring any modifications to index.html files.

When my revised version initialized, I noticed that if I didn't wait long enough before clicking "stop", a recBuffer error (undefined) would pop up. I'm sure this could be fixed, but searching for it in minified js files is not preferred. It is better to use the full source of the third party files to find and fix little issues. Anyway, I wonder if someone else on the web has come with a more browser friendly (cross-browser) version of a recording system. There is probably a Flash alternative, but this would be highly NOT recommended with the end of life support in Dec 2020.

Posted: **Wed Mar 18, 2020 9:10 am**

Yes I am seeing that error too but randomly. I've just tried adding two patches mentioned here https://blog.addpipe.com/using-webaudiorecorder-js-to-record-audio-on-your-website/ and left a comment as someone else also mentions the recBuffers problem. I've put a zip with min and complete versions here. https://www.mediacours.com/tb_examples/web-audio-recorder-js-0.1.zip if you're interested.

Actually this is not the recorder I have been using. I have been using this one https://github.com/welll/record-encode-audio-from-browser which produces wave and mp3 files almost sinultaneously. I prefer it because it includes pause and resume functions but the quality of the mp3 is not great. The pitch is lowered. I am in touch with the developer but I'm not sure he is all that keen on returning to this project. It stopped working a few days ago but I was able to fix it using navigator.mediaDevices.getUserMedia instead of the now obsolete navigatorUserMedia.getUserMedia() and I sent him my updated version.

webaudiorecorder-js produces good quality mp3 files although it's a bit slow on android. I've tried to add pause and resume functions to it but it's a bit out of my league which is somewhat of an understatement, I guess.

I still have TB/Powerpac examples of these two projects on my site https://www.mediacours.com/recorder and https://www.mediacours.com/recorder2 but they no longer work in Firefox. The last time I tried they were still working in Chrome.

Posted: **Thu Mar 26, 2020 12:06 pm**

Hi Clifton,
I have now sorted out some of the recording problems but the new system creates new problems. I used to use a system that took the length of the user's recording into account. If the recording lasted for more than 10 seconds I showed the audio object's controls on an html loaded by pgGotoURL. This allowed the user to listen to different parts of the recording without having to listen to it all. I have tried showing controls with pgSoundLoader but, unless I'm doing something wrong, it seems that there are no controls for moving backwards and forwards. I can't actually get it to stop and start either but this may be because the source is a blob rather than a regular file. If I can't use the soundLoader I suppose I could use an audio object on an html as I did previously. What do you think?
John

PG Software Development

Firefox blocking microphone use

Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use

Re: Firefox blocking microphone use