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