topic Re: Javascript API - Show Video Feed in Popup? in ArcGIS JavaScript Maps SDK Questions

Javascript API - Show Video Feed in Popup?

chuckfrank — Thu, 05 Feb 2015 14:33:06 GMT

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

Re: Javascript API - Show Video Feed in Popup?

JakeSkinner — Thu, 05 Feb 2015 14:48:20 GMT

Hi Chuck,

Take a look at the following post:

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

Re: Javascript API - Show Video Feed in Popup?

TimWitt2 — Thu, 05 Feb 2015 14:49:05 GMT

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

Re: Javascript API - Show Video Feed in Popup?

chuckfrank — Thu, 05 Feb 2015 16:12:48 GMT

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

Re: Javascript API - Show Video Feed in Popup?

TimWitt2 — Thu, 05 Feb 2015 16:15:38 GMT

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

Re: Javascript API - Show Video Feed in Popup?

chuckfrank — Thu, 05 Feb 2015 16:22:43 GMT

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

Re: Javascript API - Show Video Feed in Popup?

chuckfrank — Thu, 05 Feb 2015 16:31:11 GMT

Trying different browsers, I'm getting this to work in Firefox but not Chrome or IE 11.

Re: Javascript API - Show Video Feed in Popup?

JakeSkinner — Sat, 11 Dec 2021 18:51:54 GMT

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>

Re: Javascript API - Show Video Feed in Popup?

chuckfrank — Thu, 05 Feb 2015 17:42:40 GMT

Thanks Jake! This is a great example to get me going towards a live stream in a popup. Thanks for your help.

Re: Javascript API - Show Video Feed in Popup?

ShitalDhakal__GISP — Thu, 03 Nov 2016 17:19:32 GMT

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.

Re: Javascript API - Show Video Feed in Popup?

RobertScheitlin__GISP — Thu, 03 Nov 2016 17:30:48 GMT

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.