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

Javascript API - Show Video Feed in Popup?

chuckfrank

Hi All,

Is it possible to show a live streaming video feed in a map popup using the javascript api? I thought there used to be an example, but maybe that was for the flex api. Anyhow, I'd like to be able to click on a map point and bring up a live video stream that is coming from a camera at the location. If this isn't possible, are there alternatives to using a popup?

Thanks,

Chuck

Find more posts tagged with

Accepted answers

jskinner

Here is a quick example of embedding a video within a Popup.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <!--<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">-->
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, PopupTemplate,
        dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        });  
        
        var template  = new PopupTemplate();
        template.setTitle("<b>City</b>");
        template.setContent(getContent); //this will call the getContent function where you can custom build your fields and add video
    
        function getContent(graphic){
          var Content = "<b>City Name:  </b>" + graphic.attributes.areaname + "<br> <b>Population:  </b>" + graphic.attributes.pop2000 + "<br>"; 
          var Hyperlink = '<video width="250" height="250" controls><source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4></video> ';
      
          return Content + Hyperlink;
        }   
        
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: template,
            outFields: ["*"]
        });  
        
        map.addLayer(featureLayer);  
        
                      

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

All comments

RobertScheitlin__GISP

Shital,

You may want to notice that this thread is in the JS API space not the WAB space so the code Jake provided is for a vanilla JS API app.

ShitalDhakal__GISP

Hi, I am just getting into scripting in Webapp builder. I am wondering where would I place the above scripting file? Or what file are you editing above?

Thanks in advance.

chuckfrank

Hi Tim,

I must have something set up wrong. I downloaded the sample and have the "myModule" folder at the same level as index.html. When I view the source it appears to be looking in the right place. Do I need to change any code?

Thanks,
Chuck

TimWitt2

chuck,

this sample is using a module, which you are missing.

See this part of the code:

var dojoConfig = {
        parseOnLoad:true,
        packages: [{
          "name": "myModules",
          "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules"
        }]
      };

Tim

chuckfrank

Hi Jake,

I'm downloading this sample but haven't been able to get it to run. Do you know if there is a problem with it?

Custom info window | ArcGIS API for JavaScript

Thanks,

Chuck

TimWitt2

Chuck,

An alternative would be to have the video show in panel to the side of your map? Depending on which feature the user clicks the panel will populate with a different live feed?

Or check this out, doable with map tour story map: The Mackall Road Driving Tour

Tim

jskinner

Hi Chuck,

Take a look at the following post:

Adding video to ArcGIS API for JavaScript popup template? - Geographic Information Systems Stack Exchange

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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