Javascript 无法读取属性'；getUserMedia'；未定义的

我正在设计一个简单的网页，从系统麦克风录制音频，并使用php将其上传到服务器。但是，按下记录按钮时，我得到以下异常：

app.js:44未捕获类型错误：无法读取未定义的属性“getUserMedia” 在HTMLButtonElement.startRecording

我的HTML代码：

<div id="controls">
     <button id="recordButton">Record</button>
     <button id="pauseButton" disabled>Pause</button>
     <button id="stopButton" disabled>Stop</button>
    </div>
    <div id="formats">Format: start recording to see sample rate</div>
    <p><strong>Recordings:</strong></p>
    <ol id="recordingsList"></ol>
    <!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
    <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
    <script src="js/app.js"></script>

记录
暂停
停止
格式：开始记录以查看采样率
录制：

我的JavaScript代码：

//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;

var gumStream;                      //stream from getUserMedia()
var rec;                            //Recorder.js object
var input;                          //MediaStreamAudioSourceNode we'll be recording

// shim for AudioContext when it's not avb. 
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record

var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById("pauseButton");

//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
pauseButton.addEventListener("click", pauseRecording);

function startRecording() {
    console.log("recordButton clicked");

    /*
        Simple constraints object, for more advanced audio features see
        https://addpipe.com/blog/audio-constraints-getusermedia/
    */

    var constraints = { audio: true, video:false }

    /*
        Disable the record button until we get a success or fail from getUserMedia() 
    */

    recordButton.disabled = true;
    stopButton.disabled = false;
    pauseButton.disabled = false

    /*
        We're using the standard promise based getUserMedia() 
        https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
    */

    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
        console.log("getUserMedia() success, stream created, initializing Recorder.js ...");

        /*
            create an audio context after getUserMedia is called
            sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
            the sampleRate defaults to the one set in your OS for your playback device

        */
        audioContext = new AudioContext();

        //update the format 
        document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"

        /*  assign to gumStream for later use  */
        gumStream = stream;

        /* use the stream */
        input = audioContext.createMediaStreamSource(stream);

        /* 
            Create the Recorder object and configure to record mono sound (1 channel)
            Recording 2 channels  will double the file size
        */
        rec = new Recorder(input,{numChannels:1})

        //start the recording process
        rec.record()

        console.log("Recording started");

    }).catch(function(err) {
        //enable the record button if getUserMedia() fails
        recordButton.disabled = false;
        stopButton.disabled = true;
        pauseButton.disabled = true
    });
}

function pauseRecording(){
    console.log("pauseButton clicked rec.recording=",rec.recording );
    if (rec.recording){
        //pause
        rec.stop();
        pauseButton.innerHTML="Resume";
    }else{
        //resume
        rec.record()
        pauseButton.innerHTML="Pause";

    }
}

function stopRecording() {
    console.log("stopButton clicked");

    //disable the stop button, enable the record too allow for new recordings
    stopButton.disabled = true;
    recordButton.disabled = false;
    pauseButton.disabled = true;

    //reset button just in case the recording is stopped while paused
    pauseButton.innerHTML="Pause";

    //tell the recorder to stop the recording
    rec.stop();

    //stop microphone access
    gumStream.getAudioTracks()[0].stop();

    //create the wav blob and pass it on to createDownloadLink
    rec.exportWAV(createDownloadLink);
}

function createDownloadLink(blob) {

    var url = URL.createObjectURL(blob);
    var au = document.createElement('audio');
    var li = document.createElement('li');
    var link = document.createElement('a');

    //name of .wav file to use during upload and download (without extendion)
    var filename = new Date().toISOString();

    //add controls to the <audio> element
    au.controls = true;
    au.src = url;

    //save to disk link
    link.href = url;
    link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
    link.innerHTML = "Save to disk";

    //add the new audio element to li
    li.appendChild(au);

    //add the filename to the li
    li.appendChild(document.createTextNode(filename+".wav "))

    //add the save to disk link to li
    li.appendChild(link);

    //upload link
    var upload = document.createElement('a');
    upload.href="#";
    upload.innerHTML = "Upload";
    upload.addEventListener("click", function(event){
          var xhr=new XMLHttpRequest();
          xhr.onload=function(e) {
              if(this.readyState === 4) {
                  console.log("Server returned: ",e.target.responseText);
              }
          };
          var fd=new FormData();
          fd.append("audio_data",blob, filename);
          xhr.open("POST","upload2.php",true);
          xhr.send(fd);
    })
    li.appendChild(document.createTextNode (" "))//add a space in between
    li.appendChild(upload)//add the upload link to li

    //add the li element to the ol
    recordingsList.appendChild(li);
}

//webkitURL不推荐使用，但
URL=window.URL | | window.webkitURL；
var gumStream//来自getUserMedia（）的流
var-rec//Recorder.js对象
var输入//我们将录制MediaStreamAudioSourceNode
//当不是avb时，为AudioContext填充。
var AudioContext=window.AudioContext | | window.webkitadiocontext；
var audioContext//audio context帮助我们录制
var recordButton=document.getElementById（“recordButton”）；
var stopButton=document.getElementById（“stopButton”）；
var pauseButton=document.getElementById（“pauseButton”）；
//向这两个按钮添加事件
recordButton.addEventListener（“单击”，开始录制）；
stopButton.addEventListener（“单击”，停止录制）；
pauseButton.addEventListener（“单击”，暂停录制）；
函数startRecording（）{
日志（“单击记录按钮”）；
/*
简单约束对象，有关更高级的音频功能，请参见
https://addpipe.com/blog/audio-constraints-getusermedia/
*/
var约束={audio:true，video:false}
/*
禁用录制按钮，直到我们从getUserMedia（）获得成功或失败
*/
recordButton.disabled=true；
stopButton.disabled=false；
pauseButton.disabled=false
/*
我们使用的是基于承诺的标准getUserMedia（）
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*/
navigator.mediaDevices.getUserMedia（约束）。然后（函数（流）{
log（“getUserMedia（）成功，创建流，初始化Recorder.js…”）；
/*
在调用getUserMedia后创建音频上下文
sampleRate在调用getUserMedia后可能会更改，就像在macOS上通过AirPods录制时一样
采样器默认为操作系统中为播放设备设置的采样器
*/
audioContext=新的audioContext（）；
//更新格式
document.getElementById（“格式”）.innerHTML=“格式：1通道pcm@”+audioContext.sampleRate/1000+“kHz”
/*分配给gumStream供以后使用*/
gumStream=溪流；
/*使用流*/
输入=audioContext.createMediaStreamSource（流）；
/* 
创建Recorder对象并配置为录制单声道声音（1个通道）
录制2个频道将使文件大小加倍
*/
rec=新记录器（输入，{numChannels:1}）
//开始录制过程
记录
console.log（“记录已开始”）；
}).catch（函数（err）{
//如果getUserMedia（）失败，请启用录制按钮
recordButton.disabled=false；
stopButton.disabled=true；
pauseButton.disabled=true
});
}
函数暂停录制（）{
console.log（“pauseButton clicked rec.recording=“，rec.recording”）；
如果（记录）{
//停顿
建议停止（）；
pauseButton.innerHTML=“Resume”；
}否则{
//恢复
记录
pauseButton.innerHTML=“暂停”；
}
}
函数stopRecording（）{
日志（“单击停止按钮”）；
//禁用“停止”按钮，启用录制也允许新录制
stopButton.disabled=true；
recordButton.disabled=false；
pauseButton.disabled=true；
//重置按钮，以防暂停时录制停止
pauseButton.innerHTML=“暂停”；
//告诉录音机停止录音
建议停止（）；
//停止麦克风访问
gumStream.getAudioTracks（）[0]。停止（）；
//创建wav blob并将其传递给createDownloadLink
rec.exportWAV（createDownloadLink）；
}
函数createDownloadLink（blob）{
var url=url.createObjectURL（blob）；
var au=document.createElement（'audio'）；
var li=document.createElement（'li'）；
var link=document.createElement（'a'）；
//上载和下载期间使用的.wav文件的名称（不带扩展名）
var filename=new Date（）.toISOString（）；
//向元素添加控件
au.controls=true；
au.src=url；
//保存到磁盘链接
link.href=url；
link.download=filename+“.wav”//download强制浏览器使用文件名加载文件
link.innerHTML=“保存到磁盘”；
//将新的音频元素添加到li
李.儿童（非盟）；
//将文件名添加到li
li.appendChild（document.createTextNode（filename+“.wav”））
//将“保存到磁盘”链接添加到li
李.儿童(链接);；
//上传链接
var upload=document.createElement（'a'）；
upload.href=“#”；
upload.innerHTML=“upload”；
upload.addEventListener（“单击”），函数（事件）{
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（e）{
if（this.readyState==4）{
log（“服务器返回：”，e.target.responseText）；
}
};
var fd=新FormData（）；
追加（“音频数据”，blob，文件名）；
open（“POST”，“upload2.php”，true）；
xhr.send（fd）；
})
li.appendChild（document.createTextNode（“”）//在两者之间添加一个空格
li.appendChild（upload）//将上传链接添加到li
//将li元素添加到ol
RecordingList.appendChild（li）；
}

-检查它是否适用于您（似乎不适用）您正在使用https吗？-检查它是否适用于您（似乎不适用）您是否使用https？