webRTC

连接过程

获取媒体

//获取本地视频流
const localVideoRef = useRef<HTMLVideoElement>(null)

// 获取摄像头和麦克风
const getMediaDevices = () => {
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  })
    .then(stream => {
      console.log('stream', stream);
      localVideoRef.current!.srcObject = stream;
      localStreamRef.current = stream;
    })
    .catch(err => console.log('error', err));
}

创建RTC连接

//接收rtc连接
const pc = useRef<RTCPeerConnection>();

const createRtcConnections = () => {
    const _pc = new RTCPeerConnection();
    pc.current = _pc
    
    console.log('rtc 连接创建成功', _pc);
    //处理候选地址
    _pc.onicecandidate = e=> {
      if(e.candidate) {
        console.log('candidate', JSON.stringify(e.candidate));
      };
    }
    //RTC接收到远程媒体流时触发回调
    _pc.ontrack= e => {
      remoteVideoRef.current!.srcObject = e.streams[0]
    }
  };

将本地视频流添加到RTC连接

// 接收媒体流
const localStreamRef = useRef<MediaStream>()

const addLocalStreamToRTCConnection = () => {
  const localStream = localStreamRef.current!
  localStream.getTracks().forEach(track => {
    pc.current!.addTrack(track, localStream)
  })
  console.log('将本地视频流添加到Rtc 连接成功')
};

创建offer

// 创建offer
const createOffer = () => {
  pc.current!.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
  })
    .then(sdp =>{
      console.log('offer_sdp',JSON.stringify(sdp))
      //设置为本地描述
      pc.current?.setLocalDescription(sdp)
    })
};

创建应答

//设置应答，将远程sdp设置为本地描述
const createAnswer = () => {
  pc.current?.createAnswer({
    offerToReceiveAudio:true,
    offerToReceiveVideo:true,
  })
    .then(sdp =>{
      console.log('answer',JSON.stringify(sdp));
      //设置当前spd 为本地描述
      pc.current?.setLocalDescription(sdp)
    })
};

添加候选地址

rtc连接中需要接收候选地址的回调

//添加候选地址
const addCandidate = () => {
  const candidate = JSON.parse(textRef.current?.value)
  pc.current?.addIceCandidate(new RTCIceCandidate(candidate));
  console.log('添加候选地址成功', candidate);
};