janus-gateway-streamtest.html

## janus-gateway-streamtest.html
<!--
// 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>