auto-notify on brodacaster start.

Author: stephenlb

js/pubnub-stream.js

@@ -0,0 +1,108 @@
+(async ()=>{ 
+'use strict';
+
+const PubNub = window.PubNub = (setup) => {
+    for (let key of Object.keys(setup)) PubNub[key] = setup[key];
+};
+
+const defaultSubkey  = 'demo';
+const defaultPubkey  = 'demo';
+const defaultChannel = 'pubnub';
+const defaultOrigin  = 'ps.pndsn.com';
+
+const subscribe = PubNub.subscribe = (setup={}) => {
+    let subkey     = setup.subkey     || PubNub.subscribeKey || defaultSubkey;
+    let channel    = setup.channel    || PubNub.channel      || defaultChannel;
+    let origin     = setup.origin     || PubNub.origin       || defaultOrigin;
+    let messages   = setup.messages   || PubNub.messages     || (a => a);
+    let authkey    = setup.authkey    || PubNub.authKey      || '';
+    let timetoken  = setup.timetoken  || '0';
+    let params     = `${authkey?'auth='+authkey:''}`;
+    let decoder    = new TextDecoder();
+    let boundry    = /(?<=,"\d{17}"\])[\n,]*/;
+    let resolver   = null;
+    let promissory = () => new Promise(resolve => resolver = (data) => resolve(data) ); 
+    let receiver   = promissory();
+    let reader     = null;
+    let response   = null;
+    let buffer     = '';
+    let subscribed = true;
+
+    // Start Stream
+    startStream();
+
+    async function startStream() {
+        let uri = `https://${origin}/stream/${subkey}/${channel}/0/${timetoken}`;
+        buffer  = '';
+
+        try      { response = await fetch(`${uri}?${params}`) }
+        catch(e) { return continueStream(1000)                }
+
+        try      { reader = response.body.getReader() }
+        catch(e) { return continueStream(1000)        }
+
+        try      { readStream()                       }
+        catch(e) { return continueStream(1000)        }
+    }
+
+    function continueStream(delay) {
+        if (!subscribed) return;
+        setTimeout( () => startStream(), delay || 1000 );
+    }
+
+    async function readStream() {
+        let chunk   = await reader.read().catch(continueStream);
+        if (!chunk) return;
+
+        buffer     += decoder.decode(chunk.value || new Uint8Array);
+        let parts   = buffer.split(boundry);
+        let message = parts[0];
+
+        try {
+            let jsonmsg     = JSON.parse(message);
+            setup.timetoken = timetoken = jsonmsg[1];
+
+            jsonmsg[0].forEach(m => {
+                messages(m);
+                resolver(m);
+                receiver = promissory();
+            });
+
+            buffer = parts.slice(1).join('');
+        }
+        catch(error) {
+            // Typically chunk is unfinished JSON in buffer.
+            // console.error(error);
+        }
+
+        if (!chunk.done) readStream();
+        else             continueStream(10);
+    }
+
+    // Subscription Structure
+    async function* subscription() {
+        while (subscribed) yield await receiver;
+    }
+
+    subscription.messages    = receiver => messages = setup.messages = receiver;
+    subscription.unsubscribe = () => subscribed = false;
+
+    return subscription;
+};
+
+const publish = PubNub.publish = async (setup={}) => {
+    let pubkey    = setup.pubkey     || PubNub.publishKey   || defaultPubkey;
+    let subkey    = setup.subkey     || PubNub.subscribeKey || defaultSubkey;
+    let channel   = setup.channel    || PubNub.channel      || defaultChannel;
+    let origin    = setup.origin     || PubNub.origin       || defaultOrigin;
+    let authkey   = setup.authkey    || PubNub.authKey      || '';
+    let message   = setup.message    || 'missing-message';
+    let uri       = `https://${origin}/publish/${pubkey}/${subkey}/0/${channel}/0`;
+    let params    = `${authkey?'auth='+authkey:''}`;
+    let payload   = { method: 'POST', body: JSON.stringify(message) };
+
+    try      { return await fetch(`${uri}?${params}`, payload) }
+    catch(e) { return false }
+};
+
+})();

tutorials/broadcaster.html

@@ -6,6 +6,7 @@
 
 <!-- Libs and Scripts -->
 <script src="../js/webrtc-v2.js"></script>
+<script src="../js/pubnub-stream.js"></script>
 <script>(()=>{
     'use strict';
 
@@ -33,7 +34,14 @@
     phone.debug( info => console.info(info) );
 
     // As soon as the phone is ready we can make calls
-    0&& phone.ready(()=>{});
+    phone.ready(()=>{
+        PubNub.publish({
+            channel : "BROADCASTER1234"
+        ,   pubkey  : pubkey
+        ,   subkey  : subkey
+        ,   message : { notify : "reload" }
+        });
+    });
 
     // When Call Comes In
     phone.receive(function(session){

tutorials/viewer.html

@@ -6,6 +6,7 @@
 
 <!-- Libs and Scripts -->
 <script src="../js/webrtc-v2.js"></script>
+<script src="../js/pubnub-stream.js"></script>
 <script>(()=>{
     'use strict';
 
@@ -14,29 +15,39 @@
     // The phone *number* can by any string value
     const pubkey = 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c';
     const subkey = 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe';
-    const number = (''+Math.random()*100000).split('.')[0];
+    const number = "BROADCAST-VIEWER";//(''+Math.random()*100000).split('.')[0];
 
     // Phone
     const phone = PHONE({
         number        : number
+    ,   media         : { audio : true, video : true }
     ,   publish_key   : pubkey
     ,   subscribe_key : subkey 
     });
 
     // Local Camera Display
     phone.camera.ready( video => {
-        console.log('Camera Ready');
+        console.log('Ready');
 
         //phone.$('video-out').appendChild(video);
     });
 
     // Debugging Output
     phone.debug( info => console.info(info) );
 
+    // Receive Broadcaster Updates
+    PubNub.subscribe({
+        channel  : "BROADCASTER1234"
+    ,   pubkey   : pubkey
+    ,   subkey   : subkey
+    ,   messages : message => message.notify == "reload" && location.reload(false)
+    });
+
     // As soon as the phone is ready we can make calls
     phone.ready(()=>{
-        console.log("Calling Broadcaster");
-        let session = phone.dial("BROADCASTER-TEST");
+        phone.hangup();
+        phone.dial("BROADCASTER-TEST");
+        //setTimeout( () => playing || location.reload, 6000 );
     });
 
     // Broadcaster's Video
@@ -50,10 +61,15 @@
             playing = true;
             console.log("Playing broadcaster's video");
             phone.$('video-out').appendChild(broadcaster.video);
-            setTimeout( () => phone.camera.stop(), 1000 );
+            setTimeout( phone.camera.stop, 1000 );
+            setTimeout( phone.toggleAudio, 1000 );
+            setTimeout( phone.toggleVideo, 1000 );
         });
 
-        broadcaster.ended( broadcaster => console.log('Stream ended') );
+        broadcaster.ended( broadcaster => {
+            playing = false;
+            console.log('Stream ended');
+        });
     });
 
 })();</script>