1 Reply Latest reply on Sep 28, 2010 7:04 AM by DenisKokorin

    How to place some DisplayObject over OSMF VideoElement?

    DenisKokorin

      I have successfully built an live stream application. It shows video from IP-camera via media server.

      Now I need to handle user actions like click and area selection.

      The problem is I can't draw area selection borders over VideoElement.displayObject. It is Video, so graphics lays lower than video.

       

      I decided to make some MediaElement that has DisplayObjectTrait like this:

      public class DisplayObjectElement extends MediaElement
      {
           private var sprite: Sprite;
               
           public function DisplayObjectElement(sp:Sprite)
           {
                super();
                sprite = sp;
           }
           override protected function setupTraits():void{
                addTrait(MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait(sprite));
                super.setupTraits();
           }
      }

       

      and use DisplayObjectElement and VideoElement as children of ParallelElement:

       

      container = new MediaContainer();

      addChild(container);


      videoElement = new VideoElement();

       

      //some graphics to test
      selectionObject = new Sprite();
      selectionObject.graphics.beginFill(0xff0000,1 );
      selectionObject.graphics.drawCircle( 0, 0, 8 );
      selectionObject.graphics.endFill();

      selectionElement = new DisplayObjectElement(selectionObject);

       

      var parElement:ParallelElement = new ParallelElement();
      parElement.addChild(videoElement);
      parElement.addChild(selectionElement);

       

      container.addMediaElement(parElement);

       

      mediaPlayer = new MediaPlayer();
      mediaPlayer.media = parElement;
      videoElement.resource = new URLResource("url to camera stream");

       

      But selectionObject wasn't added to display list. Even when video is shown selectionObject.parent is null.

       

      So I want to lay this selectionObject over VideoElement (with the same size and coordinates) and handle user actions and draw area selection borders on it.

       

      I found simular solution here http://blog.six4rty.ch/2010/06/15/osmf-interactivespriteelement/ but it doesn't work for me.

      I'm using OSMF 1.5.

       

      How can I add my own control (Sprite or DisplayObject) over Video using OSMF framework?

        • 1. Re: How to place some DisplayObject over OSMF VideoElement?
          DenisKokorin Level 1

          I subclassed MediaElement without knowing of it's lifecycle:

          MediaElement constructor calls setupTraits. And in DisplayObjectElement I call super() and then set up sprite = sp.

          So when setupTraits() is called sprite == null.

           

          Working DisplayObjectElement class looks like this:

          public class DisplayObjectElement extends MediaElement
          {
               public function DisplayObjectElement(sp:Sprite)
               {
                    super();
                    addTrait( MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait(sp) );
               }
          }