Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!--
// janus-gateway streamingtest refactor so I can understand it better
// GPL v3 as original
// https://github.com/meetecho/janus-gateway
// https://github.com/meetecho/janus-gateway/blob/master/html/streamingtest.js
-->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript">
var server = null;
if(window.location.protocol === 'http:'){
server = "http://" + window.location.hostname + ":8088/janus";
}else{
server = "https://" + window.location.hostname + ":8089/janus";
}
var janus = null;
var streaming = null;
var started = false;
var spinner = null;
var selectedStream = null;
$(document).ready(function() {
// Initialize the library (console debug enabled)
Janus.init({debug: true, callback: function() {
startJanus();
}});
});
function startJanus(){
console.log("starting Janus");
$('#start').click(function() {
if(started){
return;
}
started = true;
// Make sure the browser supports WebRTC
if(!Janus.isWebrtcSupported()) {
console.error("No webrtc support");
return;
};
// Create session
janus = new Janus({
server: server,
success: function() {
console.log("Success");
attachToStreamingPlugin(janus);
},
error: function(error) {
console.log(error);
console.log("janus error");
},
destroyed: function() {
console.log("destroyed");
}
});
});
}
function attachToStreamingPlugin(janus){
// Attach to streaming plugin
console.log("Attach to streaming plugin");
janus.attach({
plugin: "janus.plugin.streaming",
success: function(pluginHandle) {
streaming = pluginHandle;
console.log("Plugin attached! (" + streaming.getPlugin() + ", id=" + streaming.getId() + ")");
// Setup streaming session
updateStreamsList();
},
error: function(error) {
console.log(" -- Error attaching plugin... " + error);
console.error("Error attaching plugin... " + error);
},
onmessage: function(msg, jsep) {
console.log(" ::: Got a message :::");
console.log(JSON.stringify(msg));
processMessage(msg);
handleSDP(jsep);
},
onremotestream: function(stream) {
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
handleStream(stream);
},
oncleanup: function() {
console.log(" ::: Got a cleanup notification :::");
}
});//end of janus.attach
}
function processMessage(msg){
var result = msg["result"];
if(result && result["status"]){
var status = result["status"];
switch(status) {
case 'starting':
console.log("starting - please wait...");
break;
case 'preparing':
console.log("preparing");
break;
case 'started':
console.log("started");
break;
case 'stopped':
console.log("stopped");
stopStream();
break;
}
}else{
console.log("no status available");
}
}
// we never appear to get this jsep thing
function handleSDP(jsep){
console.log(" :: jsep :: ");
console.log(jsep);
if(jsep !== undefined && jsep !== null) {
console.log("Handling SDP as well...");
console.log(jsep);
// Answer
streaming.createAnswer({
jsep: jsep,
media: { audioSend: false, videoSend: false }, // We want recvonly audio/video
success: function(jsep) {
console.log("Got SDP!");
console.log(jsep);
var body = { "request": "start" };
streaming.send({"message": body, "jsep": jsep});
},
error: function(error) {
console.log("WebRTC error:");
console.log(error);
console.error("WebRTC error... " + JSON.stringify(error));
}
});
}else{
console.log("no sdp");
}
}
function handleStream(stream){
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
// Show the stream and hide the spinner when we get a playing event
console.log("attaching remote media stream");
attachMediaStream($('#remotevideo').get(0), stream);
$("#remotevideo").bind("playing", function () {
console.log("got playing event");
});
}
function updateStreamsList() {
var body = { "request": "list" };
console.log("Sending message (" + JSON.stringify(body) + ")");
streaming.send({"message": body, success: function(result) {
if(result === null || result === undefined) {
console.error("no streams available");
return;
}
if(result["list"] !== undefined && result["list"] !== null) {
var list = result["list"];
console.log("Got a list of available streams:");
console.log(list);
console.log("taking the first available stream");
var theFirstStream = list[0];
startStream(theFirstStream);
}else{
console.error("no streams available - list is null");
return;
}
}});
}
function startStream(selectedStream) {
var selectedStreamId = selectedStream["id"];
console.log("Selected video id #" + selectedStreamId);
if(selectedStreamId === undefined || selectedStreamId === null) {
console.log("No selected stream");
return;
}
var body = { "request": "watch", id: parseInt(selectedStreamId) };
streaming.send({"message": body});
}
function stopStream() {
console.log("stopping stream");
var body = { "request": "stop" };
streaming.send({"message": body});
streaming.hangup();
}
</script>
</head>
<body>
<div>
<button class="btn btn-default" autocomplete="off" id="start">Start</button><br />
<div id="stream">
<video controls autoplay id="remotevideo" width="320" height="240" >
</video>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.