基于WebRTC实现音视频通话

最新推荐文章于 2025-04-12 22:33:44 发布

爱在拜城_sunbea

最新推荐文章于 2025-04-12 22:33:44 发布

阅读量721

点赞数 5

文章标签： webrtc 音视频通信

本文链接：https://blog.youkuaiyun.com/qq_30987095/article/details/145143113

版权

客户端采用 WebRTC 技术（推流），通讯用 websocket。

WebRTC 像是一个面试过程：
第一步：发起方（拨打电话者）点击拨打电话时，获取本地媒体流并推流给接收方同时捕获接收方推过来的流，捕获到后把流设置到 dom 上，监听 ICE 候选确保能点对连接，生成 offer，通过 websocket 告知接收方并拉起等待接听界面。

//获取媒体流
stream.value = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
});

// 初始化 PeerConnection
peerConnection.value = new RTCPeerConnection({
    iceServers: [
        {
            urls: 'stun:stun.l.google.com:19302'
        }
    ]
});

// 推流给接收方
stream.value.getTracks().forEach((track) => {
    peerConnection.value.addTrack(track, stream.value);
});

// 捕获接收方的流
peerConnection.value.ontrack = (event) => {
    remoteStream.value = event.streams[0];
    if (callType.value === TypeVideo) {
        remoteVideo.value.srcObject = remoteStream.value;
    } else {
        remoteAudio.value.srcObject = remo