WebRTC实现点对点音视频通话

我就是我 2024-02-21 09:52 115阅读 0赞

1）本地音视频输入设备

首先，需要获取到本地的音视频输入设备，即麦克风、摄像头。通过MediaTrackConstraints可以设置相关参数，包括优先值、最大值、最小值等。需要注意的是，不仅是不同的硬件，而且不同的操作系统、不同的浏览器所支持的参数值范围也是不相同的，所以兼容性测试是不可忽视的。

async function getLocalStream(constraints: MediaStreamConstraints) {
      let c: MediaStreamConstraints = {
        audio: false,
        video: false,
      };
      const audio: MediaTrackConstraints = {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
      };
      const video: MediaTrackConstraints = {
        aspectRatio: 4 / 3,
        width: { ideal: 640, max: 800 },
        frameRate: { ideal: 15, max: 20 },
      };
      // 检查音视频输入设备
      (await navigator.mediaDevices.enumerateDevices()).forEach((d) => {
        switch (d.kind) {
          case 'audioinput':
            if (constraints.audio) {
              c.audio = audio;
            }
            break;
          case 'videoinput':
            if (constraints.video) {
              c.video = video;
            }
            break;
        }
      });
      return await navigator.mediaDevices.getUserMedia(c);
    }

2）媒体流操作

包括本地媒体流与远程对方媒体流。

/** 关闭媒体流 */
    function stopStream(stream: MediaStream | undefined | null) {
      stream?.getTracks().forEach((track) => track.stop());
    }

3）点对点连接

点对点连接的建立，最关键的就是搞清楚主叫方与被叫方的ICECandidate与SessionDescription交换过程，也就是一般所说的信令部分，以及媒体流Track建立。WebRTC没有提供统一的信令通道的实现，需要大家自己去实现，本文就不展开了。

let peerConnection: RTCPeerConnection | null = null;
    let localStream: MediaStream | null = null;
    let remoteStream: MediaStream | null = null;
     
    async function initPeerConnection(
      constraints: { audio: boolean; video: boolean },
      ice: RTCIceServer,
      offer: RTCSessionDescription | undefined,
      onCandidate: (candidate: RTCIceCandidate) => void,
    ) {
      peerConnection = new RTCPeerConnection({ iceServers: [ice] });
      localStream = await getLocalStream(constraints);
      localMedia?.getTracks().forEach((t) => peerConnection!.addTrack(t));
      remoteStream = new MediaStream();
     
      peerConnection.onicecandidate = ({ candidate }) => {
        candidate && onCandidate(candidate);
      };
     
      peerConnection.ontrack = async ({ track }) => {
        track.onunmute = () => {
          remoteMedia.addTrack(track);
        };
      };
     
      if (offer) {
        // 被叫方
        await peerConnection.setRemoteDescription(offer);
        const answerInit = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answerInit);
      } else {
        // 主叫方
        const offerInit = await peerConnection.createOffer({
          offerToReceiveAudio: constraints.audio,
          offerToReceiveVideo: constraints.video,
        });
        await peerConnection.setLocalDescription(offerInit);
      }
    }
     
    function getLocalDescription() {
      return peerConnection?.localDescription;
    }
     
    async function addRemoteDescription({ description }: { description: RTCSessionDescription }) {
      try {
        if (peerConnection) {
          if (description) {
            await peerConnection.setRemoteDescription(description);
          }
        }
      } catch (err: any) {}
    }
     
    async function addRemoteCandidate({ candidate }: { candidate: RTCIceCandidate }) {
      try {
        if (peerConnection) {
          if (candidate) {
            await peerConnection.addIceCandidate(candidate);
          }
        }
      } catch (err: any) {}
    }
     
    function closePeerConnection() {
      stopStream(remoteStream)
      stopStream(localStream)
      if (peerConnection) {
        peerConnection.close();
        peerConnection = null;
      }
    }

4）前端页面展示

这里以React项目为例，摘取前端页面中与点对点通话的音视频播放的相关实现代码。

const localVideoRef = useRef<HTMLVideoElement | null>(null)
      const remoteVideoRef = useRef<HTMLVideoElement | null>(null)
     
      useEffect(() => {
        const init = async () => {
          try {
            await initPeerConnection(
              { audio: true, video: true },
              ice,
              offer, // 主叫方，为空；被叫方，为信令通道接收到的主叫方SessionDescription
              (candidate) => {
                // 信令通道发送ICECandidate
              },
            )
            if (!offer) {  // 主叫方
              const sd = peerConnection.getLocalDescription()
              // 信令通道发送SessionDescription
            }
            localVideoRef.current!.srcObject = localStream
            remoteVideoRef.current!.srcObject = remoteStream
          } catch (err: any) {
            if (err === 'PermissionDeniedError') {
              // 浏览器权限请求未被接受
            }
          }
        }
        init()
     
        return () => {
          closePeerConnection()
        }
      }, [])
     
      return (
        // ...
        <video
          ref={remoteVideoRef}
          width={640}
          height={480}
          muted={false}
          autoPlay
          playsInline
        />
        <video
          ref={localVideoRef}
          width={144}
          height={108}
          muted={true}
          autoPlay
          playsInline
        />
        // ...
      )

WebRTC确实使得多媒体通信领域的开发变得更简单了。这里通过点对点音视频通话，分享了一点点WebRTC的开发经验。实际上，在多媒体通信领域，还有很多的应用场景与需求