WebRTC

本文详细介绍了WebRTC的创建流程,包括多人视频的实现,以及WebRTC断线重连的处理方法。在多人视频中,通过创建多个peerConnection并放入集合进行管理。针对断线重连,重点讨论了iceGatheringState和iceConnectionState的各个状态,当iceConnectionState达到'failed'时,会执行重置和offer创建以实现重新连接。
摘要由CSDN通过智能技术生成

创建WebRTC流程

A B <!--创建本地媒体流-->
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        //绑定本地媒体流到video标签用于输出
        $('.localVideo').attr('src', URL.createObjectURL(stream));
        localStream = stream;
    })
A --oncall-->B
B --accept-->A

A  <!--创建peerConnection-->
    pc = new RTCPeerConnection(iceServer);
    pc.onicecandidate = function(event){
       //发送ice_candidate
    }
    pc.onaddstream = function (event) {
       //设置远端stream
    }
    pc.addStream(localVideo);

A   <!--创建offer-->
    pc.createOffer.then(function (offer) {
        return pc.setLocalDescription(offer);  //触发onicecandidate发送ice
    }).then(function () {
        <!--发送offer事件和pc.localDescription-->
    }
A --offer-->B

B   <!--创建answer-->
    pc.setRemoteDescription(data.sdp).then();  //触发onaddstrean将远端视频流放入video
    pc.createAnswer().then(function (answer) {
       
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值