4.4　打开麦克风

打开麦克风同样也是使用getUserMedia()方法，只不过约束条件不同。这里我们通过一个例子来阐述如何将麦克风音频数据捕获并输出到音频播放器上。具体步骤如下所示。

步骤1　打开h5-samples工程下的src目录，添加Microphone.jsx文件。定义约束条件，这里启用音频，禁用视频，代码如下所示。

---

const constraints = window.constraints = {
    //启用音频
    audio: true,
    //禁用视频
    video: false
};

---

步骤2　根据约束条件获取媒体，调用getUserMedia()方法，即可请求麦克风。代码如下所示。

---

//根据约束条件获取媒体
navigator.mediaDevices.getUserMedia(constraints)

---

步骤3　当成功获取到音频流后，将其传递给audio对象的srcObject即可，这样音频流就会输出至音频播放器并输出声音。大致处理如下所示。

---

//获取媒体成功
handleSuccess = (stream) => {
    //获取audio对象
    ...
    //不活动状态监听
    stream.oninactive = () => {
      ...
    };
    //将audio播放源指定为stream
    audio.srcObject = stream;
}

---

其中，stream.oninactive可以用来监听当前音频是不是处于活动状态。

步骤4　在页面渲染部分添加audio标签，audio是HTML5用来播放音频的一个标签。代码如下所示。

---

<audio controls autoPlay></audio>

---

这里我们添加了两个属性，作用如下所示。

·autoPlay：音频自动播放，用户不需要点击播放按钮。

·controls：添加此属性可以使得播放器显示出控制按钮，这样可以控制其暂停和播放。

步骤5　在src目录下的App.jsx及Samples.jsx里加上链接及路由绑定，参考第3章即可。完整的代码如下所示。

---

import React from "react";
/**
 * 麦克风示例
 */
class Microphone extends React.Component {
    componentDidMount(){
        const constraints = window.constraints = {
            //启用音频
            audio: true,
            //禁用视频
            video: false
        };
        //根据约束条件获取媒体

        navigator.mediaDevices.getUserMedia(constraints).then(this.handleSuccess). 
    catch(this.handleError);
    }

    //获取媒体成功
    handleSuccess = (stream) => {
        //获取audio对象
        let audio = this.refs['audio'];
        //获取音频轨道
        const audioTracks = stream.getAudioTracks();
        //获取音频设备名称
        console.log('获取的音频设备为: ' + audioTracks[0].label);
        //不活动状态
        stream.oninactive = () => {
            console.log('Stream停止');
        };
        window.stream = stream;
        //将audio播放源指定为stream
        audio.srcObject = stream;
    }

    //错误处理
    handleError(error) {
        console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    }

    render() {
    
        return (

            <div className="container">
                <h1>
                    <span>麦克风示例</span>
                </h1>
                {/* 音频对象，可播放声音 */}
                <audio ref="audio" controls autoPlay></audio>
                <p className="warning">警告: 如果没有使用头戴式耳机，声音会反馈到扬声器。</p>
            </div>

        );
    }
}
//导出组件
export default Microphone;

---

当获取到媒体数据流后，可以通过stream.getAudioTracks()得到音频轨道，然后再通过audioTracks[0].label获取到麦克风的名称。输出的内容如下所示。

---

获取的音频设备为：默认 - Internal Microphone (Built-in)

---

运行程序后即可直接打开麦克风，运行效果如图4-2所示。可以测试一下，当你对着麦克风说话，声音会回传到扬声器并播放出来。

图4-2　麦克风示例