简单使用webRtc进行音频传输

最新推荐文章于 2024-08-13 11:45:59 发布

codeQuality

最新推荐文章于 2024-08-13 11:45:59 发布

阅读量411

点赞数 1

文章标签： webrtc 音视频

本文链接：https://blog.csdn.net/m0_46647799/article/details/131892090

版权

一、麦克风获取音频

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  /、信息
          }
        });