Add manual mode where you can start and stop the stream.

convoo · May 22, 2016 · 97dbe30 · 97dbe30
1 parent dff94b6
commit 97dbe30
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,9 +18,24 @@
 
         <p>Here it is shown on a muted autoplayed video element</p>
         <video src="{{sUrl}}" autoplay muted></video>
+
+        <webrtc-stream id="manualStream" stream="{{manualStream}}" stream-url="{{manualSUrl}}" manual></webrtc-stream>
+
+        <p>This next section uses a manual stream</p>
+        <p>Start the stream by clicking here:<button id="startbtn">Start</button></p>
+        <p>Stop the stream by clicking here:<button id="stopbtn">Stop</button></p>
+        <video src="{{manualSUrl}}" autoplay muted></video>
 
     <script>
 
+      var seedElement = document.querySelector('#manualStream');
+      document.querySelector('#startbtn').addEventListener('click', function() {
+        seedElement.start();
+      });
+
+      document.querySelector('#stopbtn').addEventListener('click', function() {
+        seedElement.stop();
+      });
     </script>
 
   </body>

diff --git a/webrtc-stream.html b/webrtc-stream.html
@@ -39,6 +39,16 @@
           type: String,
           notify: true,
           reflectToAttribute: true
+        },
+        /**
+         * `manual` determines whether the stream will automatically be accessed and interacted with. If set to true, you can start 
+         * and stop access using the start and stop functions.
+         */
+        manual: {
+          type: Boolean,
+          value: false,
+          notify: true,
+          reflectToAttribute: true
         }
       },
 
@@ -60,7 +70,20 @@
         // This is a good place to perform any work related to your element's
         // visual state or active behavior (measuring sizes, beginning animations,
         // loading resources, etc).
+        if(!this.manual){
+          this._getUserMedia();
+        }
 
+      },
+
+      detached: function() {
+        // The analog to `attached`, `detached` fires when the element has been
+        // removed from a document.
+        //
+        // Use this to clean up anything you did in `attached`.
+      },
+
+      _getUserMedia: function(){
         function hasGetUserMedia() {
           return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
         }
@@ -87,13 +110,20 @@
           console.log('Your browser is not supported, please update to the lastest Chrome or Firefox', error);
         }
       },
-
-      detached: function() {
-        // The analog to `attached`, `detached` fires when the element has been
-        // removed from a document.
-        //
-        // Use this to clean up anything you did in `attached`.
+      /**
+       * Starts the stream when in manual mode or after being stopped
+       */
+      start: function(){
+        this._getUserMedia();
       },
+
+      /**
+       * Stops the stream from continuing
+       */
+      stop: function(){
+        this.stream = null;
+        this.streamUrl = null;
+      }
 
     });
   </script>