webrtc协商过程
媒体协商是为了保证交互双方通过交换信息来保证交互的正常进行，确保双方编码协议以及网络信息等。
主要流程：
1.发起端创建offer，并调用setLocalDescription设置本地SDP
2.通过信令服务器(WS)将含有SDP的offer设置给对方
3.接受端接收到offer后，调用setRemoteDescription设置远程SDP
4.接受端创建answer，并调用setLocalDescription设置本地SDP
5.通过信令服务器将含有SDP的answer发送给发起端
6.发起端调用setRemoteDescription将此SDP信息保存
主要涉及方法
1.createOffer
2.setLocalDescription
3.createAnswer
4.setRemoteDescription
1V1视频通话demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC Video Call Demo</title>
</head>
<body>
<h1>WebRTC Video Call Demo</h1>
<video id="localVideo" autoplay playsinline muted></video>
<video id="remoteVideo" autoplay playsinline></video>
<button onclick="initCall()">Start Call</button>
<button onclick="hangUp()">Hang Up</button>
<script>
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let pc1;
let pc2;
let offerOptions = {
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
};
async function getLocalStream() {
try {
return await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
} catch (e) {
console.error('Failed to get local stream', e);
}
}
function createPeerConnection() {
return new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
}
async function initCall() {
const localStream = await getLocalStream();
localVideo.srcObject = localStream;
pc1 = createPeerConnection();
pc2 = createPeerConnection();
localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
pc1.ontrack = event => remoteVideo.srcObject = event.streams[0];
pc2.ontrack = event => remoteVideo.srcObject = event.streams[0];
pc1.onicecandidate = event => event.candidate && pc2.addIceCandidate(event.candidate);
pc2.onicecandidate = event => event.candidate && pc1.addIceCandidate(event.candidate);
// Create offer and answer
pc1.createOffer(offerOptions)
.then(offer => pc1.setLocalDescription(offer))
.then(() => pc2.setRemoteDescription(pc1.localDescription))
.then(() => pc2.createAnswer())
.then(answer => pc2.setLocalDescription(answer))
.then(() => pc1.setRemoteDescription(pc2.localDescription));
}
function hangUp() {
pc1.close();
pc2.close();
localVideo.srcObject = null;
remoteVideo.srcObject = null;
}
</script>
</body>
</html>