Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

Webcamera + Audio

Avatar

Level 2
I would like to get the webcamera and audio working well
together. What I have done is taken the example code for the
webcamera and added in AudioSubscriber and AudioPublisher. The
first problem is performance is terrible. I have quality on the
webcam publisher set to 70. Most of the time I cant even hear the
audio from the other end. Each of these components is within the
same ConnectSessionContainer. I am not doing anything differently
to the SharedProperty as found in the example code. I looked around
on this forum for help but didn't really find what I was looking
for. Does anyone know how to do this correctly/efficiently? It
would be nice if the webcamera example also had audio. It doesn't
do a whole lot to have video and no audio.

Thanks!
46 Replies

Avatar

Level 2
this is my source :

my declation and tags :





<mx:Application layout="absolute"

xmlns:mx="
http://www.adobe.com/2006/mxml"

xmlns:rtc="AfcsNameSpace"

xmlns:collaboration = "com.adobe.rtc.collaboration.*"

xmlns:components="*"

>

<!-- cette partie du code es là plus interessante
car elle sert à capter le moment où notre application est
connectée et synchronisée, nous pouvons ajouter un
écouteur d’événement
SessionEvent.SYNCHRONIZATION_CHANGE sur le container, et surveiller
sa propriété ‘isSynchronized‘. Nous
reviendrons prochainement sur les différents aspects et
acteurs en jeu lors de cette synchronisation. -->



<mx:Script>

<![CDATA[

import mx.controls.Alert;



import com.adobe.rtc.events.SessionEvent; //utilisé
pour les trois blocs

import com.adobe.rtc.messaging.UserRoles; //utilisé
pour les trois blocs

import com.adobe.rtc.collaboration.AudioPublisher; //
AudioPublisher me sert pour la gestion du microphone

import com.adobe.rtc.collaboration.AudioSubscriber; // me
sert pour choisr l' aboné écouté

//import com.adobe.rtc.collaboration; // me sert pour la
gestion du microphone

//import com.adobe.rtc.clientManagers;// me sert pour la
gestion du microphone





import com.adobe.rtc.events.StreamEvent;// pour le son
(audio xml)







import mx.events.ItemClickEvent; //pour le son ( audio xml)

import mx.controls.Label;

import mx.core.UIComponent; // me sert pour la gestion du
microphone

import flash.events.EventDispatcher;// me sert pour la
gestion du microphone

// import com.adobe.rtc.components:ResizableCanvas; amettre?






//debut bloc share

import
com.adobe.rtc.sharedManagers.descriptors.FileDescriptor;

import mx.utils.UIDUtil;

import mx.collections.ArrayCollection;

import com.adobe.rtc.collaboration.FileSubscriber;

import com.adobe.rtc.sharedManagers.UserManager;

import com.adobe.rtc.messaging.NodeConfiguration;

import com.adobe.rtc.events.CollectionNodeEvent;

import com.adobe.rtc.collaboration.FilePublisher;

import com.adobe.rtc.sharedManagers.FileManager;



[Bindable]

private var applicationTitle:String = "File Publisher
Example";



// list of managers

private var _fileManager:FileManager;

private var _filePublisher:FilePublisher;

private var _fileSubscriber:FileSubscriber;

private var _userManager:UserManager;



// our datagrid dataprovider will use this collection

[Bindable]

private var _fileDescriptors:ArrayCollection = new
ArrayCollection();



// file sharing group id, it is similiar to that of folder
concept

private var _groupid:String = "_filePublisherExample";

//fin bloc share



// état de la session

private var isConnected:Boolean = false;











What i forget?





Lionceau,

Avatar

Level 2
this is my source , may be here there is a errror or not :



<mx:Tile id="camTiles"

direction="horizontal"

height="100%"

width="100%"

alpha="0"

horizontalScrollPolicy="off"

verticalScrollPolicy="off"

creationComplete="onCreationComplete()"

horizontalGap="10" verticalGap="10">



<mx:Repeater id="rp" dataProvider="{selectedUsers}">



<components:ResizableCanvas id="rs" width="100%"
height="100%"

minHeight="200" minWidth="200"

backgroundAlpha=".5"

backgroundColor="gray"

cornerRadius="12"

borderStyle="solid"

horizontalScrollPolicy="off" verticalScrollPolicy="off">





<collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"





</collaboration:WebcamSubscriber>

width="100%" height="100%"

publisherIDs="{[rp.currentItem.userID]}"
click="onClick(event)"

userBooted="onBooted(event)"
streamChange="onCameraPause(event)"/>





</components:ResizableCanvas>



</mx:Repeater>



</mx:Tile>

Avatar

Level 2
Where is a error ?

Sorry i don't know, i don't find .



Lionceau;

Avatar

Level 2
Sorry , i don't know why but my error is other , look this :









Severity and Description Path Resource Location Creation Time
Id

Element type "components:ResizableCanvas" must be followed by
either attribute specifications, ">" or "/>". essai/src
essai.mxml line 375 1236093596296 114





















why i have this error ?



Lionceau,

Avatar

Former Community Member
Hi,



Is your ResizeableCanvas file ( that has the
ResizeableCanvas) class in the same location (directory) as you
code you pasted below? Your code looks good to me, just that I am
not sure where your ResizableCanvas class is. You need to tell me
where this class is. It is not a native flex or afcs class, so
where you have kept it.



Secondly , if you are using AfcsNameSpace, you can use
rtc:WebcamPublisher and rtc:WebcamSubscriber instead of defining
seperately the collaboration namespace.



Thanks

Hironmay Basu

Avatar

Level 2
Just replace ResizeableCanvas with Canvas. It is another
class I got somewhere else.

Avatar

Former Community Member
Hi,



And also when you use Canvas instead of ResizeableCanvas, you
need to use mx:Canvas .

Canvas is a flex defined class.



If you are not using the examples provided in SDK, please
make sure you have all the classes with you.

Thanks

Hironmay Basu

Avatar

Level 2
i don't find ResizeableCanvas in my project , there is not
file with this name !!







yes i use xmlns:rtc="AfcsNameSpace"



And i don't use rtc:WebcamPublisher and rtc:WebcamSubscriber



but <collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"

</collaboration:WebcamSubscriber>



Lionceau,



Avatar

Level 2
last i use this



<components:ResizableCanvas id="rs" width="100%"
height="100%"

minHeight="200" minWidth="200"

backgroundAlpha=".5"

backgroundColor="gray"

cornerRadius="12"

borderStyle="solid"

horizontalScrollPolicy="off" verticalScrollPolicy="off"





<collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"

</collaboration:WebcamSubscriber>



width="100%" height="100%"

publisherIDs="{[rp.currentItem.userID]}"
click="onClick(event)"

userBooted="onBooted(event)"
streamChange="onCameraPause(event)"/>





</components:ResizableCanvas>





after i use this



<components:Canvas id="rs" width="100%" height="100%"

minHeight="200" minWidth="200"

backgroundAlpha=".5"

backgroundColor="gray"

cornerRadius="12"

borderStyle="solid"

horizontalScrollPolicy="off" verticalScrollPolicy="off"





<collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"

</collaboration:WebcamSubscriber>



width="100%" height="100%"

publisherIDs="{[rp.currentItem.userID]}"
click="onClick(event)"

userBooted="onBooted(event)"
streamChange="onCameraPause(event)"/>





</components:Canvas>









and i have always this error :



Severity and Description Path Resource Location Creation Time
Id

Element type "components:Canvas" must be followed by either
attribute specifications, ">" or "/>". essai/src essai.mxml
line 375 1236095769687 134









lionceau,

Avatar

Former Community Member
You need to use mx:Canvas as it is Canvas is a inbuilt class
of flex.



Hironmay

Avatar

Level 2
this is my source :



<collaboration:AudioSubscriber id="audioSub"
publisherIDs="{audioIds}"/>





<mx:Tile id="camTiles"

direction="horizontal"

height="100%"

width="100%"

alpha="0"

horizontalScrollPolicy="off"

verticalScrollPolicy="off"

creationComplete="onCreationComplete()"

horizontalGap="10" verticalGap="10">



<mx:Repeater id="rp" dataProvider="{selectedUsers}">



<components:Canvas id="rs" width="100%" height="100%"

minHeight="200" minWidth="200"

backgroundAlpha=".5"

backgroundColor="gray"

cornerRadius="12"

borderStyle="solid"

horizontalScrollPolicy="off" verticalScrollPolicy="off"





<collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"

</collaboration:WebcamSubscriber>



width="100%" height="100%"

publisherIDs="{[rp.currentItem.userID]}"
click="onClick(event)"

userBooted="onBooted(event)"
streamChange="onCameraPause(event)"/>





</components:Canvas>



</mx:Repeater>



</mx:Tile>







yes i don't use mx:Canvas , what i put into?









lionceau,

Avatar

Former Community Member
Use mx:Canvas. Replace components:canvas with
mx:canvas

Avatar

Level 2
yes my source coode is acttually this ;

<collaboration:AudioSubscriber id="audioSub"
publisherIDs="{audioIds}"/>





<mx:Tile id="camTiles"

direction="horizontal"

height="100%"

width="100%"

alpha="0"

horizontalScrollPolicy="off"

verticalScrollPolicy="off"

creationComplete="onCreationComplete()"

horizontalGap="10" verticalGap="10">



<mx:Repeater id="rp" dataProvider="{selectedUsers}">



<<mx:canvas id="rs" width="100%" height="100%"

minHeight="200" minWidth="200"

backgroundAlpha=".5"

backgroundColor="gray"

cornerRadius="12"

borderStyle="solid"

horizontalScrollPolicy="off" verticalScrollPolicy="off"





<collaboration:WebcamSubscriber
webcamPublisher="{webCamPub}"

</collaboration:WebcamSubscriber>



width="100%" height="100%"

publisherIDs="{[rp.currentItem.userID]}"
click="onClick(event)"

userBooted="onBooted(event)"
streamChange="onCameraPause(event)"/>





</mx:canvas>



</mx:Repeater>



</mx:Tile>









but , i have for ever a error , this error :







Severity and Description Path Resource Location Creation Time
Id

invalid character or markup found in script block. Try
surrounding your code with a CDATA block. essai/src essai.mxml

Unknown 1236097859765 152









Why i have this ?









Many Thanks,





Lionceau,

Avatar

Level 2
this a very big bug , my sofware don't found
<mx:Script> why?

i don't know , because <mx:Script> is green as */
blabla/* is green , why ? , the bug may be come here what else ?
not?







<mx:Script>

<![CDATA[

import mx.controls.Alert;



import com.adobe.rtc.events.SessionEvent; //utilisé
pour les trois blocs

import com.adobe.rtc.messaging.UserRoles; //utilisé
pour les trois blocs

import com.adobe.rtc.collaboration.AudioPublisher; //
AudioPublisher me sert pour la gestion du microphone

import com.adobe.rtc.collaboration.AudioSubscriber; // me
sert pour choisr l' aboné écouté

//import com.adobe.rtc.collaboration; // me sert pour la
gestion du microphone

//import com.adobe.rtc.clientManagers;// me sert pour la
gestion du microphone





import com.adobe.rtc.events.StreamEvent;// pour le son
(audio xml)







import mx.events.ItemClickEvent; //pour le son ( audio xml)

import mx.controls.Label;

import mx.core.UIComponent; // me sert pour la gestion du
microphone

import flash.events.EventDispatcher;// me sert pour la
gestion du microphone

// import com.adobe.rtc.components:ResizableCanvas; amettre?






//debut bloc share

import
com.adobe.rtc.sharedManagers.descriptors.FileDescriptor;

import mx.utils.UIDUtil;

import mx.collections.ArrayCollection;

import com.adobe.rtc.collaboration.FileSubscriber;

import com.adobe.rtc.sharedManagers.UserManager;

import com.adobe.rtc.messaging.NodeConfiguration;

import com.adobe.rtc.events.CollectionNodeEvent;

import com.adobe.rtc.collaboration.FilePublisher;

import com.adobe.rtc.sharedManagers.FileManager;



[Bindable]

private var applicationTitle:String = "File Publisher
Example";



// list of managers

private var _fileManager:FileManager;

private var _filePublisher:FilePublisher;

private var _fileSubscriber:FileSubscriber;

private var _userManager:UserManager;



// our datagrid dataprovider will use this collection

[Bindable]

private var _fileDescriptors:ArrayCollection = new
ArrayCollection();



// file sharing group id, it is similiar to that of folder
concept

private var _groupid:String = "_filePublisherExample";

//fin bloc share



// état de la session

private var isConnected:Boolean = false;

private var activityTimer:Timer = new Timer(30,1); // adel
???




//------------------------------------------------------------------------------------------------------------------------------------------>


//---------------------DEBUT SONNN
----------------------------------------->



/**

* When a click starts the audio, it publishes the audio
through AudioPublisher.

* Another click stops the audio.

*/

private function onAudioClick(p_evt:MouseEvent):void

{

if ( p_evt.currentTarget.label == "Start My Audio" ) {

audio.publish();

p_evt.currentTarget.label = "Stop My Audio" ;

}else if (p_evt.currentTarget.label == "Stop My Audio" ){

audio.stop();

p_evt.currentTarget.label = "Start My Audio" ;

}

}









/**

* Changes the gain by changing the gain slider value.

*/

private function onGainChange(event:Event):void

{

audio.gain = gainSlider.value ;

}

/**

* * Controls echo suppression through the use of radio
buttons.

*/

private function onItemClick(p_evt:ItemClickEvent):void

{

if ( p_evt.currentTarget.selectedValue == "Yes" ) {

audio.useEchoSuppression = true ;

}else if ( p_evt.currentTarget.selectedValue == "No" ) {

audio.useEchoSuppression = false ;

}

}

//------------------------------------------------------------------------------------------------------------------------------------------>

//--------------------FiN SONNNNNN
------------------------------------------------>




//------------------------------------------------------------------------------------------------------------------------------------------>


//--------------------Debut share
------------------------------------------------>

Avatar

Level 2


/**

* This application shows how to upload, download, delete,
and display files

* via AFCS's FileManager API, FilePublisher, and
FileSubscriber components.

*/





/**

* Completes initialization and adds session listeners to
catch session connected events.

*/



/**/ private function init():void

{

// we are interested in both SYNCHRONIZATION_CHANGE
(connection success) and Error events


sessionManager.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE,
onSessionEventNotification);

sessionManager.addEventListener(SessionEvent.ERROR,
onSessionEventNotification);



// small status indicator

notificationMessage.text = "Login to the AFC Service...";

}



/**

* Handles sessionEvents such as synchronization, errors, and
so on.

* @see SessionEvent

*/

/**/ private function
onSessionEventNotification(p_evt:SessionEvent):void

{

//The type of event emitted when the session gains or loses
synchronization with its source.

if (p_evt.type == SessionEvent.SYNCHRONIZATION_CHANGE) {



//if we are successfully connected

if (sessionManager.isSynchronized) {



notificationMessage.text = "Connected";



// Get the file manager from our connectSession.

if (!_fileManager) {

_fileManager = sessionManager.fileManager;

}



// Get the user manager from connectSession for later use.

if (!_userManager) {

_userManager = sessionManager.userManager;

}



// create new file publisher to upload/delete files

if(!_filePublisher){

_filePublisher = new FilePublisher();

_filePublisher.initialize();



//Only a room owner can create the new file group (a group
is like folder).

if(!_fileManager.isGroupDefined(_groupid) &&
_fileManager.getUserRole(_userManager.myUserID,_groupid) ==
UserRoles.OWNER) {

//Create a new node with a new groupid.

var nodeConfig:NodeConfiguration = new NodeConfiguration;

nodeConfig.sessionDependentItems = false; //Specifies
whether files in the pod should be deleted as the session ends.

_filePublisher.createAndUseGroup(_groupid, nodeConfig);

}else {

//otherwise, use assigned groupid

_filePublisher.groupName = _groupid;

}

}



// Create a file subscriber to download file.

if(!_fileSubscriber){

_fileSubscriber = new FileSubscriber();

_fileSubscriber.initialize();

}



// Bind to the file manager's file descriptors array
collection to display the datagrid user interface.

_fileDescriptors =
_fileManager.getFileDescriptors(_groupid);

}

}

else if (p_evt.type == SessionEvent.ERROR) {

// we get an error from connect session

notificationMessage.text = "Error: " + p_evt.error;

}

}



/**

* Handle the upload button click.

*/

/**/ private function onUploadClick():void

{

var filterArray:Array = [new FileFilter("*.*", "*.*")];

_filePublisher.browse(UIDUtil.createUID(), filterArray);

}



/**

* Handle the download button click.

*/

/**/ private function onDownloadClick():void

{

if(_fileGrid.selectedItem) {

try{

_fileSubscriber.download(_fileGrid.selectedItem as
FileDescriptor);

}catch(e:Error) {

trace("Error download: " + e.message);

}

}



}



/**

* Handle the delete button click.

*/

/**/ private function onDeleteClick():void

{

if(_fileGrid.selectedItem) {

_filePublisher.remove(_fileGrid.selectedItem as
FileDescriptor);

}

}










//------------------------------------------------------------------------------------------------------------------------------------------>


//--------------------Finnn share
------------------------------------------------>



// à chaque évenement de synchronisation de la
session

// connexion, deconnexion, changement d'état de salon,
...

private function onSynchro( e:SessionEvent ):void

{

// une fois que l'application parvient à se connecter /
synchroniser



if ( sessionManager.isSynchronized && !isConnected )

{

Alert.show("Application connectée");



isConnected = true ;



removeChild( logPanel );



} else if ( ! sessionManager.isSynchronized &&
isConnected ){

// si la connexion est perdue

isConnected = false ;





removeChild( sessionManager );



// affichage d'un message de sortie de salon

Alert.show( 'vous avez quitté la réunion,
recharger la page pour entrer à nouveau');

}

}

private function login ( login:String, password:String
):void

{

identificator.userName = login;

// si le mot de passe est renseigné : connexion en tant
que hôte ,

// sinon connexion en tant qu'invité

identificator.password = password ;

// lance la connexion du gestionnaire de session

sessionManager.login();



}



// deconnexion

// il semble qu'avec cette version (0.9), la plupart des
pods, une fois déconnectés, ne peuvent être
reconnectés.

private function logout():void

{

sessionManager.logout();



// close() est censé provoquer une déconnexion et
la suppression de tous les noeuds enfants, mais ne semble pas
encore marcher...

//sessionManager.close();

}



]]>

</mx:Script>













i have always , this error :





Severity and Description Path Resource Location Creation Time
Id

invalid character or markup found in script block. Try
surrounding your code with a CDATA block. essai/src essai.mxml
Unknown 1236099127468 161







Why?

lionceau,

Avatar

Former Community Member


Hi Lionceau,



Unfortunately, we don't have resources to do interactive
debugging of your compile errors in the AFCS forums. If you have
question specific to AFCS, please do continue to post, but sending
your source code over and over to this thread with compile errors
isn't an effective use of anyone's time.



For Flex compile errors, please see the Flex forums :
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=60&catid=585&entercat=y



Do continue to post AFCS questions - we appreciate your
interest!



thanks

nigel

Avatar

Level 2
hi



yes but i don't know how create a new subject



thanks,



Lionceau,

Avatar

Level 1
Hi all

I also confronted with performance issue while tried to work
with video and audio pieces simultaneously - video stops showing
anything if audio stream arrived. I solved this problem only by
using separate rooms for audio and video (one room for video and
another one - for audio).

Avatar

Level 2
hi,

My i haven't this bug .I don't understand why you have this
..





Lionceau,