5 Replies Latest reply on Mar 18, 2010 10:14 AM by triornis

    HTML/Javascript positioning air.Video object

    triornis

      Hi all,

       

      Simple question which has been doing my head in all weekend!

       

      I have got a simple application that programmatically creates an Air Video object and attaches it to a camera as per

       

              this.video = new air.Video( 320, 240 );
              this.video.attachCamera( air.Camera.getCamera() );

       

      I then want to embed that Video object into a specific location on the page (in the DOM). If I use the stage and addChild it just plonks it over the top of anything that's there already. Doing getElementById('container').innerHTML = this.video or similar does not work.

       

      I very much think I am missing something fundamental here but no amount of googling seems to be able to find similar examples to what I am trying to do. All the examples I can find use statically defined HTML<object> tags with fixed urls.

       

      Any suggestions would be much appreciated.

       

      Phil

        • 1. Re: HTML/Javascript positioning air.Video object
          triornis Level 1

          Ping. Anyone have any suggestions for this or anywhere else to look?

           

          Thanks

          • 2. Re: HTML/Javascript positioning air.Video object
            Joe ... Ward Level 4

            The easiest way would be to compile a video player that attaches itself to the camera as a separate SWF and load that using the HTML object tag. Your other option would be to move the video on the stage as your HTML content moves around.

             

            I don't think that the way you are trying to do it can work.

            • 3. Re: HTML/Javascript positioning air.Video object
              triornis Level 1

              Thanks for your reply, I have tried your suggestion with mixed results which I will come onto shortly. One thing it did not occur to me to mention originally, as my query was just related to positionig of the object, was that the camera is set for publishing a stream on a Flash Media Server which seems to be complicating things a bit.

               

              I created a swf with camera access and the streaming functionality however when it is loaded into the page of the Air app it does not have permissions to both access the local resources and network. I am not a Flash expert and was hoping to do this purely in html and javascript in AIR so I may be doing something wrong.

               

              Any further pointers would be helpful, either on positioning the Video object in AIR (as that all works but is outside of the document flow) or loading a SWF into the page in a way that allows both local camera and remote network access. Currently I am just embedding the <object> code into the body of my main page for testing purposes.

               

              Thanks in advance.

              • 4. Re: HTML/Javascript positioning air.Video object
                Joe ... Ward Level 4

                Check the Security.sandboxType value in the embedded SWF. It should be "localTrusted", in which case you should be able to access both local and remote resources.

                 

                There is a bug in AIR in resolving relative file paths in this scenario, that you might be running into. What happens is that Flash Player asks its container to resolve a relative file path. Normally, the container is a browser and returns the resolved path using a common URL scheme that Flash Player understands. However, AIR regards the SWF as being in the application sandbox and returns the resolved path with the app: URL scheme. Flash Player (which is acting just like the plug-in even in an AIR app), doesn't understand the app: scheme, so it doesn't know how to find the file. A workaround is to use absolute paths, which would probably require your JavaScript code to pass the absolute base path to the video player.

                 

                As to positioning the Video player, this would require creating a div (or other page element) of the same size as the video and tracking the position of this element on the page. Whenever the position changes, you move the video on the stage (by resetting the video x and y properties). I don't know how much lag in positioning you would run into when the user scrolls the page, especially if the video was playing...

                 

                A third option, of course, is to rethink the UI so that you have separate display areas for the HTML and the video.

                • 5. Re: HTML/Javascript positioning air.Video object
                  triornis Level 1

                  Hi,

                  Forgot to reply at the timebut I went for creating a shadow div and listening for positioning events which then update the video object.It seems to work just fine so thanks for the tip.

                  Regards