Prvotni komit - Spletna stran za upravljanje
commit
d060d3e11e
|
|
@ -0,0 +1 @@
|
|||
settings.js
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>Galerija BOT</title>
|
||||
|
||||
<script type="text/javascript" src="webrtc-adapter.min.js" ></script>
|
||||
<script type="text/javascript" src="settings.js" ></script>
|
||||
<script type="text/javascript" src="janus.js" ></script>
|
||||
<script type="text/javascript" src="streaming.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="stil.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="glavno">
|
||||
<video id="videofeed" class="cakam" muted="" autoplay="" playsinline=""></video>
|
||||
<button id="predvajaj">⏵</button>
|
||||
|
||||
<section class="gumbi">
|
||||
<button id="levo">←</button>
|
||||
<button id="desno">→</button>
|
||||
<button id="ravno">↑</button>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
var server = null;
|
||||
if(window.location.protocol === 'http:')
|
||||
server = "http://" + window.location.hostname + ":8088/janus";
|
||||
else
|
||||
server = "https://" + window.location.hostname + ":8089/janus";
|
||||
|
||||
var turnUrl = 'turn:STREZHNIK:PORT';
|
||||
var turnUser = 'UPORABNICA';
|
||||
var turnPass = 'SKRITAKODAKIJENEVESALIPAC';
|
||||
|
||||
var iceServers = [{
|
||||
urls: turnUrl,
|
||||
username: turnUser,
|
||||
credential: turnPass
|
||||
}]
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glavno {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#predvajaj {
|
||||
display: none;
|
||||
font-size: 10rem;
|
||||
font-weight: bold;
|
||||
opacity: .7;
|
||||
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
top: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
border-style: groove;
|
||||
border-width: 2rem;
|
||||
border-color: red;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.gumbi {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gumbi button {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
border-radius: 100%;
|
||||
|
||||
font-size: 10rem;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#levo {
|
||||
left: -3rem;
|
||||
bottom: -3rem;
|
||||
}
|
||||
|
||||
#desno {
|
||||
right: -3rem;
|
||||
bottom: -3rem;
|
||||
}
|
||||
|
||||
#ravno {
|
||||
left: calc(50% - 7.5rem);
|
||||
bottom: -3rem;
|
||||
}
|
||||
|
||||
.predvajam .gumbi {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
// We import the settings.js file to know which address we should contact
|
||||
// to talk to Janus, and optionally which STUN/TURN servers should be
|
||||
// used as well. Specifically, that file defines the "server" and
|
||||
// "iceServers" properties we'll pass when creating the Janus session.
|
||||
|
||||
var janus = null;
|
||||
var streaming = null;
|
||||
var opaqueId = "streamingtest-"+Janus.randomString(12);
|
||||
|
||||
var remoteTracks = {}, dataMid = null;
|
||||
var bitrateTimer = {};
|
||||
var spinner = {};
|
||||
|
||||
var simulcastStarted = {}, svcStarted = {};
|
||||
|
||||
var streamsList = {};
|
||||
|
||||
// Kar fiksiramo na 666
|
||||
var selectedStream = 666;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
var predvajaj = document.querySelector('#predvajaj');
|
||||
var gumbi = document.querySelector('#predvajaj');
|
||||
var glavno = document.querySelector('#glavno');
|
||||
|
||||
var gLevo = document.querySelector('#levo');
|
||||
var gDesno = document.querySelector('#desno');
|
||||
var gRavno = document.querySelector('#ravno');
|
||||
var vsiGumbi = [gLevo, gDesno, gRavno];
|
||||
|
||||
// Initialize the library (all console debuggers enabled)
|
||||
Janus.init({debug: "all", callback: function() {
|
||||
// Make sure the browser supports WebRTC
|
||||
if(!Janus.isWebrtcSupported()) {
|
||||
bootbox.alert("No WebRTC support... ");
|
||||
return;
|
||||
}
|
||||
// Create session
|
||||
janus = new Janus({
|
||||
server: server,
|
||||
iceServers: iceServers,
|
||||
// Should the Janus API require authentication, you can specify either the API secret or user token here too
|
||||
// token: "mytoken",
|
||||
// or
|
||||
// apisecret: "serversecret",
|
||||
success: function() {
|
||||
// Attach to Streaming plugin
|
||||
janus.attach({
|
||||
plugin: "janus.plugin.streaming",
|
||||
opaqueId: opaqueId,
|
||||
success: function(pluginHandle) {
|
||||
streaming = pluginHandle;
|
||||
Janus.log("Plugin attached! (" + streaming.getPlugin() + ", id=" + streaming.getId() + ")");
|
||||
|
||||
// Setup streaming session
|
||||
updateStreamsList();
|
||||
|
||||
/* ustavitev neka?
|
||||
for(var i in bitrateTimer)
|
||||
clearInterval(bitrateTimer[i]);
|
||||
bitrateTimer = {};
|
||||
janus.destroy();
|
||||
*/
|
||||
|
||||
|
||||
// Kar zacnimo stream
|
||||
startStream();
|
||||
},
|
||||
error: function(error) {
|
||||
Janus.error(" -- Error attaching plugin... ", error);
|
||||
},
|
||||
iceState: function(state) {
|
||||
Janus.log("ICE state changed to " + state);
|
||||
},
|
||||
webrtcState: function(on) {
|
||||
Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
|
||||
if (on) {
|
||||
// Gumbi levo in desno
|
||||
gLevo.addEventListener('click', function () {
|
||||
console.log('GREMO LEVO!');
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', true);
|
||||
});
|
||||
// @TODO spremeni interval
|
||||
setTimeout(function () {
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', false);
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
gDesno.addEventListener('click', function () {
|
||||
console.log('GREMO DESNO!');
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', true);
|
||||
});
|
||||
// @TODO spremeni interval
|
||||
setTimeout(function () {
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', false);
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
gRavno.addEventListener('click', function () {
|
||||
console.log('GREMO RAVNO!');
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', true);
|
||||
});
|
||||
// @TODO spremeni interval
|
||||
setTimeout(function () {
|
||||
vsiGumbi.forEach(function (gEl) {
|
||||
gEl.toggleAttribute('disabled', false);
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
} else {
|
||||
gLevo.removeEventListener('click');
|
||||
gDesno.removeEventListener('click');
|
||||
gRavno.removeEventListener('click');
|
||||
}
|
||||
},
|
||||
slowLink: function(uplink, lost, mid) {
|
||||
Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
|
||||
" packets on mid " + mid + " (" + lost + " lost packets)");
|
||||
},
|
||||
onmessage: function(msg, jsep) {
|
||||
Janus.debug(" ::: Got a message :::", msg);
|
||||
var result = msg["result"];
|
||||
if(result) {
|
||||
if(result["status"]) {
|
||||
var status = result["status"];
|
||||
// if(status === 'starting')
|
||||
// else if(status === 'started')
|
||||
// else if(status === 'stopped')
|
||||
if(status === 'stopped') {
|
||||
stopStream();
|
||||
}
|
||||
} else if(msg["streaming"] === "event") {
|
||||
// Does this event refer to a mid in particular?
|
||||
var mid = result["mid"] ? result["mid"] : "0";
|
||||
// Is simulcast in place?
|
||||
var substream = result["substream"];
|
||||
var temporal = result["temporal"];
|
||||
if((substream !== null && substream !== undefined) || (temporal !== null && temporal !== undefined)) {
|
||||
if(!simulcastStarted[mid]) {
|
||||
simulcastStarted[mid] = true;
|
||||
}
|
||||
}
|
||||
// Is VP9/SVC in place?
|
||||
var spatial = result["spatial_layer"];
|
||||
temporal = result["temporal_layer"];
|
||||
}
|
||||
} else if(msg["error"]) {
|
||||
console.log('NAPAKA', msg["error"]);
|
||||
stopStream();
|
||||
return;
|
||||
}
|
||||
if(jsep) {
|
||||
Janus.debug("Handling SDP as well...", jsep);
|
||||
var stereo = (jsep.sdp.indexOf("stereo=1") !== -1);
|
||||
// Offer from the plugin, let's answer
|
||||
streaming.createAnswer({
|
||||
jsep: jsep,
|
||||
// We only specify data channels here, as this way in
|
||||
// case they were offered we'll enable them. Since we
|
||||
// don't mention audio or video tracks, we autoaccept them
|
||||
// as recvonly (since we won't capture anything ourselves)
|
||||
tracks: [{ type: 'data' }],
|
||||
customizeSdp: function(jsep) {
|
||||
if(stereo && jsep.sdp.indexOf("stereo=1") == -1) {
|
||||
// Make sure that our offer contains stereo too
|
||||
jsep.sdp = jsep.sdp.replace("useinbandfec=1", "useinbandfec=1;stereo=1");
|
||||
}
|
||||
},
|
||||
success: function(jsep) {
|
||||
Janus.debug("Got SDP!", jsep);
|
||||
var body = { request: "start" };
|
||||
streaming.send({ message: body, jsep: jsep });
|
||||
},
|
||||
error: function(error) {
|
||||
Janus.error("WebRTC error:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onremotetrack: function(track, mid, on, metadata) {
|
||||
Janus.debug("Remote track (mid=" + mid + ") " + (on ? "added" : "removed") +
|
||||
(metadata ? " (" + metadata.reason + ") ": "") + ":", track
|
||||
);
|
||||
|
||||
var mstreamId = "mstream"+mid;
|
||||
if(streamsList[selectedStream] && streamsList[selectedStream].legacy) {
|
||||
mstreamId = "mstream0";
|
||||
}
|
||||
|
||||
console.log('dodam?', on);
|
||||
if(true) {
|
||||
// If we're here, a new track was added
|
||||
var stream = null;
|
||||
|
||||
// New video track: create a stream out of it
|
||||
stream = new MediaStream([track]);
|
||||
console.log('MOJ PRETOK!', stream, track);
|
||||
remoteTracks[mid] = stream;
|
||||
Janus.log("Created remote video stream:", stream);
|
||||
|
||||
var vidEl = document.querySelector('#videofeed');
|
||||
|
||||
/* bitrate in resolucija
|
||||
if(!bitrateTimer[mid]) {
|
||||
bitrateTimer[mid] = setInterval(function() {
|
||||
// Display updated bitrate, if supported
|
||||
var bitrate = streaming.getBitrate(mid);
|
||||
console.log('bitrate:', bitrate);
|
||||
|
||||
// Check if the resolution changed too
|
||||
var width = vidEl.videoWidth;
|
||||
var height = vidEl.videoHeight;
|
||||
if (width > 0 && height > 0) console.log('resolucija', width+'x'+height);
|
||||
}, 1000);
|
||||
}
|
||||
*/
|
||||
console.log('dodajam pretok', vidEl, stream);
|
||||
Janus.attachMediaStream(vidEl, stream);
|
||||
|
||||
// Moramo kliknit za predvajanje :/
|
||||
predvajaj.style.display = 'block';
|
||||
predvajaj.addEventListener('click', function () {
|
||||
predvajaj.style.display = 'none';
|
||||
vidEl.play();
|
||||
});
|
||||
|
||||
vidEl.addEventListener('play', function () {
|
||||
glavno.classList.add('predvajam');
|
||||
predvajaj.style.display = 'none';
|
||||
});
|
||||
|
||||
vidEl.play();
|
||||
}
|
||||
},
|
||||
ondataopen: function(data) {
|
||||
Janus.log("The DataChannel is available!");
|
||||
},
|
||||
ondata: function(data) {
|
||||
Janus.debug("We got data from the DataChannel!", data);
|
||||
console.log('DUBU DATA', data);
|
||||
},
|
||||
oncleanup: function() {
|
||||
Janus.log(" ::: Got a cleanup notification :::");
|
||||
for(var i in bitrateTimer)
|
||||
clearInterval(bitrateTimer[i]);
|
||||
bitrateTimer = {};
|
||||
remoteTracks = {};
|
||||
dataMid = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(error) {
|
||||
Janus.error(error);
|
||||
},
|
||||
destroyed: function() {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
}});
|
||||
});
|
||||
|
||||
function updateStreamsList() {
|
||||
var body = { request: "list" };
|
||||
Janus.debug("Sending message:", body);
|
||||
streaming.send({ message: body, success: function(result) {
|
||||
if(!result) {
|
||||
console.log("Error: Got no response to our query for available streams");
|
||||
return;
|
||||
}
|
||||
if(result["list"]) {
|
||||
var list = result["list"];
|
||||
if(list && Array.isArray(list)) {
|
||||
list.sort(function(a, b) {
|
||||
if(!a || a.id < (b ? b.id : 0))
|
||||
return -1;
|
||||
if(!b || b.id < (a ? a.id : 0))
|
||||
return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
Janus.log("Got a list of available streams:", list);
|
||||
streamsList = {};
|
||||
for(var mp in list) {
|
||||
Janus.debug(" >> [" + list[mp]["id"] + "] " + list[mp]["description"] + " (" + list[mp]["type"] + ")");
|
||||
// Check the nature of the available streams, and if there are some multistream ones
|
||||
list[mp].legacy = true;
|
||||
if(list[mp].media) {
|
||||
var audios = 0, videos = 0;
|
||||
for(var mi in list[mp].media) {
|
||||
if(!list[mp].media[mi])
|
||||
continue;
|
||||
if(list[mp].media[mi].type === "audio")
|
||||
audios++;
|
||||
else if(list[mp].media[mi].type === "video")
|
||||
videos++;
|
||||
if(audios > 1 || videos > 1) {
|
||||
list[mp].legacy = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Keep track of all the available streams
|
||||
streamsList[list[mp]["id"]] = list[mp];
|
||||
}
|
||||
|
||||
// Dajmo kar zacet
|
||||
startStream();
|
||||
}
|
||||
}});
|
||||
}
|
||||
|
||||
function getStreamInfo() {
|
||||
// Send a request for more info on the mountpoint we subscribed to
|
||||
var body = { request: "info", id: parseInt(selectedStream) || selectedStream };
|
||||
streaming.send({ message: body, success: function(result) {
|
||||
if(result && result.info && result.info.metadata) {
|
||||
console.log('STREAM META', result.info.metadata);
|
||||
}
|
||||
}});
|
||||
}
|
||||
|
||||
function startStream() {
|
||||
Janus.log("Selected video id #" + selectedStream);
|
||||
console.log('zacenjam', selectedStream, streamsList[selectedStream]);
|
||||
if(!selectedStream || !streamsList[selectedStream]) {
|
||||
console.log("Error: No stream selected to start");
|
||||
return;
|
||||
}
|
||||
|
||||
if(streamsList[selectedStream].legacy) {
|
||||
for(mi in streamsList[selectedStream].media) {
|
||||
// Add a new panel
|
||||
var type = streamsList[selectedStream].media[mi].type;
|
||||
if(type === "video") {
|
||||
mid = streamsList[selectedStream].media[mi].mid;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Prepare the request to start streaming and send it
|
||||
var body = { request: "watch", id: parseInt(selectedStream) || selectedStream };
|
||||
streaming.send({ message: body });
|
||||
getStreamInfo();
|
||||
}
|
||||
|
||||
function stopStream() {
|
||||
streaming.send({ message: body });
|
||||
streaming.hangup();
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue