Блог

Я прочитал о WebRTC в MDN и попытался открыть одноранговое соединение. Я решил открыть как локальные, так и удаленные соединения на одной странице и написал этот код:

 const configuration = {iceServers: [
    {urls: 'stun:stun.l.google.com:19302'},
    {urls: 'stun:stun1.l.google.com:19302'},
]};

const localConnection = new RTCPeerConnection(configuration);
const remoteConnection = new RTCPeerConnection(configuration);
let localSendChannel, remoteSendChannel;

localConnection.onicecandidate = ({candidate}) => {
    console.log('local candidate', candidate);
    if (candidate) remoteConnection.addIceCandidate(candidate)
}

remoteConnection.onicecandidate = ({candidate}) => {
    console.log('remote candidate', candidate);
    if (candidate) localConnection.addIceCandidate(candidate)
}

const connect = async () => {
    const offer = await localConnection.createOffer();
    console.log('local offer', offer);
    await localConnection.setLocalDescription(offer);
    console.log('local localDescription', localConnection.localDescription);
    await remoteConnection.setRemoteDescription(localConnection.localDescription);
    
    const answer = await remoteConnection.createAnswer();
    await remoteConnection.setLocalDescription(answer);
    console.log('remote answer', answer);
    console.log('remote localDescription', remoteConnection.localDescription);
    await localConnection.setRemoteDescription(remoteConnection.localDescription);

    localConnection.addEventListener('connectionstatechange', (e) => {
        console.log('localConnection new state', e.connectionState);
    });
    
    remoteConnection.addEventListener('connectionstatechange', (e) => {
        console.log('remoteConnection new state', e.connectionState);
    });

    const gumStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
    for (const track of gumStream.getTracks()) 
        localConnection.addTrack(track);
}

const openLocalChannel = async () => {
    localSendChannel = localConnection.createDataChannel("sendChannel");
    localSendChannel.onopen = () => {
        console.log('local datachannel was opened');
        localSendChannel.send("Hello, world!")
    }
    
    localSendChannel.onclose = () => console.log('local datachannel was closed');
    localSendChannel.onmessage = (msg) => console.log('local channel got message', msg);
}

const waitRemoteChannel = () => {
    remoteConnection.ondatachannel = (e) => {
        remoteSendChannel = e.channel;
        console.log('remote atachannel was init');
        
        remoteSendChannel.onopen = () => console.log('remote datachannel was opened');
        remoteSendChannel.onclose = () => console.log('remote datachannel was closed');
        remoteSendChannel.onmessage = (msg) => console.log('remote channel got message', msg);
    };
}

const start = async () => {
    await connect();
    waitRemoteChannel();
    await openLocalChannel();
    
    localConnection.addEventListener('connectionstatechange', async (e) => {
        console.log('localConnection new state', e.connectionState);
    });
    
    remoteConnection.addEventListener('connectionstatechange', (e) => {
        console.log('localConnection new state', e.connectionState);
    });
}

start();
  

У меня нет кандидатов в Chrome, и у меня есть только null кандидаты в FireFox. Можете ли вы указать, где ошибка?

Обновлено: я добавил в код мультимедийные дорожки, добавляя и пытаясь создать канал данных после создания соединения. Но проблема остается

Вы ничего не делаете с соединением, ни добавляя дорожку, ни создавая канал данных. В результате предложение будет формально действительным, но не приведет к сбору кандидатов ice, а без кандидатов соединение не будет.