webRTC初接触，网页获取媒体音视频

获取支持的设备列表

(async () => {
  //获取设备列表
  let devices = await navigator.mediaDevices.enumerateDevices();
  console.log(devices);
})();

 

获取到PC/移动端的支持设备：

audioinput：音频输入设备

videoinput：视频输入设备

audiooutput：音频输出设备

 

实时播放音频流媒体

设置一个audio标签用来展示和播放音频流，navigator.mediaDevices.getUserMedia() 获取音频流

audio.srcObject 将实时音频流传入audio标签播放（有回应挺难受的，一般很少这么用）

一般页面会有一个这个提示，允许后，麦克风音频才能使用。

<audio src="" controls autoplay></audio>

<script>
  (async () => {
    //获取音频流对象
    let stream = await navigator.mediaDevices.getUserMedia({
      video: false,
      audio: true,
    });
    //实时播放音频流
    document.querySelector("audio").srcObject = stream;
  })();
</script>

 

实时播放视频流

和获取音频流一样，使用getUserMedia 就是将video变为true

这个提示，允许后，摄像头视频才能使用。

 

 

<video src="" controls autoplay></video>

<script>
  (async () => {
    //获取音频流对象
    let stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false,
    });
    //实时播放音频流
    document.querySelector("video").srcObject = stream;
  })();
</script>

 

做一个简单的音频录制工具

 

先获取摄像头视频流，使用MediaRecorder媒体记录器记录音频流。格式为video/webm，h264编码。

记录器.start()：开始录制

记录器.stop()：停止录制，会回调ondataavailable函数，event.data就是媒体流数据

记录器.pause()：暂停录制

记录器.resume()：继续录制

使用URL.createObjectURL(媒体流数据)会返回一个blob类型的url，可以放在audio的src中。

 

 完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <audio src="" controls></audio>
    <br />
    <button id="start">开始录制</button>
    <button id="pause">暂停录制</button>
    <button id="resume">继续</button>
    <button id="stop">结束</button>
    <button id="getAudio">生成音频</button>
    <script>
      (async () => {
        /**
         * 录制音频
         */
        let stream = await navigator.mediaDevices.getUserMedia({
          video: false,
          audio: true,
        });
        let recorder = new MediaRecorder(stream, {
          mimeType: "video/webm;codecs=h264",
        });
        let data = null;
        //录制结束后的回调
        recorder.ondataavailable = (e) => {
          data = e.data;
          console.log(e.data);
        };
        $("#start").click(() => {
          // recorder.start(1000); //每隔1秒录制1次
          recorder.start();
        });
        $("#pause").click(() => {
          recorder.pause();
        });
        $("#resume").click(() => {
          recorder.resume();
        });
        $("#stop").click(() => {
          recorder.stop();
        });
        $("#getAudio").click(() => {
          //生成blob的音频资源地址
          document.querySelector("audio").src = URL.createObjectURL(data);
        });
      })();
    </script>
  </body>
</html>

 

posted @ 2022-01-13 00:28  herry菌  阅读(713)  评论(0)  编辑  收藏  举报