Feature: supported lazy style consumer - publisher, and added few examples

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@8xff/atm0s-media-js",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Provide a intuitive way to interact with Atm0s Media Server in Vanilla Javascript",
   "cdn": "dist/index.umd.js",
   "main": "dist/index.js",

samples/broadcast/publisher.js

@@ -4,7 +4,7 @@ async function onMyStreamAdded(stream) {
     if (element.consumer) {
       await element.consumer.unview('main');
     }
-    let consumer = window.bluesea_session.createConsumer(stream);
+    let consumer = window.atm0sSession.createConsumer(stream);
     element.srcObject = consumer.view('main');
     element.consumer = consumer;
   }
@@ -13,7 +13,7 @@ async function onMyStreamAdded(stream) {
   //   if (element.consumer) {
   //     await element.consumer.unview('main');
   //   }
-  //   let consumer = window.bluesea_session.createConsumer(stream);
+  //   let consumer = window.atm0sSession.createConsumer(stream);
   //   // element.srcObject = await consumer.view('main');
   //   // await consumer.view('main');
   //   element.consumer = consumer;
@@ -51,7 +51,7 @@ async function boot() {
       video: 1,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   session.connect();
   session.on('mystream_added', onMyStreamAdded);
 }

samples/broadcast/viewer.js

@@ -5,7 +5,7 @@ async function onStreamAdded(stream) {
     if (element.consumer) {
       element.consumer.unview('main');
     }
-    let consumer = window.bluesea_session.createConsumer(stream);
+    let consumer = window.atm0sSession.createConsumer(stream);
     const view = consumer.view('main');
     element.srcObject = view;
     element.consumer = consumer;
@@ -16,7 +16,7 @@ async function onStreamAdded(stream) {
     if (element.consumer) {
       element.consumer.unview('main');
     }
-    let consumer = window.bluesea_session.createConsumer(stream);
+    let consumer = window.atm0sSession.createConsumer(stream);
     const view = consumer.view('main');
     element.srcObject = view;
     element.consumer = consumer;
@@ -53,7 +53,7 @@ async function boot() {
       video: 1,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   session.connect();
   session.on('stream_added', onStreamAdded);
   session.on('stream_removed', onStreamRemoved);

samples/conference/app.js

@@ -2,7 +2,7 @@ async function onMyStreamAdded(stream) {
   console.log('on my stream added', stream);
   if (stream.kind == 'audio') {
     console.log('enable vad and remove noise');
-    window.bluesea_session
+    window.atm0sSession
       .getSender('audio', 'audio_main')
       .toggleAudioFeatures(true, false)
       .then(console.log)
@@ -16,7 +16,7 @@ async function onStreamAdded(stream) {
   console.log('added stream:', stream);
   if (stream.kind == 'video') {
     console.log('create video consumer');
-    let consumer = window.bluesea_session.createConsumer(stream);
+    let consumer = window.atm0sSession.createConsumer(stream);
     let element = document.createElement('video');
     element.id = 'video-' + stream.peer_id;
     element.width = 300;
@@ -30,7 +30,7 @@ async function onStreamAdded(stream) {
 
   if (stream.kind == 'audio') {
     console.log('create audio mixer consumer');
-    let consumer = await window.bluesea_session.createConsumer(stream);
+    let consumer = await window.atm0sSession.createConsumer(stream);
     let element = document.createElement('audio');
     element.id = 'audio-' + stream.peer_id;
     element.hidden = true;
@@ -74,7 +74,7 @@ async function boot() {
       video: 5,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   session.connect();
   session.on('mystream_added', onMyStreamAdded);
   session.on('stream_added', onStreamAdded);

samples/consumer-pair/app.js

@@ -13,7 +13,7 @@ async function boot() {
       video: 1,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   let consumer = session.createConsumerPair('rtmp', 'main_audio', 'main_video');
   session.connect().then(() => {
     let element = document.getElementById('my_video');

samples/echo-toggle/app.js

@@ -1,7 +1,7 @@
 async function onMyStreamAdded(stream) {
   console.log('added mystream:', stream);
   if (stream.kind == 'video') {
-    let receiver = await window.bluesea_session.takeReceiver('video');
+    let receiver = await window.atm0sSession.takeReceiver('video');
     let element = document.getElementById('my_video');
     element.srcObject = receiver.stream;
     element.receiver = receiver;
@@ -14,7 +14,7 @@ async function onMyStreamRemoved(stream) {
   if (stream.kind == 'video') {
     let element = document.getElementById('my_video');
     element.receiver.disconnect();
-    window.bluesea_session.backReceiver(element.receiver);
+    window.atm0sSession.backReceiver(element.receiver);
     element.receiver = null;
     element.srcObject = null;
   }
@@ -34,20 +34,20 @@ async function boot() {
       video: 1,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   session.on('mystream_added', onMyStreamAdded);
   session.on('mystream_removed', onMyStreamRemoved);
   session.connect();
 }
 
 window.toggleStream = async function toggleStream() {
   if (window.video_stream) {
-    window.bluesea_session.getSender('video', 'video_main').stop();
+    window.atm0sSession.getSender('video', 'video_main').stop();
     window.video_stream = undefined;
   } else {
     console.log('Will toggle stream on');
     window.video_stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
-    await window.bluesea_session.createSender({
+    await window.atm0sSession.createSender({
       kind: 'video',
       name: 'video_main',
       stream: window.video_stream,

samples/echo/index.js

@@ -1,15 +1,15 @@
 async function onMyStreamAdded(stream) {
   console.log('added mystream:', stream);
   if (stream.kind == 'video') {
-    let receiver = window.bluesea_session.takeReceiver('video');
+    let receiver = window.atm0sSession.takeReceiver('video');
     console.log('take receiver:', receiver);
     let element = document.getElementById('my_video');
     element.srcObject = receiver.stream;
     receiver.switch(stream);
   }
 
   if (stream.kind == 'audio') {
-    let receiver = window.bluesea_session.takeReceiver('audio');
+    let receiver = window.atm0sSession.takeReceiver('audio');
     let element = document.getElementById('my_audio');
     element.srcObject = receiver.stream;
     receiver.switch(stream);
@@ -44,7 +44,7 @@ async function boot() {
       video: 1,
     },
   });
-  window.bluesea_session = session;
+  window.atm0sSession = session;
   session.connect();
   session.on('mystream_added', onMyStreamAdded);
 }

samples/echo_scroll/app.js

@@ -0,0 +1,122 @@
+let videos = {};
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+let onApplyDebonde =  debounce(function onApplyStream() {
+    console.log("Will apply now");
+    Object.values(videos).map(async (video) => {
+        if(!video.visible && video.viewing) {
+            console.log('Switch to hide:', video.id);
+            video.viewing = false;
+            video.element.srcObject = null;
+            video.element.style.backgroundColor = 'gray';
+            video.consumer.unview('small_video_element');
+        }
+    })
+
+    Object.values(videos).map(async (video) => {
+        if(video.visible && !video.viewing) {
+            console.log('Get consumer for switch to view:', video.id);
+            video.viewing = true;
+            video.consumer = window.atm0sSession.createConsumer(video.stream);
+            console.log('Switch to view:', video.id, video.consumer);
+            video.element.srcObject = video.consumer.view('small_video_element');
+            video.element.style.backgroundColor = 'black';
+            video.consumer.on('state', (state) => {
+                switch(state) {
+                    case 'live':
+                        if(!video.element.srcObject)
+                            video.element.srcObject = video.stream;
+                        video.element.style.opacity = '1';
+                        break;
+                    case 'key_only':
+                        if(!video.element.srcObject)
+                            video.element.srcObject = video.stream;
+                        video.element.style.opacity = '0.8';
+                        break;
+                    case 'disconnected':
+                        video.element.style.opacity = '0.2';
+                        break;
+                    case 'paused':
+                        video.element.srcObject = null;
+                        video.element.style.opacity = '1';
+                        break;
+
+                }
+            });
+        }
+    })
+}, 1000, false);
+
+function onVisiblityChanged(entries) {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            videos[entry.target.id].visible = true;
+        } else {
+            videos[entry.target.id].visible = false;
+        }
+    });
+
+    onApplyDebonde();
+}
+
+function onMyStreamAdded(stream) {
+    console.log('added mystream:', stream);
+    const options = { threshold: 0.2 };
+    const observer = new IntersectionObserver(onVisiblityChanged, options);
+    if(stream.kind == 'video') {
+        let panel = document.getElementById('video-panel');
+        for(let i = 0; i < 20; i++) {
+            let element = document.createElement('video');
+            element.id = 'video-' + i;
+            element.stream = stream;
+            element.style.backgroundColor = 'gray';
+            element.style.width = '45%';
+            element.style.height = '35%';
+            element.style.margin = '2px';
+            element.muted = true;
+            element.autoplay = true;
+            observer.observe(element);
+            panel.appendChild(element);
+
+            videos[element.id] = { id: element.id, stream, visible: false, element, consumer: null };
+        }
+    }
+}
+
+async function boot() {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+
+    let video_stream = await navigator.mediaDevices.getUserMedia({audio: false, video: true});
+    let session = Atm0s.createSession(params['server'], {
+        roomId: params['room'] || 'demo',
+        peerId:  params['peer'] || 'echo-client-' + new Date().getTime(),
+        token: params['token'],
+        senders: [
+            { stream: video_stream, name: 'video_main', kind: 'video', simulcast: true }
+        ],
+        receivers: { 
+            audio: 1,
+            video: 8
+        }
+    });
+    window.atm0sSession = session;
+    session.connect();
+    session.on('mystream_added', onMyStreamAdded);
+    session.on('mystream_removed', onMyStreamAdded);
+}
+
+boot();

samples/echo_scroll/index.html

@@ -0,0 +1,5 @@
+<script src="/dist/index.umd.min.js"></script>
+<script src="./app.js"></script>
+<div id="video-panel">
+
+</div>

samples/echo_toggle_replace_track/app.js

@@ -0,0 +1,72 @@
+async function onMyStreamAdded(stream) {
+  console.log('added mystream:', stream);
+  if (stream.kind == 'video') {
+    let consumer = await window.atm0sSession.createConsumer(stream);
+    let element = document.getElementById('my_video');
+    element.srcObject = consumer.view('main_video');
+    element.consumer = consumer;
+  }
+
+  if (stream.kind == 'audio') {
+    let consumer = await window.atm0sSession.createConsumer(stream);
+    let element = document.getElementById('my_audio');
+    element.srcObject = consumer.view('main_audio');
+    element.receiver = receiver;
+    receiver.switch(stream);
+  }
+}
+
+async function onMyStreamRemoved(stream) {
+  console.log('removed mystream:', stream);
+  if (stream.kind == 'video') {
+    let element = document.getElementById('my_video');
+    element.consumer.unview('main_video');
+    element.consumer = null;
+    element.srcObject = null;
+  }
+
+  if (stream.kind == 'audio') {
+    let element = document.getElementById('my_audio');
+    element.consumer.unview('main_audio');
+    element.consumer = null;
+    element.srcObject = null;
+  }
+}
+
+async function boot() {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const params = Object.fromEntries(urlSearchParams.entries());
+
+  let session = Atm0s.createSession(params['server'], {
+    roomId: params['room'] || 'demo',
+    peerId: params['peer'] || 'echo-client-' + new Date().getTime(),
+    token: params['token'],
+    senders: [
+      // { stream: audio_stream, name: 'audio_main', kind: 'audio' },
+      // { stream: video_stream, name: 'video_main', kind: 'video' }
+    ],
+    receivers: {
+      audio: 1,
+      video: 1,
+    },
+  });
+  window.atm0sSession = session;
+  window.webcam_publisher = session.createPublisher({ kind: 'video', name: 'video_main' });
+  session.on('mystream_added', onMyStreamAdded);
+  session.on('mystream_removed', onMyStreamRemoved);
+  session.connect();
+}
+
+window.toggleStream = async function toggleStream() {
+  if (window.video_stream) {
+    window.webcam_publisher.switch(null);
+    window.video_stream.getTracks().forEach((track) => track.stop());
+    window.video_stream = undefined;
+  } else {
+    console.log('Will toggle stream on');
+    window.video_stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
+    window.webcam_publisher.switch(window.video_stream);
+  }
+};
+
+boot();

samples/echo_toggle_replace_track/index.html

@@ -0,0 +1,5 @@
+<script src="/dist/index.umd.min.js"></script>
+<script src="./app.js"></script>
+<button onclick="window.toggleStream()">Toggle</button>
+<video id="my_video" controls muted autoplay width="600" height="300" style="background-color: black;"></video>
+<audio id="my_audio" hidden autoplay>