topic Re: How to display an iFrame in an InfoWindow? in ArcGIS API for Flex Questions

How to display an iFrame in an InfoWindow?

JasonCantrell — Wed, 06 Feb 2013 19:56:06 GMT

I currently have a map point being displayed through a feature layer. This point marks the location of a webcam. I want to be able to display the streaming video from this webcam (via the Flex iFrame) in an InfoWindow when I click on the original webcam mappoint.

I'm having a hard time figuring this out. There seem to be two ways to define an InfoWindow (as either an InfoWindow or an InfoSymbol), plus various other ways to define the way data is going to be displayed within that InfoWindow (InfoRenderer, InfoWindowRenderer, InfoWindowContent, etc.). Can anyone suggest the best way to do this, or point me to a helpful example?

Re: How to display an iFrame in an InfoWindow?

AnthonyGiles — Wed, 06 Feb 2013 21:52:59 GMT

Have you looked at this widget for inspiration:

http://www.arcgis.com/home/item.html?id=d533bad75bac41e6904b4ddbc6b22cd2

Regards

Anthony

Re: How to display an iFrame in an InfoWindow?

KenBuja — Sun, 12 Dec 2021 00:06:36 GMT

For one of my applications (written in Flex 3.6), I have created an MXML component (called VideoPopup) that contains a VideoDisplay. In the map's mapClick event, I run an IdentifyTask, and in the onResult function, I look for the type of feature that was returned. Take a look at the Identify Sample as an example.

I set the map.infoWindow.content to this VideoPopup. To see this in action, go to this site, click the Data button, check the "Show site locations" box, and click on the various points. Some of these dive sites have photos, while others have videos.


    function onResult(results:Array, clickGraphic:Graphic = null):void
    {
        if (results && results.length > 0)
        {
            var result:IdentifyResult = results[0];
            var resultGraphic:Graphic = result.feature;
            var mapPoint:MapPoint = MapPoint(clickGraphic.geometry);
            var point:Point = mainMap.toScreen(mapPoint);
            
            mainMap.infoWindow.hide();
            
            switch (resultGraphic.geometry.type)
            {
                case Geometry.MAPPOINT:
                {
                    mainMap.infoWindow.content = createVideoWindow(resultGraphic, xmlProjectParameters, divephotourl, divevideourl, site_id, videoname, photocount);
                    mainMap.infoWindow.label = "Site ID: " + resultGraphic.attributes[site_id];
                    resultGraphic.symbol = new SimpleMarkerSymbol("x",12,0xFF0080);
                    break;
                }
            }
            layerGraphics.graphicProvider = resultGraphic;
            mainMap.infoWindow.show(mainMap.toMap(point));
        }
    }




        public static function createVideoWindow(graphic:Graphic, xmlProjectParameters:XMLList, photoURL:String, videoURL:String, siteID:String, videoName:String, photoCount:String):VideoPopup
        {
            var popVideo:VideoPopup = new VideoPopup();
            
            popVideo.TitleText = graphic.attributes[siteID];
            popVideo.VideoName = graphic.attributes[videoName];
            popVideo.attributeText = returnAttributes(graphic, xmlProjectParameters, 0); //a function to get all the attributes
            popVideo.imageCount = graphic.attributes[photoCount];
            popVideo.photoURL = photoURL;
            popVideo.videoURL = videoURL;
            
            return popVideo;
        }

Re: How to display an iFrame in an InfoWindow?

JasonCantrell — Thu, 07 Feb 2013 14:22:46 GMT

Thanks for the helpful replys!

Anthony - I have looked at that widget. I was originally planning on using that widget, but I realized that it requires the use of the Flex Viewer. I'm trying to add this functionality to a pre-existing application that does not use the Flex Viewer. But I have been looking through the code and trying some things out. Nothing that's worked so far though.

Ken - I like your site and the video popup you're using is similar to what I'm trying to do. I'll try out something similar and let you know how it works out.

Re: How to display an iFrame in an InfoWindow?

KenBuja — Thu, 07 Feb 2013 14:39:22 GMT

Sure. I've written with separate tabs for the photo and video parts, hiding them if there isn't any photos or the video doesn't exist.

The code is too long to put in this message, so I've attached it (and another AS file that it uses) as a zip file.

Re: How to display an iFrame in an InfoWindow?

JasonCantrell — Thu, 07 Feb 2013 18:10:05 GMT

Thanks a lot, Ken! I think I'm going to use a similar approach with the VideoDisplay class. We're currently trying to get our RTMP stream to work with that class. Thanks for helpful info!

Re: How to display an iFrame in an InfoWindow?

JasonCantrell — Sun, 12 Dec 2021 00:06:39 GMT

I finally got this working. It turns out that the InfoWindow cannot display anything but text from a Flex iFrame. I ended up using the Flex VideoPlayer component to play my rtmp stream. I then defined that as the infoWindowContent for my map. Here's the sample code in case anyone else runs into this issue:

<esri:Map id="myMap" load="loadHandler()">
      <esri:infoWindowContent>
 <s:VideoPlayer width="480" height="360">
  <s:DynamicStreamingVideoSource host="rtmp://111.111.11.111/live/" streamType="live">
   <s:DynamicStreamingVideoItem streamName="yourStreamName" />
  </s:DynamicStreamingVideoSource>
 </s:VideoPlayer>
       </esri:infoWindowContent>
</esri:Map>