Add meta address support for specifying the hostname of an IP camera …

…URL (#471) (#478)

* Update Space component

* Map meta address to hostname for an IP camera URL (#471)

* Update resource strings

src/app/components/Space/Space.jsx

@@ -1,35 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Space = ({ componentClass: Component, width, ...props }) => {
+const Space = ({ tag: Component, width, height, ...props }) => {
     if ((typeof width === 'string') && width.match(/^\d+$/)) {
         width += 'px';
     }
+    if ((typeof height === 'string') && height.match(/^\d+$/)) {
+        height += 'px';
+    }
 
     props.style = {
         display: 'inline-block',
-        width: width,
-        ...props.style
+        ...props.style,
     };
+
+    if (width !== undefined) {
+        props.style.width = width;
+    }
+
+    if (height !== undefined) {
+        props.style.height = height;
+    }
+
     return (
         <Component {...props} />
     );
 };
 
 Space.propTypes = {
-    componentClass: PropTypes.oneOfType([
+    tag: PropTypes.oneOfType([
         PropTypes.node,
         PropTypes.string
     ]),
     width: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string
-    ])
+    ]),
+    height: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 };
 
 Space.defaultProps = {
-    componentClass: 'span',
-    width: 0
+    tag: 'div',
+    width: 0,
+    height: 0,
 };
 
 export default Space;

src/app/i18n/cs/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Nastavení Webkamery",
     "Media Source": "",
     "Use a built-in camera or a connected webcam": "",
-    "Use a M-JPEG stream over HTTP": "",
     "Webcam is off": "Webkamera je vypnuta",
     "Rotate Left": "",
     "Rotate Right": "",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Zakázáno</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/de/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Webcam-Einstellungen",
     "Media Source": "Medien-Quelle",
     "Use a built-in camera or a connected webcam": "Benutze die eingebaut oder verbundene Webcam",
-    "Use a M-JPEG stream over HTTP": "Benutze einen M-JPEG Stream über HTTP",
     "Webcam is off": "Webcam ist aus",
     "Rotate Left": "Linksherum drehen",
     "Rotate Right": "Rechtsherum drehen",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Deaktiviert</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/en/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Webcam Settings",
     "Media Source": "Media Source",
     "Use a built-in camera or a connected webcam": "Use a built-in camera or a connected webcam",
-    "Use a M-JPEG stream over HTTP": "Use a M-JPEG stream over HTTP",
     "Webcam is off": "Webcam is off",
     "Rotate Left": "Rotate Left",
     "Rotate Right": "Rotate Right",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Disabled</1>",
     "Hide Cutting Tool": "Hide Cutting Tool",
     "Show Cutting Tool": "Show Cutting Tool",
-    "Ready to start": "Ready to start"
+    "Ready to start": "Ready to start",
+    "Connect to an IP camera": "Connect to an IP camera",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream."
 }

src/app/i18n/es/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Configuración de la camara web",
     "Media Source": "",
     "Use a built-in camera or a connected webcam": "Usar camara interna o una camara conectada",
-    "Use a M-JPEG stream over HTTP": "Usar M-JPEG para transmitir por HTTP",
     "Webcam is off": "La camara web esta apagada",
     "Rotate Left": "Rotar Izquierda",
     "Rotate Right": "Rotar Derecha",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Desactivada</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/fr/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Paramètres de la webcam",
     "Media Source": "",
     "Use a built-in camera or a connected webcam": "",
-    "Use a M-JPEG stream over HTTP": "",
     "Webcam is off": "La webam est éteinte",
     "Rotate Left": "",
     "Rotate Right": "",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Désactivé</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/hu/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Webkamera Beállítása",
     "Media Source": "Media Source",
     "Use a built-in camera or a connected webcam": "Beépített Kamera vagy Csatlakoztatott Kamera",
-    "Use a M-JPEG stream over HTTP": "Használj M-JPEG stream egy HTTP címen",
     "Webcam is off": "Webkamera Ki Van Kapcsolva",
     "Rotate Left": "Forgatás balra",
     "Rotate Right": "Forgatás jobbra",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Tiltva</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/it/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Impostazioni Webcam",
     "Media Source": "",
     "Use a built-in camera or a connected webcam": "",
-    "Use a M-JPEG stream over HTTP": "",
     "Webcam is off": "Telecamera spenta",
     "Rotate Left": "",
     "Rotate Right": "",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Disattivato</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/ja/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "ウェブカメラの設定",
     "Media Source": "映像ソース",
     "Use a built-in camera or a connected webcam": "組み込まれたカメラモジュールか直接接続されたウェブカメラを使う",
-    "Use a M-JPEG stream over HTTP": "M-JPEG stream over HTTPを使う",
     "Webcam is off": "ウェブカメラはオフ",
     "Rotate Left": "左に回転",
     "Rotate Right": "右に回転",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>無効</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/nl/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Webcam Instellingen",
     "Media Source": "Media Bron",
     "Use a built-in camera or a connected webcam": "Gebruik een ingebouwde camera of een verbonden webcam",
-    "Use a M-JPEG stream over HTTP": "Gebruik een M-JPEG stroom boven een HTTP",
     "Webcam is off": "Webcam is uit",
     "Rotate Left": "Roteer Links",
     "Rotate Right": "Roteer Rechts",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Uitzetten</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/pt-br/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Configurações da Webcam",
     "Media Source": "Fonte da Midia",
     "Use a built-in camera or a connected webcam": "Use uma câmera embutida ou uma webcam conectada",
-    "Use a M-JPEG stream over HTTP": "Use um fluxo M-JPEG sobre HTTP",
     "Webcam is off": "Webcam desligada",
     "Rotate Left": "Virar à esquerda",
     "Rotate Right": "Virar à direita",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Desativado</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/ru/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Настройки камеры",
     "Media Source": "",
     "Use a built-in camera or a connected webcam": "",
-    "Use a M-JPEG stream over HTTP": "",
     "Webcam is off": "Камера выключена",
     "Rotate Left": "",
     "Rotate Right": "",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Отключено</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/tr/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "Web Kamera Ayarları",
     "Media Source": "Medya Kaynağı",
     "Use a built-in camera or a connected webcam": "Yerleşik bir kamera veya bağlı bir web kamerası kullanın",
-    "Use a M-JPEG stream over HTTP": "HTTP üzerinden bir M-JPEG akışı kullanın",
     "Webcam is off": "Web kamerası kapalı",
     "Rotate Left": "Sola dön",
     "Rotate Right": "Sağa Dön",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>Engelle</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/zh-cn/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "网络摄像机设置",
     "Media Source": "媒体源",
     "Use a built-in camera or a connected webcam": "使用计算机自带摄像头或外借摄像头",
-    "Use a M-JPEG stream over HTTP": "使用基于HTTP的M-JPEG流",
     "Webcam is off": "网络摄像机未开启",
     "Rotate Left": "左转90度",
     "Rotate Right": "右转90度",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>已关闭</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/i18n/zh-tw/resource.json

@@ -484,7 +484,6 @@
     "Webcam Settings": "網路攝影機設定",
     "Media Source": "媒體來源",
     "Use a built-in camera or a connected webcam": "使用內置相機或連接的網路攝影機",
-    "Use a M-JPEG stream over HTTP": "使用 M-JPEG 影像串流",
     "Webcam is off": "網路攝影機未開啟",
     "Rotate Left": "向左旋轉",
     "Rotate Right": "向右旋轉",
@@ -529,5 +528,7 @@
     "WebGL: <1>Disabled</1>": "WebGL: <1>已停用</1>",
     "Hide Cutting Tool": "",
     "Show Cutting Tool": "",
-    "Ready to start": ""
+    "Ready to start": "",
+    "Connect to an IP camera": "",
+    "The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.": ""
 }

src/app/widgets/Webcam/Settings.jsx

@@ -2,6 +2,8 @@ import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import Select from 'react-select';
+import styled from 'styled-components';
+import Margin from 'app/components/Margin';
 import Modal from 'app/components/Modal';
 import i18n from 'app/lib/i18n';
 import log from 'app/lib/log';
@@ -10,6 +12,11 @@ import {
     MEDIA_SOURCE_MJPEG
 } from './constants';
 
+const MutedText = styled.div`
+    display: inline-block;
+    color: #767676;
+`;
+
 class Settings extends PureComponent {
     static propTypes = {
         mediaSource: PropTypes.string,
@@ -139,18 +146,23 @@ class Settings extends PureComponent {
                                         this.setState({ mediaSource: MEDIA_SOURCE_MJPEG });
                                     }}
                                 />
-                                {i18n._('Use a M-JPEG stream over HTTP')}
+                                {i18n._('Connect to an IP camera')}
                             </label>
                         </div>
                         <div style={{ marginLeft: 20 }}>
                             <input
                                 type="url"
                                 className="form-control"
                                 disabled={mediaSource !== MEDIA_SOURCE_MJPEG}
-                                placeholder="http://raspberrypi:8080/?action=stream"
+                                placeholder="http://0.0.0.0:8080/?action=stream"
                                 defaultValue={url}
                                 onChange={this.handleChangeURL}
                             />
+                            <Margin top={4}>
+                                <MutedText style={{ marginTop: 4 }}>
+                                    {i18n._('The URL must be for a Motion JPEG (mjpeg) HTTP or RTSP stream.')}
+                                </MutedText>
+                            </Margin>
                         </div>
                     </div>
                 </Modal.Body>

src/app/widgets/Webcam/Webcam.jsx

@@ -16,6 +16,22 @@ import {
     MEDIA_SOURCE_MJPEG
 } from './constants';
 
+// | Before                | After                   |
+// |-----------------------|-------------------------|
+// | http://0.0.0.0:8000/  | http://localhost:8000/  |
+// | https://0.0.0.0:8000/ | https://localhost:8000/ |
+// | //0.0.0.0:8000/       | //localhost:8000/       |
+// |-----------------------|-------------------------|
+const mapMetaAddressToHostname = (url) => {
+    const hostname = window.location.hostname;
+
+    return String(url).trim().replace(/((?:https?:)?\/\/)?(0.0.0.0)/i, (match, p1, p2, offset, string) => {
+        // p1 = 'http://'
+        // p2 = '0.0.0.0'
+        return [p1, hostname].join('');
+    });
+};
+
 class Webcam extends PureComponent {
     static propTypes = {
         state: PropTypes.object,
@@ -32,7 +48,7 @@ class Webcam extends PureComponent {
             el.src = '';
 
             setTimeout(() => {
-                el.src = state.url;
+                el.src = mapMetaAddressToHostname(state.url);
             }, 10); // delay 10ms
         }
     }
@@ -86,7 +102,7 @@ class Webcam extends PureComponent {
                     ref={node => {
                         this.imageSource = node;
                     }}
-                    src={url}
+                    src={mapMetaAddressToHostname(url)}
                     style={{
                         width: (100 * scale).toFixed(0) + '%',
                         transform: transformStyle