Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I copied this code from this blog post: https://blog.groupbuddies.com/posts/39-tutorial-html-audio-capture-streaming-to-nodejs-no-browser-extensions

And similar on latest Chrome:

Uncaught TypeError: undefined is not a function

But I know that this api is supported from both browser

What am I doing wrong?

It's not supported unprefixed yet. See http://caniuse.com/#search=getusermedia

You'll need to get the browser-specific prefix and use that. As posted in another answer :

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
This will set navigator.getUserMedia to whatever it detects to be the proper prefixed version.
                I accetpted this because identical to the other, but it has been written one minute before.
– realtebo
                Mar 11, 2015 at 16:30
                Now we have to use navigator.mediaDevices.getUserMedia() because navigator.getUserMedia() is deprecated and will display the same error message: developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
– baptx
                Oct 31, 2017 at 11:12
if (typeof navigator.mediaDevices.getUserMedia === 'undefined') {
    navigator.getUserMedia({
        audio: true
    }, streamHandler, errorHandler);
} else {
    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(streamHandler).catch(errorHandler);
Check the MDN page, especially the first part of the first example:
navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
It's not that well-supported - you'll need browser prefixes. 
Navigator.getUserMedia() is deprecated, advised to use MediaDevices.getUserMedia() 
async function getMedia(pc) {
  let stream = null;
  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
The Problem is
If the current document isn't loaded securely, navigator.mediaDevices will be undefined, and you cannot use getUserMedia(). See Security for more information on this and other security issues related to using getUserMedia()
as given in https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
after searching, I got the solution


try Following steps:
Open Chrome browser, Type chrome://flags/#unsafely-treat-insecure-origin-as-secure in the url.
Add the path of your host/ local url (ex. localhost/myproject or YOUR_HOSTNAME)
Select as Enabled.
Relaunch Browser.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.