1、实现录音功能

核心函数是 navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
audio:true表示录音
video:true表示录相，video可设置width height

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>h5实现录音</title>
  9.   <script>
  10.     let recorder
  11.     function start() {
  12.       let videoTarget = document.getElementById('audio');
  13.       navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
  14.         .then((stream) => {
  15.           recorder = new MediaRecorder(stream);
  16.           videoTarget.srcObject = stream;
  17.           videoTarget = (...arg) => {
  18.             console.log(arg);
  19.           }
  20.           recorder.ondataavailable = (event) => {
  21.             let url = URL.createObjectURL(event.data);
  22.             let link = document.createElement("a");
  23.             link.target = "_blank";
  24.             link.href = url;
  25.             link.click();
  27.           }
  28.           recorder.start();
  29.         });
  30.     }
  32.     function stop() {
  33.       recorder.stop();
  34.     }
  35.   </script>
  36. </head>
  38. <body>
  39.   <video id="audio" width="400" height="600" controls autoplay></video>
  40.   <input onclick="start()" type="button" value="开始" />
  41.   <input onclick="stop()" type="button" value="结束" />
  42. </body>
  44. </html>

2、实现录视频 | 保存下载功能

参考该网址：https://www.webrtc-experiment.com/RecordRTC/simple-demos/