Introduction to AdapterJS
AdapterJS is a powerful library that ensures cross-browser WebRTC compatibility. It acts as a wrapper around the different WebRTC implementations offered by major browsers, unifying their APIs and behaviors.
Getting Started
To include AdapterJS in your project, you can use a CDN:
<script src="https://cdn.jsdelivr.net/gh/Temasys/AdapterJS/adapter.min.js"></script>
Or you can install it via npm:
npm install adapterjs
Example APIs
getUserMedia
This API allows you to access the user’s media devices like camera and microphone.
navigator.getUserMedia({ video: true, audio: true }, function(stream) {
document.querySelector('video').srcObject = stream;
}, function(error) {
console.error('getUserMedia error: ', error);
});
RTCPeerConnection
RTCPeerConnection is the core API for WebRTC that handles the establishment of a network connection.
var pc = new RTCPeerConnection();
pc.onicecandidate = function(event) {
if (event.candidate) {
console.log('New ICE candidate: ', event.candidate.candidate);
}
};
pc.onaddstream = function(event) {
var video = document.createElement('video');
video.srcObject = event.stream;
document.body.appendChild(video);
};
// Add a stream to the connection
navigator.getUserMedia({ video: true, audio: true }, function(stream) {
pc.addStream(stream);
}, function(error) {
console.error('getUserMedia error: ', error);
});
createOffer and createAnswer
These methods generate SDP (Session Description Protocol) offers and answers, which are essential for establishing a connection.
pc.createOffer(function(offer) {
pc.setLocalDescription(offer);
// Send offer to the remote peer
}, function(error) {
console.error('createOffer error: ', error);
});
pc.createAnswer(function(answer) {
pc.setLocalDescription(answer);
// Send answer to the remote peer
}, function(error) {
console.error('createAnswer error: ', error);
});
App Example
Below is an example of a simple WebRTC video chat application using AdapterJS:
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Video Chat</title>
<script src="https://cdn.jsdelivr.net/gh/Temasys/AdapterJS/adapter.min.js"></script>
</head>
<body>
<h1>WebRTC Video Chat</h1>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<script>
var localVideo = document.getElementById('localVideo');
var remoteVideo = document.getElementById('remoteVideo');
var pc = new RTCPeerConnection();
pc.onicecandidate = function(event) {
if (event.candidate) {
// Send the ICE candidate to the remote peer
}
};
pc.onaddstream = function(event) {
remoteVideo.srcObject = event.stream;
};
navigator.getUserMedia({ video: true, audio: true }, function(stream) {
localVideo.srcObject = stream;
pc.addStream(stream);
pc.createOffer(function(offer) {
pc.setLocalDescription(offer);
// Send the offer to the remote peer
}, function(error) {
console.error('createOffer error:', error);
});
}, function(error) {
console.error('getUserMedia error:', error);
});
</script>
</body>
</html>
Hash: 766142ae45d9b4bf5e189216d048f5b0ad9469e20e0b8ec708d112b14c80801e
