@daily-co/daily-vcs-web - npm Package Compare versions

Comparing version 0.0.1-alpha.6 to 0.0.1-alpha.7

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";function t(t,e,i,s){return new(i||(i=Promise))((function(a,o){function r(t){try{l(s.next(t))}catch(t){o(t)}}function n(t){try{l(s.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?a(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,n)}l((s=s.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const e=t=>["off","blocked"].includes(t),i=t=>{var e,i,s,a,o,r;return{active:!0,id:null!==(a=null===(s=null===(i=null===(e=null==t?void 0:t.tracks)||void 0===e?void 0:e.video)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==a?a:"",sessionId:t.session_id,displayName:t.user_name||"Guest",track:null===(r=null===(o=null==t?void 0:t.tracks)||void 0===o?void 0:o.video)||void 0===r?void 0:r.persistentTrack,type:"camera"}},s=t=>{var e,i,s,a,o,r;return{active:!0,id:null!==(a=null===(s=null===(i=null===(e=null==t?void 0:t.tracks)||void 0===e?void 0:e.screenVideo)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==a?a:"",sessionId:t.session_id,displayName:"",track:null===(r=null===(o=null==t?void 0:t.tracks)||void 0===o?void 0:o.screenVideo)||void 0===r?void 0:r.persistentTrack,type:"screenshare"}},a=t=>{var i,s,a,o,r,n,l,c,d,u,h,p;return{id:t.session_id,displayName:t.user_name||"Guest",video:{id:null!==(o=null===(a=null===(s=null===(i=null==t?void 0:t.tracks)||void 0===i?void 0:i.video)||void 0===s?void 0:s.track)||void 0===a?void 0:a.id)&&void 0!==o?o:"",paused:e(null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.state)},audio:{},screenshareVideo:{id:null!==(u=null===(d=null===(c=null===(l=null==t?void 0:t.tracks)||void 0===l?void 0:l.screenVideo)||void 0===c?void 0:c.track)||void 0===d?void 0:d.id)&&void 0!==u?u:"",paused:e(null===(p=null===(h=null==t?void 0:t.tracks)||void 0===h?void 0:h.screenVideo)||void 0===p?void 0:p.state)},screenshareAudio:{}}};exports.DailyVCSWebRenderer=class{constructor(t,e,i,s){var a,o;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],t||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=t,e&&"function"==typeof e.startDOMOutputAsync){this.comp=e,this.getAssetUrlCb=null!==(a=null==s?void 0:s.getAssetUrlCb)&&void 0!==a?a:null,this.rootEl=i,this.viewportSize=null!==(o=null==s?void 0:s.viewportSize)&&void 0!==o?o:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((t,e)=>{if(!t||!e||0===e)return{w:0,h:0};const{width:i,height:s}=t.getBoundingClientRect();return i/s>e?{w:Math.floor(s*e),h:s}:{w:i,h:Math.floor(i/e)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let t=0;t<this.maxVideoInputSlots;t++)this.setActiveVideoInput(t,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((t=>{t&&t.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const t=this.rootEl.clientWidth,e=this.rootEl.clientHeight;if(!t||!e)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?t/this.viewportSize.w:e/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(t,e){t.setAttribute("style","display: none;"),e&&t.setAttribute("data-video-remote-track-id",e),this.rootEl.appendChild(t)}handleParticipantsChange(){var t,o,r,n;const l=Object.fromEntries(Object.values(this.callObject.participants()).map((t=>[t.session_id,t]))),c=this.participantIds.length>0?this.participantIds.map((t=>l[t])).filter(Boolean):Object.values(l),d=[],u=[],h=new Map;for(const l of c)e(null===(o=null===(t=null==l?void 0:l.tracks)||void 0===t?void 0:t.video)||void 0===o?void 0:o.state)||d.push(i(l)),e(null===(n=null===(r=null==l?void 0:l.tracks)||void 0===r?void 0:r.screenVideo)||void 0===n?void 0:n.state)||u.push(s(l)),h.set(l.session_id,a(l));this.applyTracks([...d,...u]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const t in this.defaultParams)this.sendParam(t,this.defaultParams[t]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var t,e;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(e=(t=this.callbacks).onStop)||void 0===e||e.call(t),this.stopResizeObserver())}onError(t){var e,i;console.error("VCS composition error: ",t),null===(i=(e=this.callbacks).onError)||void 0===i||i.call(e,t)}setActiveVideoInput(t,e,i="",s="",a=!1){this.activeVideoInputSlots[t]=!!e&&{id:i||"",type:a?"screenshare":"camera",displayName:a?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const t=[];for(const e of this.activeVideoInputSlots)"object"==typeof e?t.push(e):t.push(!1);this.vcsApi.setActiveVideoInputSlots(t)}sendParam(t,e){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(t,e),this.paramValues[t]=e,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(t,e="merge"){this.vcsApi&&("replace"===e&&(this.paramValues={}),Object.entries(t).forEach((([t,e])=>this.sendParam(t,e))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([t,e])=>new Promise(((i,s)=>{const a=new Image;a.onload=()=>i({name:t,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${t}`),s(new Error(`Image load failed, asset ${t}`))},a.src=e}))));try{const e=(yield Promise.all(t)).reduce(((t,e)=>(t[e.name]=e.image,t)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(t){console.error(t)}}))}applyTracks(t){var e;if(!this.sources||!t)return;const i=this.sources.videoSlots,s=[];for(const a of t){if(!(null==a?void 0:a.track))continue;const t=i.find((t=>t.id===a.id));if(t&&(null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id)===a.track.id)s.push(Object.assign(Object.assign({},t),{displayName:a.displayName}));else{const e=new MediaStream([a.track]);let i;(null==t?void 0:t.element)?i=t.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,a.track.id)),i.srcObject=e,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:a.track.id,element:i,track:a.track,sessionId:a.sessionId,displayName:a.displayName,type:a.type})}}i.filter((t=>s.every((e=>e.id!==t.id)))).forEach((t=>{var e,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id}"]`))||void 0===i||i.remove()}));let a=s.length!==i.length;if(!a)for(let t=0;t<s.length;t++)if(s[t].id!==i[t].id){a=!0;break}if(a){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let t=0;t<20;t++){const e=s[t];e?this.setActiveVideoInput(t,!0,e.id,e.displayName,"screenshare"===e.type):this.setActiveVideoInput(t,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(t,e="replace"){this.participantIds="merge"===e?[...new Set([...this.participantIds,...t])]:t,this.handleParticipantsChange()}};
+"use strict";function t(t,e,i,s){return new(i||(i=Promise))((function(a,o){function r(t){try{l(s.next(t))}catch(t){o(t)}}function n(t){try{l(s.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?a(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,n)}l((s=s.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const e=t=>["off","blocked"].includes(t),i=(t,e="video")=>{var i,s,a,o,r,n;return{active:!0,id:null!==(o=null===(a=null===(s=null===(i=null==t?void 0:t.tracks)||void 0===i?void 0:i[e])||void 0===s?void 0:s.track)||void 0===a?void 0:a.id)&&void 0!==o?o:"",sessionId:t.session_id,displayName:"video"===e?t.user_name||"Guest":"",track:null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r[e])||void 0===n?void 0:n.persistentTrack,type:"video"===e?"camera":"screenshare"}},s=(t,i=!1)=>{var s,a,o,r,n,l,d,c,u,p,h,v,m,f,g,b,S,I;return{id:t.session_id,displayName:t.user_name||"Guest",video:{id:null!==(d=i?null===(o=null===(a=null===(s=null==t?void 0:t.tracks)||void 0===s?void 0:s.rmpVideo)||void 0===a?void 0:a.track)||void 0===o?void 0:o.id:null===(l=null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.track)||void 0===l?void 0:l.id)&&void 0!==d?d:"",paused:e(i?null!==(p=null===(u=null===(c=null==t?void 0:t.tracks)||void 0===c?void 0:c.rmpVideo)||void 0===u?void 0:u.state)&&void 0!==p?p:"off":null===(v=null===(h=null==t?void 0:t.tracks)||void 0===h?void 0:h.video)||void 0===v?void 0:v.state)},audio:{},screenshareVideo:{id:null!==(b=null===(g=null===(f=null===(m=null==t?void 0:t.tracks)||void 0===m?void 0:m.screenVideo)||void 0===f?void 0:f.track)||void 0===g?void 0:g.id)&&void 0!==b?b:"",paused:e(null===(I=null===(S=null==t?void 0:t.tracks)||void 0===S?void 0:S.screenVideo)||void 0===I?void 0:I.state)},screenshareAudio:{}}};exports.DailyVCSWebRenderer=class{constructor(t,e,i,s){var a,o;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],t||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=t,e&&"function"==typeof e.startDOMOutputAsync){this.comp=e,this.getAssetUrlCb=null!==(a=null==s?void 0:s.getAssetUrlCb)&&void 0!==a?a:null,this.rootEl=i,this.viewportSize=null!==(o=null==s?void 0:s.viewportSize)&&void 0!==o?o:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((t,e)=>{if(!t||!e||0===e)return{w:0,h:0};const{width:i,height:s}=t.getBoundingClientRect();return i/s>e?{w:Math.floor(s*e),h:s}:{w:i,h:Math.floor(i/e)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let t=0;t<this.maxVideoInputSlots;t++)this.setActiveVideoInput(t,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((t=>{t&&t.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const t=this.rootEl.clientWidth,e=this.rootEl.clientHeight;if(!t||!e)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?t/this.viewportSize.w:e/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(t,e){t.setAttribute("style","display: none;"),e&&t.setAttribute("data-video-remote-track-id",e),this.rootEl.appendChild(t)}handleParticipantsChange(){var t,a,o,r;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((t=>[t.session_id,t]))),l=this.participantIds.length>0?this.participantIds.map((t=>n[t])).filter(Boolean):Object.values(n),d=[],c=[],u=new Map;for(const n of l)"remote-media-player"===(null==n?void 0:n.participantType)?d.push(i(n,"rmpVideo")):(e(null===(a=null===(t=null==n?void 0:n.tracks)||void 0===t?void 0:t.video)||void 0===a?void 0:a.state)||d.push(i(n)),e(null===(r=null===(o=null==n?void 0:n.tracks)||void 0===o?void 0:o.screenVideo)||void 0===r?void 0:r.state)||c.push(i(n,"screenVideo"))),u.set(n.session_id,s(n,"remote-media-player"===(null==n?void 0:n.participantType)));this.applyTracks([...d,...c]),this.vcsApi.setRoomPeerDescriptionsById(u)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const t in this.defaultParams)this.sendParam(t,this.defaultParams[t]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var t,e;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(e=(t=this.callbacks).onStop)||void 0===e||e.call(t),this.stopResizeObserver())}onError(t){var e,i;console.error("VCS composition error: ",t),null===(i=(e=this.callbacks).onError)||void 0===i||i.call(e,t)}setActiveVideoInput(t,e,i="",s="",a=!1){this.activeVideoInputSlots[t]=!!e&&{id:i||"",type:a?"screenshare":"camera",displayName:a?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const t=[];for(const e of this.activeVideoInputSlots)"object"==typeof e?t.push(e):t.push(!1);this.vcsApi.setActiveVideoInputSlots(t)}sendParam(t,e){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(t,e),this.paramValues[t]=e,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(t,e="merge"){this.vcsApi&&("replace"===e&&(this.paramValues={}),Object.entries(t).forEach((([t,e])=>this.sendParam(t,e))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([t,e])=>new Promise(((i,s)=>{const a=new Image;a.onload=()=>i({name:t,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${t}`),s(new Error(`Image load failed, asset ${t}`))},a.src=e}))));try{const e=(yield Promise.all(t)).reduce(((t,e)=>(t[e.name]=e.image,t)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(t){console.error(t)}}))}applyTracks(t){var e;if(!this.sources||!t)return;const i=this.sources.videoSlots,s=[];for(const a of t){if(!(null==a?void 0:a.track))continue;const t=i.find((t=>t.id===a.id));if(t&&(null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id)===a.track.id)s.push(Object.assign(Object.assign({},t),{displayName:a.displayName}));else{const e=new MediaStream([a.track]);let i;(null==t?void 0:t.element)?i=t.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,a.track.id)),i.srcObject=e,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:a.track.id,element:i,track:a.track,sessionId:a.sessionId,displayName:a.displayName,type:a.type})}}i.filter((t=>s.every((e=>e.id!==t.id)))).forEach((t=>{var e,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id}"]`))||void 0===i||i.remove()}));let a=s.length!==i.length;if(!a)for(let t=0;t<s.length;t++)if(s[t].id!==i[t].id){a=!0;break}if(a){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let t=0;t<20;t++){const e=s[t];e?this.setActiveVideoInput(t,!0,e.id,e.displayName,"screenshare"===e.type):this.setActiveVideoInput(t,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(t,e="replace"){this.participantIds="merge"===e?[...new Set([...this.participantIds,...t])]:t,this.handleParticipantsChange()}};

dist/index.esm.js

@@ -1,1 +0,1 @@
-function t(t,e,i,s){return new(i||(i=Promise))((function(a,o){function r(t){try{l(s.next(t))}catch(t){o(t)}}function n(t){try{l(s.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?a(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,n)}l((s=s.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const e=t=>["off","blocked"].includes(t),i=t=>{var e,i,s,a,o,r;return{active:!0,id:null!==(a=null===(s=null===(i=null===(e=null==t?void 0:t.tracks)||void 0===e?void 0:e.video)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==a?a:"",sessionId:t.session_id,displayName:t.user_name||"Guest",track:null===(r=null===(o=null==t?void 0:t.tracks)||void 0===o?void 0:o.video)||void 0===r?void 0:r.persistentTrack,type:"camera"}},s=t=>{var e,i,s,a,o,r;return{active:!0,id:null!==(a=null===(s=null===(i=null===(e=null==t?void 0:t.tracks)||void 0===e?void 0:e.screenVideo)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==a?a:"",sessionId:t.session_id,displayName:"",track:null===(r=null===(o=null==t?void 0:t.tracks)||void 0===o?void 0:o.screenVideo)||void 0===r?void 0:r.persistentTrack,type:"screenshare"}},a=t=>{var i,s,a,o,r,n,l,c,d,u,h,p;return{id:t.session_id,displayName:t.user_name||"Guest",video:{id:null!==(o=null===(a=null===(s=null===(i=null==t?void 0:t.tracks)||void 0===i?void 0:i.video)||void 0===s?void 0:s.track)||void 0===a?void 0:a.id)&&void 0!==o?o:"",paused:e(null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.state)},audio:{},screenshareVideo:{id:null!==(u=null===(d=null===(c=null===(l=null==t?void 0:t.tracks)||void 0===l?void 0:l.screenVideo)||void 0===c?void 0:c.track)||void 0===d?void 0:d.id)&&void 0!==u?u:"",paused:e(null===(p=null===(h=null==t?void 0:t.tracks)||void 0===h?void 0:h.screenVideo)||void 0===p?void 0:p.state)},screenshareAudio:{}}};class o{constructor(t,e,i,s){var a,o;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],t||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=t,e&&"function"==typeof e.startDOMOutputAsync){this.comp=e,this.getAssetUrlCb=null!==(a=null==s?void 0:s.getAssetUrlCb)&&void 0!==a?a:null,this.rootEl=i,this.viewportSize=null!==(o=null==s?void 0:s.viewportSize)&&void 0!==o?o:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((t,e)=>{if(!t||!e||0===e)return{w:0,h:0};const{width:i,height:s}=t.getBoundingClientRect();return i/s>e?{w:Math.floor(s*e),h:s}:{w:i,h:Math.floor(i/e)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let t=0;t<this.maxVideoInputSlots;t++)this.setActiveVideoInput(t,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((t=>{t&&t.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const t=this.rootEl.clientWidth,e=this.rootEl.clientHeight;if(!t||!e)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?t/this.viewportSize.w:e/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(t,e){t.setAttribute("style","display: none;"),e&&t.setAttribute("data-video-remote-track-id",e),this.rootEl.appendChild(t)}handleParticipantsChange(){var t,o,r,n;const l=Object.fromEntries(Object.values(this.callObject.participants()).map((t=>[t.session_id,t]))),c=this.participantIds.length>0?this.participantIds.map((t=>l[t])).filter(Boolean):Object.values(l),d=[],u=[],h=new Map;for(const l of c)e(null===(o=null===(t=null==l?void 0:l.tracks)||void 0===t?void 0:t.video)||void 0===o?void 0:o.state)||d.push(i(l)),e(null===(n=null===(r=null==l?void 0:l.tracks)||void 0===r?void 0:r.screenVideo)||void 0===n?void 0:n.state)||u.push(s(l)),h.set(l.session_id,a(l));this.applyTracks([...d,...u]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const t in this.defaultParams)this.sendParam(t,this.defaultParams[t]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var t,e;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(e=(t=this.callbacks).onStop)||void 0===e||e.call(t),this.stopResizeObserver())}onError(t){var e,i;console.error("VCS composition error: ",t),null===(i=(e=this.callbacks).onError)||void 0===i||i.call(e,t)}setActiveVideoInput(t,e,i="",s="",a=!1){this.activeVideoInputSlots[t]=!!e&&{id:i||"",type:a?"screenshare":"camera",displayName:a?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const t=[];for(const e of this.activeVideoInputSlots)"object"==typeof e?t.push(e):t.push(!1);this.vcsApi.setActiveVideoInputSlots(t)}sendParam(t,e){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(t,e),this.paramValues[t]=e,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(t,e="merge"){this.vcsApi&&("replace"===e&&(this.paramValues={}),Object.entries(t).forEach((([t,e])=>this.sendParam(t,e))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([t,e])=>new Promise(((i,s)=>{const a=new Image;a.onload=()=>i({name:t,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${t}`),s(new Error(`Image load failed, asset ${t}`))},a.src=e}))));try{const e=(yield Promise.all(t)).reduce(((t,e)=>(t[e.name]=e.image,t)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(t){console.error(t)}}))}applyTracks(t){var e;if(!this.sources||!t)return;const i=this.sources.videoSlots,s=[];for(const a of t){if(!(null==a?void 0:a.track))continue;const t=i.find((t=>t.id===a.id));if(t&&(null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id)===a.track.id)s.push(Object.assign(Object.assign({},t),{displayName:a.displayName}));else{const e=new MediaStream([a.track]);let i;(null==t?void 0:t.element)?i=t.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,a.track.id)),i.srcObject=e,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:a.track.id,element:i,track:a.track,sessionId:a.sessionId,displayName:a.displayName,type:a.type})}}i.filter((t=>s.every((e=>e.id!==t.id)))).forEach((t=>{var e,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id}"]`))||void 0===i||i.remove()}));let a=s.length!==i.length;if(!a)for(let t=0;t<s.length;t++)if(s[t].id!==i[t].id){a=!0;break}if(a){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let t=0;t<20;t++){const e=s[t];e?this.setActiveVideoInput(t,!0,e.id,e.displayName,"screenshare"===e.type):this.setActiveVideoInput(t,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(t,e="replace"){this.participantIds="merge"===e?[...new Set([...this.participantIds,...t])]:t,this.handleParticipantsChange()}}export{o as DailyVCSWebRenderer};
+function t(t,e,i,s){return new(i||(i=Promise))((function(o,a){function r(t){try{l(s.next(t))}catch(t){a(t)}}function n(t){try{l(s.throw(t))}catch(t){a(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,n)}l((s=s.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const e=t=>["off","blocked"].includes(t),i=(t,e="video")=>{var i,s,o,a,r,n;return{active:!0,id:null!==(a=null===(o=null===(s=null===(i=null==t?void 0:t.tracks)||void 0===i?void 0:i[e])||void 0===s?void 0:s.track)||void 0===o?void 0:o.id)&&void 0!==a?a:"",sessionId:t.session_id,displayName:"video"===e?t.user_name||"Guest":"",track:null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r[e])||void 0===n?void 0:n.persistentTrack,type:"video"===e?"camera":"screenshare"}},s=(t,i=!1)=>{var s,o,a,r,n,l,d,c,u,p,h,v,m,f,g,b,S,I;return{id:t.session_id,displayName:t.user_name||"Guest",video:{id:null!==(d=i?null===(a=null===(o=null===(s=null==t?void 0:t.tracks)||void 0===s?void 0:s.rmpVideo)||void 0===o?void 0:o.track)||void 0===a?void 0:a.id:null===(l=null===(n=null===(r=null==t?void 0:t.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.track)||void 0===l?void 0:l.id)&&void 0!==d?d:"",paused:e(i?null!==(p=null===(u=null===(c=null==t?void 0:t.tracks)||void 0===c?void 0:c.rmpVideo)||void 0===u?void 0:u.state)&&void 0!==p?p:"off":null===(v=null===(h=null==t?void 0:t.tracks)||void 0===h?void 0:h.video)||void 0===v?void 0:v.state)},audio:{},screenshareVideo:{id:null!==(b=null===(g=null===(f=null===(m=null==t?void 0:t.tracks)||void 0===m?void 0:m.screenVideo)||void 0===f?void 0:f.track)||void 0===g?void 0:g.id)&&void 0!==b?b:"",paused:e(null===(I=null===(S=null==t?void 0:t.tracks)||void 0===S?void 0:S.screenVideo)||void 0===I?void 0:I.state)},screenshareAudio:{}}};class o{constructor(t,e,i,s){var o,a;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],t||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=t,e&&"function"==typeof e.startDOMOutputAsync){this.comp=e,this.getAssetUrlCb=null!==(o=null==s?void 0:s.getAssetUrlCb)&&void 0!==o?o:null,this.rootEl=i,this.viewportSize=null!==(a=null==s?void 0:s.viewportSize)&&void 0!==a?a:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((t,e)=>{if(!t||!e||0===e)return{w:0,h:0};const{width:i,height:s}=t.getBoundingClientRect();return i/s>e?{w:Math.floor(s*e),h:s}:{w:i,h:Math.floor(i/e)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let t=0;t<this.maxVideoInputSlots;t++)this.setActiveVideoInput(t,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((t=>{t&&t.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const t=this.rootEl.clientWidth,e=this.rootEl.clientHeight;if(!t||!e)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?t/this.viewportSize.w:e/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(t,e){t.setAttribute("style","display: none;"),e&&t.setAttribute("data-video-remote-track-id",e),this.rootEl.appendChild(t)}handleParticipantsChange(){var t,o,a,r;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((t=>[t.session_id,t]))),l=this.participantIds.length>0?this.participantIds.map((t=>n[t])).filter(Boolean):Object.values(n),d=[],c=[],u=new Map;for(const n of l)"remote-media-player"===(null==n?void 0:n.participantType)?d.push(i(n,"rmpVideo")):(e(null===(o=null===(t=null==n?void 0:n.tracks)||void 0===t?void 0:t.video)||void 0===o?void 0:o.state)||d.push(i(n)),e(null===(r=null===(a=null==n?void 0:n.tracks)||void 0===a?void 0:a.screenVideo)||void 0===r?void 0:r.state)||c.push(i(n,"screenVideo"))),u.set(n.session_id,s(n,"remote-media-player"===(null==n?void 0:n.participantType)));this.applyTracks([...d,...c]),this.vcsApi.setRoomPeerDescriptionsById(u)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const t in this.defaultParams)this.sendParam(t,this.defaultParams[t]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var t,e;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(e=(t=this.callbacks).onStop)||void 0===e||e.call(t),this.stopResizeObserver())}onError(t){var e,i;console.error("VCS composition error: ",t),null===(i=(e=this.callbacks).onError)||void 0===i||i.call(e,t)}setActiveVideoInput(t,e,i="",s="",o=!1){this.activeVideoInputSlots[t]=!!e&&{id:i||"",type:o?"screenshare":"camera",displayName:o?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const t=[];for(const e of this.activeVideoInputSlots)"object"==typeof e?t.push(e):t.push(!1);this.vcsApi.setActiveVideoInputSlots(t)}sendParam(t,e){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(t,e),this.paramValues[t]=e,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(t,e="merge"){this.vcsApi&&("replace"===e&&(this.paramValues={}),Object.entries(t).forEach((([t,e])=>this.sendParam(t,e))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([t,e])=>new Promise(((i,s)=>{const o=new Image;o.onload=()=>i({name:t,image:o}),o.onerror=()=>{console.error(`Image load failed, asset ${t}`),s(new Error(`Image load failed, asset ${t}`))},o.src=e}))));try{const e=(yield Promise.all(t)).reduce(((t,e)=>(t[e.name]=e.image,t)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(t){console.error(t)}}))}applyTracks(t){var e;if(!this.sources||!t)return;const i=this.sources.videoSlots,s=[];for(const o of t){if(!(null==o?void 0:o.track))continue;const t=i.find((t=>t.id===o.id));if(t&&(null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id)===o.track.id)s.push(Object.assign(Object.assign({},t),{displayName:o.displayName}));else{const e=new MediaStream([o.track]);let i;(null==t?void 0:t.element)?i=t.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,o.track.id)),i.srcObject=e,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:o.track.id,element:i,track:o.track,sessionId:o.sessionId,displayName:o.displayName,type:o.type})}}i.filter((t=>s.every((e=>e.id!==t.id)))).forEach((t=>{var e,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(e=null==t?void 0:t.track)||void 0===e?void 0:e.id}"]`))||void 0===i||i.remove()}));let o=s.length!==i.length;if(!o)for(let t=0;t<s.length;t++)if(s[t].id!==i[t].id){o=!0;break}if(o){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let t=0;t<20;t++){const e=s[t];e?this.setActiveVideoInput(t,!0,e.id,e.displayName,"screenshare"===e.type):this.setActiveVideoInput(t,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(t,e="replace"){this.participantIds="merge"===e?[...new Set([...this.participantIds,...t])]:t,this.handleParticipantsChange()}}export{o as DailyVCSWebRenderer};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DailyVCSWebRenderer={})}(this,(function(e){"use strict";function t(e,t,i,s){return new(i||(i=Promise))((function(o,a){function r(e){try{l(s.next(e))}catch(e){a(e)}}function n(e){try{l(s.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,n)}l((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const i=e=>["off","blocked"].includes(e),s=e=>{var t,i,s,o,a,r;return{active:!0,id:null!==(o=null===(s=null===(i=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.video)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==o?o:"",sessionId:e.session_id,displayName:e.user_name||"Guest",track:null===(r=null===(a=null==e?void 0:e.tracks)||void 0===a?void 0:a.video)||void 0===r?void 0:r.persistentTrack,type:"camera"}},o=e=>{var t,i,s,o,a,r;return{active:!0,id:null!==(o=null===(s=null===(i=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.screenVideo)||void 0===i?void 0:i.track)||void 0===s?void 0:s.id)&&void 0!==o?o:"",sessionId:e.session_id,displayName:"",track:null===(r=null===(a=null==e?void 0:e.tracks)||void 0===a?void 0:a.screenVideo)||void 0===r?void 0:r.persistentTrack,type:"screenshare"}},a=e=>{var t,s,o,a,r,n,l,d,c,u,h,p;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:null!==(a=null===(o=null===(s=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.video)||void 0===s?void 0:s.track)||void 0===o?void 0:o.id)&&void 0!==a?a:"",paused:i(null===(n=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.state)},audio:{},screenshareVideo:{id:null!==(u=null===(c=null===(d=null===(l=null==e?void 0:e.tracks)||void 0===l?void 0:l.screenVideo)||void 0===d?void 0:d.track)||void 0===c?void 0:c.id)&&void 0!==u?u:"",paused:i(null===(p=null===(h=null==e?void 0:e.tracks)||void 0===h?void 0:h.screenVideo)||void 0===p?void 0:p.state)},screenshareAudio:{}}};e.DailyVCSWebRenderer=class{constructor(e,t,i,s){var o,a;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,t&&"function"==typeof t.startDOMOutputAsync){this.comp=t,this.getAssetUrlCb=null!==(o=null==s?void 0:s.getAssetUrlCb)&&void 0!==o?o:null,this.rootEl=i,this.viewportSize=null!==(a=null==s?void 0:s.viewportSize)&&void 0!==a?a:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:i,height:s}=e.getBoundingClientRect();return i/s>t?{w:Math.floor(s*t),h:s}:{w:i,h:Math.floor(i/t)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-remote-track-id",t),this.rootEl.appendChild(e)}handleParticipantsChange(){var e,t,r,n;const l=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),d=this.participantIds.length>0?this.participantIds.map((e=>l[e])).filter(Boolean):Object.values(l),c=[],u=[],h=new Map;for(const l of d)i(null===(t=null===(e=null==l?void 0:l.tracks)||void 0===e?void 0:e.video)||void 0===t?void 0:t.state)||c.push(s(l)),i(null===(n=null===(r=null==l?void 0:l.tracks)||void 0===r?void 0:r.screenVideo)||void 0===n?void 0:n.state)||u.push(o(l)),h.set(l.session_id,a(l));this.applyTracks([...c,...u]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const e in this.defaultParams)this.sendParam(e,this.defaultParams[e]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,i;console.error("VCS composition error: ",e),null===(i=(t=this.callbacks).onError)||void 0===i||i.call(t,e)}setActiveVideoInput(e,t,i="",s="",o=!1){this.activeVideoInputSlots[e]=!!t&&{id:i||"",type:o?"screenshare":"camera",displayName:o?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(e,t),this.paramValues[e]=t,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(e,t="merge"){this.vcsApi&&("replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([e,t])=>new Promise(((i,s)=>{const o=new Image;o.onload=()=>i({name:e,image:o}),o.onerror=()=>{console.error(`Image load failed, asset ${e}`),s(new Error(`Image load failed, asset ${e}`))},o.src=t}))));try{const e=(yield Promise.all(t)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t;if(!this.sources||!e)return;const i=this.sources.videoSlots,s=[];for(const o of e){if(!(null==o?void 0:o.track))continue;const e=i.find((e=>e.id===o.id));if(e&&(null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id)===o.track.id)s.push(Object.assign(Object.assign({},e),{displayName:o.displayName}));else{const t=new MediaStream([o.track]);let i;(null==e?void 0:e.element)?i=e.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,o.track.id)),i.srcObject=t,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:o.track.id,element:i,track:o.track,sessionId:o.sessionId,displayName:o.displayName,type:o.type})}}i.filter((e=>s.every((t=>t.id!==e.id)))).forEach((e=>{var t,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id}"]`))||void 0===i||i.remove()}));let o=s.length!==i.length;if(!o)for(let e=0;e<s.length;e++)if(s[e].id!==i[e].id){o=!0;break}if(o){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=s[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,this.handleParticipantsChange()}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DailyVCSWebRenderer={})}(this,(function(e){"use strict";function t(e,t,i,s){return new(i||(i=Promise))((function(o,a){function r(e){try{l(s.next(e))}catch(e){a(e)}}function n(e){try{l(s.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,n)}l((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const i=e=>["off","blocked"].includes(e),s=(e,t="video")=>{var i,s,o,a,r,n;return{active:!0,id:null!==(a=null===(o=null===(s=null===(i=null==e?void 0:e.tracks)||void 0===i?void 0:i[t])||void 0===s?void 0:s.track)||void 0===o?void 0:o.id)&&void 0!==a?a:"",sessionId:e.session_id,displayName:"video"===t?e.user_name||"Guest":"",track:null===(n=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r[t])||void 0===n?void 0:n.persistentTrack,type:"video"===t?"camera":"screenshare"}},o=(e,t=!1)=>{var s,o,a,r,n,l,d,c,u,p,h,v,m,f,g,b,S,y;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:null!==(d=t?null===(a=null===(o=null===(s=null==e?void 0:e.tracks)||void 0===s?void 0:s.rmpVideo)||void 0===o?void 0:o.track)||void 0===a?void 0:a.id:null===(l=null===(n=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r.video)||void 0===n?void 0:n.track)||void 0===l?void 0:l.id)&&void 0!==d?d:"",paused:i(t?null!==(p=null===(u=null===(c=null==e?void 0:e.tracks)||void 0===c?void 0:c.rmpVideo)||void 0===u?void 0:u.state)&&void 0!==p?p:"off":null===(v=null===(h=null==e?void 0:e.tracks)||void 0===h?void 0:h.video)||void 0===v?void 0:v.state)},audio:{},screenshareVideo:{id:null!==(b=null===(g=null===(f=null===(m=null==e?void 0:e.tracks)||void 0===m?void 0:m.screenVideo)||void 0===f?void 0:f.track)||void 0===g?void 0:g.id)&&void 0!==b?b:"",paused:i(null===(y=null===(S=null==e?void 0:e.tracks)||void 0===S?void 0:S.screenVideo)||void 0===y?void 0:y.state)},screenshareAudio:{}}};e.DailyVCSWebRenderer=class{constructor(e,t,i,s){var o,a;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=1.7777777777777777,this.participantIds=[],e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,t&&"function"==typeof t.startDOMOutputAsync){this.comp=t,this.getAssetUrlCb=null!==(o=null==s?void 0:s.getAssetUrlCb)&&void 0!==o?o:null,this.rootEl=i,this.viewportSize=null!==(a=null==s?void 0:s.viewportSize)&&void 0!==a?a:{w:1280,h:720},(null==s?void 0:s.aspectRatio)&&(this.aspectRatio=s.aspectRatio,this.viewportSize=((e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:i,height:s}=e.getBoundingClientRect();return i/s>t?{w:Math.floor(s*t),h:s}:{w:i,h:Math.floor(i/t)}})(i,this.aspectRatio)),(null==s?void 0:s.defaultParams)&&(this.defaultParams=s.defaultParams),(null==s?void 0:s.defaultAssets)&&(this.defaultAssets=s.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==s?void 0:s.maxVideoInputSlots)&&(this.maxVideoInputSlots=s.maxVideoInputSlots),(null==s?void 0:s.fps)&&(this.fps=s.fps),(null==s?void 0:s.callbacks)&&(this.callbacks=s.callbacks),(null==s?void 0:s.participantIds)&&(null==s?void 0:s.participantIds.length)>0&&(this.participantIds=s.participantIds),this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const i=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=i>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-remote-track-id",t),this.rootEl.appendChild(e)}handleParticipantsChange(){var e,t,a,r;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=this.participantIds.length>0?this.participantIds.map((e=>n[e])).filter(Boolean):Object.values(n),d=[],c=[],u=new Map;for(const n of l)"remote-media-player"===(null==n?void 0:n.participantType)?d.push(s(n,"rmpVideo")):(i(null===(t=null===(e=null==n?void 0:n.tracks)||void 0===e?void 0:e.video)||void 0===t?void 0:t.state)||d.push(s(n)),i(null===(r=null===(a=null==n?void 0:n.tracks)||void 0===a?void 0:a.screenVideo)||void 0===r?void 0:r.state)||c.push(s(n,"screenVideo"))),u.set(n.session_id,o(n,"remote-media-player"===(null==n?void 0:n.participantType)));this.applyTracks([...d,...c]),this.vcsApi.setRoomPeerDescriptionsById(u)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this))}start(){var e,i;return t(this,void 0,void 0,(function*(){if(this.comp){if(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.defaultParams)for(const e in this.defaultParams)this.sendParam(e,this.defaultParams[e]);this.rootDisplaySizeChanged(),null===(i=(e=this.callbacks).onStart)||void 0===i||i.call(e),this.startResizeObserver()}}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,i;console.error("VCS composition error: ",e),null===(i=(t=this.callbacks).onError)||void 0===i||i.call(t,e)}setActiveVideoInput(e,t,i="",s="",o=!1){this.activeVideoInputSlots[e]=!!t&&{id:i||"",type:o?"screenshare":"camera",displayName:o?"":s}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var i,s;this.vcsApi&&(this.vcsApi.setParamValue(e,t),this.paramValues[e]=t,null===(s=(i=this.callbacks).onParamsChanged)||void 0===s||s.call(i,this.paramValues))}sendParams(e,t="merge"){this.vcsApi&&("replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t))))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(e={},i="replace"){return t(this,void 0,void 0,(function*(){const t=Object.entries(e).map((([e,t])=>new Promise(((i,s)=>{const o=new Image;o.onload=()=>i({name:e,image:o}),o.onerror=()=>{console.error(`Image load failed, asset ${e}`),s(new Error(`Image load failed, asset ${e}`))},o.src=t}))));try{const e=(yield Promise.all(t)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===i)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==i)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t;if(!this.sources||!e)return;const i=this.sources.videoSlots,s=[];for(const o of e){if(!(null==o?void 0:o.track))continue;const e=i.find((e=>e.id===o.id));if(e&&(null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id)===o.track.id)s.push(Object.assign(Object.assign({},e),{displayName:o.displayName}));else{const t=new MediaStream([o.track]);let i;(null==e?void 0:e.element)?i=e.element:(i=document.createElement("video"),this.placeVideoSourceInDOM(i,o.track.id)),i.srcObject=t,i.setAttribute("autoplay","true"),i.setAttribute("playsinline","true"),i.setAttribute("controls","false"),s.push({active:!0,id:o.track.id,element:i,track:o.track,sessionId:o.sessionId,displayName:o.displayName,type:o.type})}}i.filter((e=>s.every((t=>t.id!==e.id)))).forEach((e=>{var t,i;null===(i=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id}"]`))||void 0===i||i.remove()}));let o=s.length!==i.length;if(!o)for(let e=0;e<s.length;e++)if(s[e].id!==i[e].id){o=!0;break}if(o){this.sources.videoSlots=s,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=s[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,this.handleParticipantsChange()}}}));

dist/typings/lib/videoUtils.d.ts

 import { DailyParticipant } from '@daily-co/daily-js';
-export declare const createVideoObject: (p: DailyParticipant) => {
+export declare const createTrackObject: (p: DailyParticipant, trackName?: 'video' | 'screenVideo' | 'rmpVideo') => {
     active: boolean;
@@ -8,15 +8,7 @@ id: string;
     track: MediaStreamTrack | undefined;
-    type: "camera";
+    type: "camera" | "screenshare";
 };
-export declare const createScreenshareObject: (p: DailyParticipant) => {
-    active: boolean;
+export declare const createPeerObject: (p: DailyParticipant, isRMP?: boolean) => {
     id: string;
-    sessionId: string;
     displayName: string;
-    track: MediaStreamTrack | undefined;
-    type: "screenshare";
-};
-export declare const createPeerObject: (p: DailyParticipant) => {
-    id: string;
-    displayName: string;
     video: {
@@ -23,0 +15,0 @@ id: string;

package.json

 {
   "name": "@daily-co/daily-vcs-web",
   "description": "This package enables developers to render a VCSComposition inside a given DOM element in the browser.",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "license": "BSD-2-Clause",
@@ -6,0 +6,0 @@ "main": "dist/index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46521

increased by0.39%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

398

decreased by-1.97%

No dependency changes