update plugin readme with picture and various configuration and testi…

…ng options

.gitignore

@@ -37,3 +37,4 @@ ci/
 .idea
 
 .eslintcache
+.secrets

src/README.md

@@ -1,50 +1,148 @@
-<!-- This README file is going to be the one displayed on the Grafana.com website for your plugin. Uncomment and replace the content here before publishing.
-
-Remove any remaining comments before publishing as these may be displayed on Grafana.com -->
-
 # Hls-Video
 
-<!-- To help maximize the impact of your README and improve usability for users, we propose the following loose structure:
-
-**BEFORE YOU BEGIN**
-- Ensure all links are absolute URLs so that they will work when the README is displayed within Grafana and Grafana.com
-- Be inspired ✨
-  - [grafana-polystat-panel](https://github.com/grafana/grafana-polystat-panel)
-  - [volkovlabs-variable-panel](https://github.com/volkovlabs/volkovlabs-variable-panel)
+stream m3u8 to your dashboard:
 
-**ADD SOME BADGES**
+![example](./img/example.png)
 
-Badges convey useful information at a glance for users whether in the Catalog or viewing the source code. You can use the generator on [Shields.io](https://shields.io/badges/dynamic-json-badge) together with the Grafana.com API
-to create dynamic badges that update automatically when you publish a new version to the marketplace.
-
-- For the URL parameter use `https://grafana.com/api/plugins/your-plugin-id`.
-- Example queries:
-  - Downloads: `$.downloads`
-  - Catalog Version: `$.version`
-  - Grafana Dependency: `$.grafanaDependency`
-  - Signature Type: `$.versionSignatureType`
-- Optionally, for the logo parameter use `grafana`.
+## Overview / Introduction
 
-Full example: ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?logo=grafana&query=$.version&url=https://grafana.com/api/plugins/grafana-polystat-panel&label=Marketplace&prefix=v&color=F47A20)
+This plugins wraps the html [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element and uses [HLS.js](https://github.com/video-dev/hls.js/) for initialization.
 
-Consider other [badges](https://shields.io/badges) as you feel appropriate for your project.
+It exposes various video element configuration parameters:
 
-## Overview / Introduction
-Provide one or more paragraphs as an introduction to your plugin to help users understand why they should use it.
+* src
+* autoplay
+* controls / controlslist
+* crossorigin
+* disablepictureinpicture
+* disableremoteplayback
+* loop
+* muted
+* playsinline
+* poster
+* preload
 
-Consider including screenshots:
-- in [plugin.json](https://grafana.com/developers/plugin-tools/reference/plugin-json#info) include them as relative links.
-- in the README ensure they are absolute URLs.
+It also exposes the `style` parameter override if you need to customize the width/height of the video element.
+The default behvaior is 100% width and 100% height which should always show the entire video and avoid any scroll boxes.
 
 ## Requirements
-List any requirements or dependencies they may need to run the plugin.
+
+* none, hls.js is bundled with the plugin and not loaded via CDN
 
 ## Getting Started
-Provide a quick start on how to configure and use the plugin.
+
+1. configure panel with "HLS Video"
+2. add m3u8 data source
+3. configure panel (likely with `controls` and `autoplay`)
 
 ## Documentation
-If your project has dedicated documentation available for users, provide links here. For help in following Grafana's style recommendations for technical documentation, refer to our [Writer's Toolkit](https://grafana.com/docs/writers-toolkit/).
 
-## Contributing
-Do you want folks to contribute to the plugin or provide feedback through specific means? If so, tell them how!
--->
+Here are is a docker compose config I am using to host my USB camera running on a raspberry pi:
+
+```yml
+services:
+  server:
+    build: ./nginx
+    ports:
+    - 8080:8080
+    volumes:
+    - hls:/hls
+
+  ffmpeg_2:
+    image: linuxserver/ffmpeg:version-7.1-cli
+    restart: always
+    devices:
+      - /dev/video2:/dev/video2   # this is your USB camera device
+    volumes:
+      - hls:/hls
+    command: >
+      -f v4l2 -i /dev/video2
+      -c:v libx264 -preset veryfast -tune zerolatency
+      -f hls -hls_time 10 -hls_list_size 8640 -hls_start_number_source epoch -hls_flags delete_segments+round_durations+temp_file
+      /hls/stream.m3u8
+volumes:
+  hls:
+```
+
+### nginx build config
+
+<details>
+
+and the following `nginx.conf`
+
+```
+worker_processes 1;
+
+events {
+    worker_connections 64;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    server {
+        listen 8080;
+        root  /usr/share/nginx/html;
+
+        location /hls {
+            alias /hls/;
+            types {
+                application/vnd.apple.mpegURL m3u8;
+                video/MP2T ts;
+            }
+            add_header 'Cache-Control' 'no-cache';
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'Range';
+        }
+
+        location / {
+            try_files $uri $uri/ =404;
+            add_header 'Cache-Control' 'no-cache';
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'Range';
+        }
+    }
+}
+```
+
+index.html (useful to test hls.js outside of the plugin)
+```
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HLS Stream</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+</head>
+
+<body>
+    <video id="video" controls autoplay style="width: 100%;"></video>
+    <script>
+        const video = document.getElementById('video');
+        if (Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource('http://localhost:8080/hls/stream.m3u8');
+            hls.attachMedia(video);
+        } else if (video.canPlayType('application/vnd.apple.mpegURL')) {
+            video.src = 'http://localhost:8080/hls/stream.m3u8';
+        } else {
+            console.error('Your browser does not support HLS.');
+        }
+    </script>
+</body>
+
+</html>
+```
+
+dockerfile:
+```
+FROM nginx:1.27.3
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY index.html /usr/share/nginx/html
+```
+
+</details>