nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to display an iFrame in an InfoWindow?

JasonCantrell

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?

Vind meer berichten getagd met

Accepted answers

kenbuja

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.

CodyPatterson_0-1722427081970.png

VideoPopup.zip

All comments

AntGiles

Have you looked at this widget for inspiration:

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

Regards

Anthony

kenbuja

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;
        }

JasonCantrell

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.

kenbuja

CodyPatterson_0-1722427081970.png

VideoPopup.zip

JasonCantrell

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!

JasonCantrell

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.