add websocket event listener by kerry

src/player.js

@@ -11,6 +11,10 @@ var Player = function(url, options) {
 		this.source = new JSMpeg.Source.WebSocket(url, options);
 		options.streaming = true;
 	}
+	else if (url.toLowerCase() === 'dynamicwebsocketurl') {
+		this.source = new JSMpeg.Source.WebSocket(url, options);
+		options.streaming = true;
+	}
 	else if (options.progressive !== false) {
 		this.source = new JSMpeg.Source.AjaxProgressive(url, options);
 		options.streaming = false;

src/websocket.js

@@ -1,83 +1,110 @@
-JSMpeg.Source.WebSocket = (function(){ "use strict";
-
-var WSSource = function(url, options) {
-	this.url = url;
-	this.options = options;
-	this.socket = null;
-	this.streaming = true;
-
-	this.callbacks = {connect: [], data: []};
-	this.destination = null;
-
-	this.reconnectInterval = options.reconnectInterval !== undefined
-		? options.reconnectInterval
-		: 5;
-	this.shouldAttemptReconnect = !!this.reconnectInterval;
-
-	this.completed = false;
-	this.established = false;
-	this.progress = 0;
-
-	this.reconnectTimeoutId = 0;
-
-	this.onEstablishedCallback = options.onSourceEstablished;
-	this.onCompletedCallback = options.onSourceCompleted; // Never used
-};
-
-WSSource.prototype.connect = function(destination) {
-	this.destination = destination;
-};
-
-WSSource.prototype.destroy = function() {
-	clearTimeout(this.reconnectTimeoutId);
-	this.shouldAttemptReconnect = false;
-	this.socket.close();
-};
-
-WSSource.prototype.start = function() {
-	this.shouldAttemptReconnect = !!this.reconnectInterval;
-	this.progress = 0;
-	this.established = false;
-	
-	this.socket = new WebSocket(this.url, this.options.protocols || null);
-	this.socket.binaryType = 'arraybuffer';
-	this.socket.onmessage = this.onMessage.bind(this);
-	this.socket.onopen = this.onOpen.bind(this);
-	this.socket.onerror = this.onClose.bind(this);
-	this.socket.onclose = this.onClose.bind(this);
-};
-
-WSSource.prototype.resume = function(secondsHeadroom) {
-	// Nothing to do here
-};
-
-WSSource.prototype.onOpen = function() {
-	this.progress = 1;
-};
-
-WSSource.prototype.onClose = function() {
-	if (this.shouldAttemptReconnect) {
-		clearTimeout(this.reconnectTimeoutId);
-		this.reconnectTimeoutId = setTimeout(function(){
-			this.start();	
-		}.bind(this), this.reconnectInterval*1000);
-	}
-};
-
-WSSource.prototype.onMessage = function(ev) {
-	var isFirstChunk = !this.established;
-	this.established = true;
-
-	if (isFirstChunk && this.onEstablishedCallback) {
-		this.onEstablishedCallback(this);
-	}
-
-	if (this.destination) {
-		this.destination.write(ev.data);
-	}
-};
-
-return WSSource;
-
+JSMpeg.Source.WebSocket = (function () {
+  "use strict";
+
+  var WSSource = function (url, options) {
+    this.url = url;
+    this.options = options;
+    this.socket = null;
+    this.streaming = true;
+
+    this.callbacks = { connect: [], data: [] };
+    this.destination = null;
+
+    this.reconnectInterval =
+      options.reconnectInterval !== undefined ? options.reconnectInterval : 5;
+    this.shouldAttemptReconnect = !!this.reconnectInterval;
+
+    this.completed = false;
+    this.established = false;
+    this.progress = 0;
+
+    this.reconnectTimeoutId = 0;
+
+    this.onEstablishedCallback = options.onSourceEstablished;
+    this.onCompletedCallback = options.onSourceCompleted; // Never used
+
+    // by kerry
+    this.wsId = options.wsId;
+    this.onWsPreConnection =
+      options.onWsPreConnection !== undefined
+        ? options.onWsPreConnection
+        : function (wsId, url) {
+            return url;
+          };
+    this.onWsOpen =
+      options.onWsOpen === undefined ? function () {} : options.onWsOpen;
+    this.onWsClose =
+      options.onWsClose !== undefined
+        ? options.onWsClose
+        : function (isReconnect) {};
+  };
+
+  WSSource.prototype.connect = function (destination) {
+    this.destination = destination;
+  };
+
+  WSSource.prototype.destroy = function () {
+    clearTimeout(this.reconnectTimeoutId);
+    this.shouldAttemptReconnect = false;
+    this.socket.close();
+  };
+
+  WSSource.prototype.start = function () {
+    // update kerry
+    var temp = this.onWsPreConnection(this.wsId, this.url);
+    if (temp !== undefined) {
+      this.url = temp;
+    }
+
+    this.shouldAttemptReconnect = !!this.reconnectInterval;
+    this.progress = 0;
+    this.established = false;
+
+    this.socket = new WebSocket(this.url, this.options.protocols || null);
+    this.socket.binaryType = "arraybuffer";
+    this.socket.onmessage = this.onMessage.bind(this);
+    this.socket.onopen = this.onOpen.bind(this);
+    this.socket.onerror = this.onClose.bind(this);
+    this.socket.onclose = this.onClose.bind(this);
+  };
+
+  WSSource.prototype.resume = function (secondsHeadroom) {
+    // Nothing to do here
+  };
+
+  WSSource.prototype.onOpen = function () {
+    // update kerry
+    this.onWsOpen();
+    this.progress = 1;
+  };
+
+  WSSource.prototype.onClose = function () {
+    // update kerry
+    this.onWsClose(this.shouldAttemptReconnect);
+
+    if (this.shouldAttemptReconnect) {
+      clearTimeout(this.reconnectTimeoutId);
+      this.reconnectTimeoutId = setTimeout(
+        function () {
+          this.start();
+        }.bind(this),
+        this.reconnectInterval * 1000
+      );
+    }
+  };
+
+  WSSource.prototype.onMessage = function (ev) {
+    var isFirstChunk = !this.established;
+    this.established = true;
+
+    if (isFirstChunk && this.onEstablishedCallback) {
+      this.onEstablishedCallback(this);
+    }
+
+    if (this.destination) {
+      this.destination.write(ev.data);
+    }
+  };
+
+  return WSSource;
 })();
-

view-stream.html

@@ -1,22 +1,37 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>JSMpeg Stream Client</title>
-	<style type="text/css">
-		html, body {
-			background-color: #111;
-			text-align: center;
-		}
-	</style>
-	
-</head>
-<body>
-	<canvas id="video-canvas"></canvas>
-	<script type="text/javascript" src="jsmpeg.min.js"></script>
-	<script type="text/javascript">
-		var canvas = document.getElementById('video-canvas');
-		var url = 'ws://'+document.location.hostname+':8082/';
-		var player = new JSMpeg.Player(url, {canvas: canvas});
-	</script>
-</body>
+  <head>
+    <title>JSMpeg Stream Client</title>
+    <style type="text/css">
+      html,
+      body {
+        background-color: #111;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="video-canvas"></canvas>
+    <script type="text/javascript" src="jsmpeg.min.js"></script>
+    <script type="text/javascript">
+      var canvas = document.getElementById("video-canvas");
+      //var url = "ws://127.0.0.1:8082/live/test";
+      var player = new JSMpeg.Player("DynamicWebsocketUrl", {
+        canvas: canvas,
+        wsId: "websocketID",
+        onWsPreConnection: function (wsId, url) {
+          console.log(wsId);
+          console.log(url);
+          return "ws://127.0.0.1:8082/live/test";
+        },
+        onWsOpen: function () {
+          console.log("connection success!!");
+        },
+        onWsClose: function (isReconnect) {
+          console.log("close is reconnect");
+          console.log(isReconnect);
+        },
+      });
+    </script>
+  </body>
 </html>