Extended readme

README.md

@@ -10,29 +10,61 @@ To keep the bucket usage limited to a small amount of data, segments before a ce
 
 # Configuration
 
+This guide describes how to build the following setup based on Cloudflare's storage and CDN:
+
+![](docs/setup.drawio.png)
+
+# Prerequisites
+
+What you need:
+* A Cloudflare Account
+* A Domain Name that you can use with CloudFlare (change the nameservers).
+* A Host with Docker can be localhost or external
+
 ## Cloudflare Setup 
 
 This configuration assumes that Cloudflare is used as an storage and CDN provider. Generally 
 any S3 compatible hosting service can be used.
 
-1. First set up a Cloudflare Bucket, e.g. `streams`
-2. Make the bucket publicly accessible, by connecting a domain name
+1. Create a new website for your domain. The setup of the Domain is not part of this guide. Alternatively you can also register a domain with Cloudflare. Your own domain is
+not absolutely necessary but it enabled you to use the CDN.
+
+    ![](docs/website.png)
+
+2. Then set up a Cloudflare Bucket, e.g. `stream`
+
+    ![](docs/bucket.png)
+
+3. Make the bucket publicly accessible, by connecting a domain name, e.g. connect `stream.mydomain.com`. They contents
+of the bucket will then be available under this domain name.
 
     ![](docs/public.png)
 
-3. When you have connected a domain name (and the proxy setting is selected in CloudFlare) the access is automatically cached by the CDN.
+4. When you have connected a domain name and the proxy setting is selected in CloudFlare all read access is automatically cached by the CDN.
 
-4. Set the CORS settings of the bucket to allow any client, i.e. host `*`
+5. To be able to include the contents in the streaming website, e.g. `zap.stream`, set the CORS settings of the bucket to allow any website to use your stream, i.e. host `*`
 
     ![](docs/cors.png)
 
-5. Configure cache rules, to allow / prevent caching
+6. Configure cache rules, to allow / prevent caching
+
+    We need to tell Cloudflare how our content should be cached. 
 
     ![](docs/cache1.png)
+
+    The playlist file `.m3u8` is constantly updated that is why we have to disable caching in the CDN **and** in the Browser.
+
     ![](docs/cache2.png)
+
+    The video files `*.ts` can be cached, e.g. for 2 hours. Usually only a few minutes would be needed.
+
     ![](docs/cache3.png)
 
-6. Create an API key for with read/write access to your buckets.
+7. Create an API key for with **Edit** (read/write) access to your buckets under "Manage API Tokens" and "Create API Token". Note down it's ID and secret.
+
+    ![](docs/r2token.png)
+
+Now the Cloudflare setup is finished and we can continue to setting up the docker container that transfers the stream data to the bucket.
 
 ## Environment
 

docs/setup.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-07-07T22:07:16.173Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.3.0 Chrome/104.0.5112.114 Electron/20.1.3 Safari/537.36" etag="0c1s4yGP-lnRvC8uBEkT" version="20.3.0" type="device"><diagram id="AyLf_R-D394qqAjLlRm3" name="Seite-1">5VnbbuM2EP0aA20BG7rbfvQlaR+y3WCNYJOnBS1RMhtKdClqbefrO5Qo60I5djd2LrsI4JAjDkWemTMzpHr2LN7+ydF69YkFmPYsI9j27HnPskbuCH6lYFcIPMcrBBEnQSEyK8GCPGElNJQ0IwFOGwMFY1SQdVPosyTBvmjIEOds0xwWMtp86xpFWBMsfER16VcSiJXaljWs5H9hEq3KN5veuHgSo3Kw2km6QgHb1ET2Vc+eccZE0Yq3M0wldiUuhd71gaf7hXGciFMU7j5vJt+i+7V5+4h2sXgaBpNJ31Tm+Y5opnasVit2JQScZUmA5SxGz55uVkTgxRr58ukGbA6ylYgp9ExohiwRM0YZz3XtkSH/QK5eg7nA24MbMPewgDthFmPBdzBEKXgKSOVJI9Xd1MxSDlnVTOIMlRApV4j2M1doQUMB9n/AMzTwZpRlwTWFPT0Do3kcRgkUAS+cUBIlIBNsfR4QHaOJoj3UYdzL6jCa7qVg9DQU58x/xBxkM/AmRBLZ9igsZLqUrUjkWBQS6XA5/0uf8/7NWDGg9L6aqND9zWcZxAHL4FkCvyzJLcUxikkSQft2JqVyAXgrME8QpbvfyxfCHot3luv4EHY2rRPtvI9X56eLZudFjrm0bgtDiJVr2cxiOvGFNOweqRu0xPSWpUQQJhFbMiFYfBDKGtYsExR8abbPFGeKS2Yb6o7IZHcg7V0KaD2mcxEDGBM5rXUd5Ozqr1gqdFqxDqo1tCkDjAvdltFwAJlTdRkXKxYxYM5VJZ02M0k15oZJW+VG+gcLsVNlAMoEa5oQLMJ390o/7zzIzsAtu/Nt/eF817CyXODzNob9sIz7+BlwVX4UiEdYPDPOftZn+sbAchte4yhv4JgiQb43F9rlImruW0byAFgOYWGYYqH50H4JP+5W1gH+VjGz7Tifp4uXhceQUFqrJgIXjwIH5BCs2SOu1xnW0va8M/HZbfF5rPN5H05fhdBDDfkNXjL22EHf5NuKpm9BzTNSzD6RYs4xipmONW6Y0nr3JLN1kn05L4nCMLR8v4tEgbf03DORyLHfG4nGGrJ3a8qQLANZqDMptjPIo8Y1Acy1hyiRan8MRKqGpIcL1EoyxxQLLN+XF59hofeWWbRKnA+NvHnxLOqcSHH3GMVd07UajtZ//4nU0Twx5Wk/tfuZcsizsh17B9g+HC+Ncx3NrffGdlfD+IvsTzOoffXS9SUIYxPKkmEXwmNvaKMzxdM2wo7pvjHCpl4PfvC6wywvGH8wKp0ccV6Gu36Ons3/hhyD5CltmizTdWf2KS44BvEuYDEiycCHU/PH40G7rujkgfuqPNBLtqsk6N+lP9u9hmO+8b1Gaepf7s7BPLVcMg9Y9JUik17YTOUXmK7rWzyIBjD0Ca0HRWA6aywKEB6FnVWP54/wMrzMRcE7yMn6XfoCwow8ZhgsoXLtaAnxAv7D1oyYJFlxIAmlEgkw61ny7huo/2kqschv4Q8YqAxmPuLBcQshFb4oDvNsVNDNkkxJQYkk0U3+ZO681ZF11P400hHvxh3WNC93Y65f/OgRMAkm8jsn9BKWyIgXoHS1503NAs1IeOhD3T7cmc1wZx2Ld3hLxH2t/VBrVyqyIzWGZe8WcwJoYX6BsOm9rJ6r2b2ronBfeNAs3a5d2Y9a7lTsU2lVHqVNNBw2J3LHrYkKHLSJjh9roVt9py6GVx/77av/AA==</diagram></mxfile>