This repository has been archived by the owner on Jul 20, 2024. It is now read-only.
generated from VitorLuizC/typescript-library-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from luongngocminh/feature/lazy-conspubs
Feature: supported lazy style consumer - publisher, and added few examples
- Loading branch information
Showing
53 changed files
with
1,183 additions
and
235 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <script src="/dist/index.umd.min.js"></script> | ||
| <script src="./app.js"></script> | ||
| <div id="video-panel"> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.