RTCPeerConnection
A classe RTCPeerConnection é a classe principal no sistema de áudio e vídeo interativo em tempo real usando WebRTC no navegador. Ela representa uma conexão WebRTC do computador local para a extremidade remota. Essa interface fornece implementações de métodos para criar, manter, monitorar e fechar conexões.
Na verdade, se você tiver feito o desenvolvimento de sockets, será mais fácil para você entender RTCPeerConnection
que na verdade é uma versão aprimorada do socket.
O princípio de comunicação do WebRTC requer negociação de mídia, negociação de rede e configuração do servidor de sinalização em cenários reais. Desenhei uma imagem para resumir o processo de comunicação do WebRTC da seguinte forma:
Mas hoje, para esclarecer de forma simples RTCPeerConnection
, não consideraremos o problema de desenvolver e configurar um servidor de sinalização, para ser simples, tentaremos simular a comunicação de áudio e vídeo entre as duas extremidades na mesma página.
Antes disso, vamos entender algumas das APIs que serão utilizadas e os passos para estabelecer uma conexão com o WebRTC.
API relacionada
-
RTCPeerConnection
Uma interface representa uma conexão WebRTC do computador local para o remoto. Essa interface fornece implementações de métodos para criar, manter, monitorar e fechar conexões. -
PC.createOffer
Crie um método de oferta que retorne informações de oferta de SDP. -
PC.setLocalDescription
Defina as informações de descrição do SDP local. -
PC.setRemoteDescription
Defina as informações de descrição do SDP remoto, ou seja, os dados do SDP enviados pela outra parte. -
PC.createAnswer
Crie um método Answer Answer que retorna informações de resposta SDP. -
RTCIceCandidate
Informações de rede WebRTC (IP, porta, etc.) -
PC.addIceCandidate
Adicione as informações do IceCandidate da outra parte à conexão do PC, ou seja, adicione as informações de rede da outra parte.
Etapas de conexão WebRTC
-
1. Crie um objeto RTCPeerConnection para ambas as extremidades da conexão e adicione um fluxo local ao objeto RTCPeerConnection.
-
2. Obtenha as informações de descrição de mídia local (SDP) e troque-as com o par.
-
3. Obtenha informações de rede (candidato, endereço IP e porta) e troque com a extremidade remota.
-
Envie-me uma mensagem privada para receber os mais recentes e completos materiais de aprendizado e aprimoramento de áudio e vídeo C++ , incluindo ( C/C++ , Linux , FFmpeg , webRTC , rtmp , hls , rtsp , ffplay , srs )
Demonstração de combate real
Primeiro, adicionamos elementos de vídeo e botões de controle, que são introduzidos adpater.js
para se adaptar a cada navegador.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
video {
width: 320px;
}
</style>
</head>
<body>
<video id="localVideo" autoplay playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>
<div>
<button id="startBtn">打开本地视频</button>
<button id="callBtn">建立连接</button>
<button id="hangupBtn">断开连接</button>
</div>
<!-- 适配各浏览器 API 不统一的脚本 -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="./webrtc.js"></script>
</body>
</html>
Em seguida, defina os objetos que usaremos.
// 本地流和远端流
let localStream;
let remoteStream;
// 本地和远端连接对象
let localPeerConnection;
let remotePeerConnection;
// 本地视频和远端视频
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
// 设置约束
const mediaStreamConstraints = {
video: true
}
// 设置仅交换视频
const offerOptions = {
offerToReceiveVideo: 1
}
Em seguida, registre eventos para o botão e implemente a lógica de negócios relacionada.
function startHandle() {
startBtn.disabled = true;
// 1.获取本地音视频流
// 调用 getUserMedia API 获取音视频流
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream)
.catch((err) => {
console.log('getUserMedia 错误', err);
});
}
function callHandle() {
callBtn.disabled = true;
hangupBtn.disabled = false;
// 视频轨道
const videoTracks = localStream.getVideoTracks();
// 音频轨道
const audioTracks = localStream.getAudioTracks();
// 判断视频轨道是否有值
if (videoTracks.length > 0) {
console.log(`使用的设备为: ${videoTracks[0].label}.`);
}
// 判断音频轨道是否有值
if (audioTracks.length > 0) {
console.log(`使用的设备为: ${audioTracks[0].label}.`);
}
const servers = null;
// 创建 RTCPeerConnection 对象
localPeerConnection = new RTCPeerConnection(servers);
// 监听返回的 Candidate
localPeerConnection.addEventListener('icecandidate', handleConnection);
// 监听 ICE 状态变化
localPeerConnection.addEventListener('iceconnectionstatechange', handleConnectionChange)
remotePeerConnection = new RTCPeerConnection(servers);
remotePeerConnection.addEventListener('icecandidate', handleConnection);
remotePeerConnection.addEventListener('iceconnectionstatechange', handleConnectionChange);
remotePeerConnection.addEventListener('track', gotRemoteMediaStream);
// 将音视频流添加到 RTCPeerConnection 对象中
// 注意:新的协议中已经不再推荐使用 addStream 方法来添加媒体流,应使用 addTrack 方法
// localPeerConnection.addStream(localStream);
// 遍历本地流的所有轨道
localStream.getTracks().forEach((track) => {
localPeerConnection.addTrack(track, localStream)
})
// 2.交换媒体描述信息
localPeerConnection.createOffer(offerOptions)
.then(createdOffer).catch((err) => {
console.log('createdOffer 错误', err);
});
}
function hangupHandle() {
// 关闭连接并设置为空
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
hangupBtn.disabled = true;
callBtn.disabled = false;
}
// getUserMedia 获得流后,将音视频流展示并保存到 localStream
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
localStream = mediaStream;
callBtn.disabled = false;
}
function createdOffer(description) {
console.log(`本地创建offer返回的sdp:\n${description.sdp}`)
// 本地设置描述并将它发送给远端
// 将 offer 保存到本地
localPeerConnection.setLocalDescription(description)
.then(() => {
console.log('local 设置本地描述信息成功');
}).catch((err) => {
console.log('local 设置本地描述信息错误', err)
});
// 远端将本地给它的描述设置为远端描述
// 远端将 offer 保存
remotePeerConnection.setRemoteDescription(description)
.then(() => {
console.log('remote 设置远端描述信息成功');
}).catch((err) => {
console.log('remote 设置远端描述信息错误', err);
});
// 远端创建应答 answer
remotePeerConnection.createAnswer()
.then(createdAnswer)
.catch((err) => {
console.log('远端创建应答 answer 错误', err);
});
}
function createdAnswer(description) {
console.log(`远端应答Answer的sdp:\n${description.sdp}`)
// 远端设置本地描述并将它发给本地
// 远端保存 answer
remotePeerConnection.setLocalDescription(description)
.then(() => {
console.log('remote 设置本地描述信息成功');
}).catch((err) => {
console.log('remote 设置本地描述信息错误', err);
});
// 本地将远端的应答描述设置为远端描述
// 本地保存 answer
localPeerConnection.setRemoteDescription(description)
.then(() => {
console.log('local 设置远端描述信息成功');
}).catch((err) => {
console.log('local 设置远端描述信息错误', err);
});
}
// 3.端与端建立连接
function handleConnection(event) {
// 获取到触发 icecandidate 事件的 RTCPeerConnection 对象
// 获取到具体的Candidate
const peerConnection = event.target;
const iceCandidate = event.candidate;
if (iceCandidate) {
// 创建 RTCIceCandidate 对象
const newIceCandidate = new RTCIceCandidate(iceCandidate);
// 得到对端的 RTCPeerConnection
const otherPeer = getOtherPeer(peerConnection);
// 将本地获得的 Candidate 添加到远端的 RTCPeerConnection 对象中
// 为了简单,这里并没有通过信令服务器来发送 Candidate,直接通过 addIceCandidate 来达到互换 Candidate 信息的目的
otherPeer.addIceCandidate(newIceCandidate)
.then(() => {
handleConnectionSuccess(peerConnection);
}).catch((error) => {
handleConnectionFailure(peerConnection, error);
});
}
}
// 4.显示远端媒体流
function gotRemoteMediaStream(event) {
if (remoteVideo.srcObject !== event.streams[0]) {
remoteVideo.srcObject = event.streams[0];
remoteStream = event.streams[0];
console.log('remote 开始接受远端流')
}
}
Finalmente, algumas funções de log e funções de utilitário precisam ser registradas.
function handleConnectionChange(event) {
const peerConnection = event.target;
console.log('ICE state change event: ', event);
console.log(`${getPeerName(peerConnection)} ICE state: ` + `${peerConnection.iceConnectionState}.`);
}
function handleConnectionSuccess(peerConnection) {
console.log(`${getPeerName(peerConnection)} addIceCandidate 成功`);
}
function handleConnectionFailure(peerConnection, error) {
console.log(`${getPeerName(peerConnection)} addIceCandidate 错误:\n`+ `${error.toString()}.`);
}
function getPeerName(peerConnection) {
return (peerConnection === localPeerConnection) ? 'localPeerConnection' : 'remotePeerConnection';
}
function getOtherPeer(peerConnection) {
return (peerConnection === localPeerConnection) ? remotePeerConnection : localPeerConnection;
}
De fato, quando você estiver familiarizado com todo o processo, poderá extrair e encapsular todas as funções de Log de maneira uniforme. Para facilitar a compreensão de todo o processo de estabelecer uma conexão com o WebRTC durante o processo de leitura do código, nenhuma extração é realizada.
Bem, se tudo correr bem aqui, você estabeleceu com sucesso uma conexão WebRTC, o efeito é o seguinte:
(Pega na mesa o boneco pinguim do Ano do Rato)