How to get the microphone raw data

App Development
1

Hi, There.

I'm planning to develop a voice record web app.

However I can't find webos API to get audio steam data via microphone.

And then, I refer to below URL.

Below is my test code.

    function hasGetUserMedia() {
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    if (hasGetUserMedia()) {
        console.log('getUserMedia() is supported in your browser');
        navigator.mediaDevices.getUserMedia({ audio: true, video: false })
            .then(function(stream) {
                console.log('successCallback');
            })
            .catch(function(err) {
                console.log('failureCallback');
            });

    } else {
        console.log('getUserMedia() is not supported in your browser');
    }

    navigator.permissions.query({ name: 'microphone' }).then(function(result) {
        if (result.state == 'granted') {
            console.log('permissions granted');
        } else if (result.state == 'prompt') {
            console.log('permissions prompt');
        } else if (result.state == 'denied') {
            console.log('permissions denied');
        }
        result.onchange = function() {

        };
    });

When I launched test app, I got console log as below.

getUserMedia() is supported in your browser
permissions denied
failureCallback

I guess getUserMedia() API can't run on webOS OSE and I need to add microphone permission.

Could you help me?

2

Hi @youngyun,

We don't have any API to record audio data via mic.
Instead, you can use below pulseaudio utility to record audio data through mic.

parecord /tmp/rec_file.wav --device=precord

Thanks!

3

Hi, @youngyun
You can get audio stream via microphone by update webOS 2.6.
since webOS 2.6 supports webRTC, you can use getUserMedia() API.
Also, you need to update ares-cli 1.2.
And change appinfo.json

{
  "id": "com.example.app",
  "version": "1.0.0",
  "vendor": "LGE-SVL",
....

  "allowAudioCapture": true,
  "allowVideoCapture": true
}
4

Hi, @jikjoo

Thank you for your reply.
I change appinfo.json like your comment.

appinfo.json

{
    "id": "com.rec.app",
    "version": "1.0.0",
    "vendor": "My Company",
    "type": "web",
    "main": "index.html",
    "title": "rec app",
    "icon": "icon.png",
    "resolution": "1280x720",
    "allowAudioCapture": true,
    "allowVideoCapture": true,
    "requiredPermissions": [
        "time",
        "settings.read",
        "activities.manage"
    ]
}

However, there is still a permission problem of microphone on the webOS OSE2.6.

  • on the Chrome Browser
    image

  • on the webOS OSE 2.6.0
    image

Thank you.

5

I think it's a problem in using
navigator.permissions.query({ name: 'microphone' }).then(function(result)

this is my code, and I used below sites for references.


          const { navigator } = window;

          /* navigator.getUserMedia = navigator.getUserMedia =

            navigator.getUserMedia ||

            navigator.webkitGetUserMedia ||

            navigator.mozGetUserMedia; */

          const op = {

            video: false,

            audio: true

          };

          navigator.mediaDevices.getUserMedia(op)

            .catch(function (error) {

              if (error.name !== 'NotFoundError') {

                throw error;

              }

              return navigator.mediaDevices.enumerateDevices()

                .then(function (devices) {

                  var mic = devices.find(function (device) {

                    return device.kind === 'audioinput';

                  });

                  var constraints = {

                    video: false,

                    audio: mic && op.audio

                  };

                  console.log("enumerateDevices", { audio: constraints.audio, error })

                  navigator.mediaDevices.getUserMedia(constraints)

                    .then(stream => {

                      this.setState({ streamUrl: stream, localStream: stream });

                      this.localVideo.srcObject = stream;

                      console.log('return enumerate getUserMedia')

                      resolve();

                    })

                });

            })

            .then(

              stream => {

                this.setState({ streamUrl: stream, localStream: stream });

                this.localVideo.srcObject = stream;

                console.log('return getUserMedia')

                resolve();

              },

              () => { }

            );

        });


so how about testing microphone by completing successCallback function?
instead of using navigator.permissions.query

1 Like