一、麦克风获取音频

if (!navigator.mediaDevices.getUserMedia) {
    ElMessage.error("浏览器不支持音频输入!");
  } else {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(async (mediaStream: any) => {
        let strem = mediaStream;//音频信息,视频同理
      })
      .catch((error) => {
        switch (error.message || error.name) {
          case "PERMISSION_DENIED":
          case "PermissionDeniedError":
            ElMessage.error("用户拒绝提供信息!");
            break;
          case "NOT_SUPPORTED_ERROR":
          case "NotSupportedError":
            ElMessage.error("浏览器不支持硬件设备!");
            break;
          case "MANDATORY_UNSATISFIED_ERROR":
          case "MandatoryUnsatisfiedError":
            ElMessage.error("无法发现指定的硬件设备!");
            break;
          default:
            ElMessage.error("无法打开麦克风。异常信息:" + (error.code || error.name));
            break;
        }
      });
  }

二、实例化一个webRtc对象,并将音频信息添加进去

        pc = new RTCPeerConnection();
        pc.addTransceiver("audio", { direction: "sendonly" });
        mediaStream.getTracks().forEach((track: MediaStreamTrack) => {
          pc.addTrack(track, mediaStream);
        });

三、发送webRtc请求

       const offer = await pc.createOffer();
       pc.setLocalDescription(offer);

四、使用信令服务器进行媒体流传输

 // 连接信令服务器中转
        const { data: resp } = await axios({
          method: "post",
          url: "",
          data: {
            api: "",
            clientip: null,
            streamurl: ``,
            sdp: offer.sdp  /、信息
          }
        });

Logo

音视频技术社区,一个全球开发者共同探讨、分享、学习音视频技术的平台,加入我们,与全球开发者一起创造更加优秀的音视频产品!

更多推荐