remove blur
This commit is contained in:
parent
5f471ec8df
commit
7e62a246b8
317
index.html
317
index.html
@ -2,249 +2,256 @@
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<script>
|
||||
var hash = location.hash.substring(1).split('/');
|
||||
var hash = location.hash.substring(1).split('/');
|
||||
|
||||
if (adapter.browserDetails.browser == 'firefox' && (hash[1] === 'window' || hash[1] == 'screen' || hash[1] == 'tab')) {
|
||||
if (adapter.browserDetails.browser == 'firefox' && (hash[1] === 'window' || hash[1] == 'screen' || hash[1] == 'tab')) {
|
||||
adapter.browserShim.shimGetDisplayMedia(window, hash[1]);
|
||||
}
|
||||
}
|
||||
|
||||
var room = hash[0] || 'test-room';
|
||||
var id = Math.random().toString(26).substring(2);
|
||||
var room = hash[0] || 'test-room';
|
||||
var id = Math.random().toString(26).substring(2);
|
||||
|
||||
var receiver = hash[1] === 'recv';
|
||||
var receiver = hash[1] === 'recv';
|
||||
|
||||
var socket;
|
||||
var socket;
|
||||
|
||||
function socketConnect() {
|
||||
function socketConnect() {
|
||||
socket = io.connect();
|
||||
socket.on('connect', function() {
|
||||
console.info('Connected to', room, id, receiver);
|
||||
socket.emit('join', { id, room });
|
||||
socket.emit('message', { id, room, type: 'joined' });
|
||||
socket.on('connect', function () {
|
||||
console.info('Connected to', room, id, receiver);
|
||||
socket.emit('join', {id, room});
|
||||
socket.emit('message', {id, room, type: 'joined'});
|
||||
});
|
||||
|
||||
socket.on('message', async function(data) {
|
||||
if (data.id === id)
|
||||
return;
|
||||
socket.on('message', async function (data) {
|
||||
if (data.id === id)
|
||||
return;
|
||||
|
||||
console.info('Message:', data);
|
||||
if (data.type === 'joined') {
|
||||
var conn = await getPeerConnection(data.id, true);
|
||||
} else if (data.type === 'ice' && data.peer === id) {
|
||||
var conn = await getPeerConnection(data.id);
|
||||
conn.addIceCandidate(data.ice).catch(e => {
|
||||
console.log("Failure during addIceCandidate(): " + e.name);
|
||||
});
|
||||
} else if (data.type === 'offer' && data.peer === id) {
|
||||
if (!receiver) {
|
||||
console.info('Requesting media...')
|
||||
var stream = document.getElementById("vlocal").srcObject;
|
||||
}
|
||||
|
||||
var conn = await getPeerConnection(data.id, false);
|
||||
|
||||
if (stream) {
|
||||
console.info('Adding stream')
|
||||
conn.addStream(stream);
|
||||
}
|
||||
|
||||
await conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
|
||||
var answer = await conn.createAnswer();
|
||||
await conn.setLocalDescription(answer);
|
||||
|
||||
socket.emit('message', {
|
||||
id, room, peer: data.id,
|
||||
type: 'answer', sdp: conn.localDescription })
|
||||
|
||||
} else if (data.type === 'answer' && data.peer === id) {
|
||||
console.info('Session answer get:', data)
|
||||
var conn = await getPeerConnection(data.id, false);
|
||||
conn.setRemoteDescription(new RTCSessionDescription(data.sdp)); //.catch(report);
|
||||
console.info('Message:', data);
|
||||
if (data.type === 'joined') {
|
||||
var conn = await getPeerConnection(data.id, true);
|
||||
} else if (data.type === 'ice' && data.peer === id) {
|
||||
var conn = await getPeerConnection(data.id);
|
||||
conn.addIceCandidate(data.ice).catch(e => {
|
||||
console.log("Failure during addIceCandidate(): " + e.name);
|
||||
});
|
||||
} else if (data.type === 'offer' && data.peer === id) {
|
||||
if (!receiver) {
|
||||
console.info('Requesting media...')
|
||||
var stream = document.getElementById("vlocal").srcObject;
|
||||
}
|
||||
|
||||
var conn = await getPeerConnection(data.id, false);
|
||||
|
||||
if (stream) {
|
||||
console.info('Adding stream')
|
||||
conn.addStream(stream);
|
||||
}
|
||||
|
||||
await conn.setRemoteDescription(new RTCSessionDescription(data.sdp));
|
||||
var answer = await conn.createAnswer();
|
||||
await conn.setLocalDescription(answer);
|
||||
|
||||
socket.emit('message', {
|
||||
id, room, peer: data.id,
|
||||
type: 'answer', sdp: conn.localDescription
|
||||
})
|
||||
|
||||
} else if (data.type === 'answer' && data.peer === id) {
|
||||
console.info('Session answer get:', data)
|
||||
var conn = await getPeerConnection(data.id, false);
|
||||
conn.setRemoteDescription(new RTCSessionDescription(data.sdp)); //.catch(report);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var peers = {};
|
||||
var peers = {};
|
||||
|
||||
async function getMedia() {
|
||||
async function getMedia() {
|
||||
if (hash[1] === 'screen' || hash[1] === 'window' || hash[1] === 'tab') {
|
||||
return navigator.getDisplayMedia({video: true});
|
||||
return navigator.getDisplayMedia({video: true});
|
||||
} else {
|
||||
return navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } });
|
||||
return navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getPeerConnection(peer, createOffer) {
|
||||
async function getPeerConnection(peer, createOffer) {
|
||||
if (peers[peer] !== undefined)
|
||||
return peers[peer];
|
||||
return peers[peer];
|
||||
|
||||
console.info('Creating PeerConnection for', peer);
|
||||
var conn = new RTCPeerConnection({iceServers: [
|
||||
var conn = new RTCPeerConnection({
|
||||
iceServers: [
|
||||
{urls: 'stun:numb.viagenie.ca'},
|
||||
{urls: 'turn:numb.viagenie.ca', username: 'informatic@hackerspace.pl', credential: 'dupa.8', "expiry": 86400}
|
||||
]});
|
||||
]
|
||||
});
|
||||
peers[peer] = conn;
|
||||
|
||||
conn.onicecandidate = function(event) {
|
||||
console.info('ICE candidate:', event);
|
||||
socket.emit('message', {
|
||||
id, room, peer,
|
||||
type: 'ice', ice: event.candidate });
|
||||
conn.onicecandidate = function (event) {
|
||||
console.info('ICE candidate:', event);
|
||||
socket.emit('message', {
|
||||
id, room, peer,
|
||||
type: 'ice', ice: event.candidate
|
||||
});
|
||||
}
|
||||
|
||||
conn.oniceconnectionstatechange = function(event) {
|
||||
switch(conn.iceConnectionState) {
|
||||
case 'disconnected':
|
||||
case 'failed':
|
||||
peers[peer].videoElement.remove();
|
||||
peers[peer].close();
|
||||
peers[peer] = null;
|
||||
break;
|
||||
}
|
||||
conn.oniceconnectionstatechange = function (event) {
|
||||
switch (conn.iceConnectionState) {
|
||||
case 'disconnected':
|
||||
case 'failed':
|
||||
peers[peer].videoElement.remove();
|
||||
peers[peer].close();
|
||||
peers[peer] = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
conn.ontrack = function(event) {
|
||||
console.info('Got track:', event);
|
||||
if (event.track.kind !== 'video') {
|
||||
console.warn('ignoring')
|
||||
return;
|
||||
}
|
||||
conn.ontrack = function (event) {
|
||||
console.info('Got track:', event);
|
||||
if (event.track.kind !== 'video') {
|
||||
console.warn('ignoring')
|
||||
return;
|
||||
}
|
||||
|
||||
const mediaStream = new MediaStream();
|
||||
const mediaStream = new MediaStream();
|
||||
|
||||
if (conn.videoElement) {
|
||||
var video = conn.videoElement;
|
||||
} else {
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute("title", peer);
|
||||
if (receiver)
|
||||
video.setAttribute("class", "receiver");
|
||||
document.getElementById("peers").appendChild(video);
|
||||
conn.videoElement = video;
|
||||
}
|
||||
if (conn.videoElement) {
|
||||
var video = conn.videoElement;
|
||||
} else {
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute("title", peer);
|
||||
if (receiver)
|
||||
video.setAttribute("class", "receiver");
|
||||
document.getElementById("peers").appendChild(video);
|
||||
conn.videoElement = video;
|
||||
}
|
||||
|
||||
mediaStream.addTrack(event.track)
|
||||
mediaStream.addTrack(event.track)
|
||||
|
||||
video.srcObject = mediaStream;
|
||||
video.onloadedmetadata = function(e) {
|
||||
video.play();
|
||||
}
|
||||
video.srcObject = mediaStream;
|
||||
video.onloadedmetadata = function (e) {
|
||||
video.play();
|
||||
}
|
||||
}
|
||||
|
||||
conn.onaddstream = function(event) {
|
||||
console.info('Got stream:', event.stream);
|
||||
/*var video = document.getElementById("vremote")
|
||||
video.srcObject = event.stream;
|
||||
video.onloadedmetadata = function(e) {
|
||||
video.play();
|
||||
}*/
|
||||
conn.onaddstream = function (event) {
|
||||
console.info('Got stream:', event.stream);
|
||||
/*var video = document.getElementById("vremote")
|
||||
video.srcObject = event.stream;
|
||||
video.onloadedmetadata = function(e) {
|
||||
video.play();
|
||||
}*/
|
||||
}
|
||||
|
||||
if (createOffer) {
|
||||
if (!receiver) {
|
||||
var video = document.getElementById("vlocal");
|
||||
conn.addStream(video.srcObject);
|
||||
}
|
||||
if (!receiver) {
|
||||
var video = document.getElementById("vlocal");
|
||||
conn.addStream(video.srcObject);
|
||||
}
|
||||
|
||||
var datachannel = conn.createDataChannel('sendDataChannel');
|
||||
var datachannel = conn.createDataChannel('sendDataChannel');
|
||||
|
||||
var offer = await conn.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true});
|
||||
await conn.setLocalDescription(offer);
|
||||
socket.emit('message', {
|
||||
id, room, peer,
|
||||
type: 'offer',
|
||||
sdp: conn.localDescription
|
||||
});
|
||||
var offer = await conn.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true});
|
||||
await conn.setLocalDescription(offer);
|
||||
socket.emit('message', {
|
||||
id, room, peer,
|
||||
type: 'offer',
|
||||
sdp: conn.localDescription
|
||||
});
|
||||
}
|
||||
|
||||
return conn;
|
||||
}
|
||||
}
|
||||
|
||||
function report(err) {
|
||||
function report(err) {
|
||||
console.info(err);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
document.addEventListener("DOMContentLoaded", async function () {
|
||||
if (!receiver) {
|
||||
var elem = document.documentElement;
|
||||
var elem = document.documentElement;
|
||||
|
||||
/* View in fullscreen */
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.mozRequestFullScreen) { /* Firefox */
|
||||
elem.mozRequestFullScreen();
|
||||
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) { /* IE/Edge */
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
/* View in fullscreen */
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.mozRequestFullScreen) { /* Firefox */
|
||||
elem.mozRequestFullScreen();
|
||||
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) { /* IE/Edge */
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
|
||||
try {
|
||||
var stream = await getMedia();
|
||||
var video = document.getElementById("vlocal");
|
||||
video.srcObject = stream;
|
||||
video.onloadedmetadata = function(e) {
|
||||
video.play();
|
||||
}
|
||||
} catch(e) {
|
||||
console.error("media", e)
|
||||
try {
|
||||
var stream = await getMedia();
|
||||
var video = document.getElementById("vlocal");
|
||||
video.srcObject = stream;
|
||||
video.onloadedmetadata = function (e) {
|
||||
video.play();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("media", e)
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("room").innerText = room;
|
||||
|
||||
socketConnect();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
video {
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#vlocal, .receiver {
|
||||
#vlocal,
|
||||
.receiver {
|
||||
z-index: -10;
|
||||
filter: blur(5px) brightness(75%) saturate(75%);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#peers {
|
||||
#peers {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#peers video {
|
||||
#peers video {
|
||||
border: 3px solid red;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#peers video.receiver {
|
||||
#peers video.receiver {
|
||||
filter: none;
|
||||
border: none;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
#vremote { border: 5px solid green; }
|
||||
#vremote {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
pre {
|
||||
pre {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: rgba(255,255,255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: 10px 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<video id="vlocal"></video>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user