123 lines
3.7 KiB
HTML
123 lines
3.7 KiB
HTML
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
<script>
|
|
var hash = location.hash.substring(1).split('/');
|
|
|
|
var room = hash[0] || 'test-room';
|
|
var id = Math.random().toString(26).substring(2);
|
|
|
|
var receiver = hash[1] === 'recv';
|
|
|
|
var socket = io.connect();
|
|
|
|
var peers = {};
|
|
|
|
var mediaConstraints = {video: true, audio: true};
|
|
|
|
socket.on('connect', function() {
|
|
console.info('Connected to', room, id, receiver);
|
|
socket.emit('join', { id, room });
|
|
socket.emit('message', { id, room, type: 'joined' });
|
|
});
|
|
|
|
function getPeerConnection(peer, createOffer) {
|
|
if (peers[peer] !== undefined)
|
|
return peers[peer];
|
|
|
|
console.info('Creating PeerConnection for', peer);
|
|
var conn = new RTCPeerConnection();
|
|
conn.onicecandidate = function(event) {
|
|
console.info('ICE candidate:', event);
|
|
socket.emit('message', {
|
|
id, room, peer,
|
|
type: 'ice', ice: event.candidate });
|
|
}
|
|
|
|
conn.ontrack = function(track) {
|
|
console.info('Got track:', track);
|
|
}
|
|
|
|
conn.onaddstream = function(event) {
|
|
console.info('Got stream:', event.stream);
|
|
var video = document.getElementById("vremote")
|
|
video.srcObject = event.stream;
|
|
}
|
|
|
|
if (!receiver) {
|
|
navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
|
|
var video = document.getElementById("vlocal");
|
|
video.src = window.URL.createObjectURL(stream);
|
|
video.srcObject = stream;
|
|
|
|
conn.addStream(stream);
|
|
|
|
if (createOffer) {
|
|
conn.createOffer().then(function(offer) {
|
|
return conn.setLocalDescription(offer);
|
|
}).then(function() {
|
|
socket.emit('message', {
|
|
id, room, peer,
|
|
type: 'offer',
|
|
sdp: conn.localDescription
|
|
});
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
peers[peer] = conn;
|
|
|
|
return conn;
|
|
}
|
|
|
|
function report(err) {
|
|
console.info(err);
|
|
}
|
|
|
|
socket.on('message', function(data) {
|
|
if (data.id === id)
|
|
return;
|
|
|
|
console.info('Message:', data);
|
|
if (data.type === 'joined') {
|
|
var conn = getPeerConnection(data.id, true);
|
|
} else if (data.type === 'ice' && data.peer === id) {
|
|
var conn = getPeerConnection(data.id);
|
|
conn.addIceCandidate(data.ice).catch(e => {
|
|
console.log("Failure during addIceCandidate(): " + e.name);
|
|
});
|
|
} else if (data.type === 'offer' && data.peer === id) {
|
|
var conn = getPeerConnection(data.id, false);
|
|
navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
|
|
var video = document.getElementById("vlocal");
|
|
video.src = window.URL.createObjectURL(stream);
|
|
video.srcObject = stream;
|
|
|
|
conn.addStream(stream);
|
|
return conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
|
|
}).then(function() {;
|
|
return conn.createAnswer();
|
|
}).then(function(answer) {
|
|
return conn.setLocalDescription(answer);
|
|
}).then(function() {
|
|
socket.emit('message', {
|
|
id, room, peer: data.id,
|
|
type: 'answer', sdp: conn.localDescription })
|
|
}).catch(report);
|
|
} else if (data.type === 'answer' && data.peer === id) {
|
|
console.info('Session answer get:', data)
|
|
var conn = getPeerConnection(data.id, false);
|
|
conn.setRemoteDescription(new RTCSessionDescription(data.sdp)).catch(report);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#vlocal { border: 5px solid red; }
|
|
#vremote { border: 5px solid green; }
|
|
</style>
|
|
|
|
<video id="vlocal"></video>
|
|
<video id="vremote"></video>
|