reformat & improve design

README.md

@@ -130,25 +130,28 @@ ffmpeg -re -i example.mp4 -c copy -f flv rtmp://localhost/live/stream
 
 ```bash=
 ffmpeg \
+    -framerate 5 \
+    -video_size 960x720 \
     -i /dev/video0 \
     -vcodec libx264 \
     -preset veryfast \
-    -f flv rtmp://localhost/live/stream
+    -b 8M \
+    -vf "drawtext=fontfile=/usr/share/fonts/dejavu/DejaVuSans-Bold.ttf: \
+    text='%{localtime\:%T}': [email protected]: x=7: y=700" \
+    -f flv rtmp://localhost/live/stream;
 ```
 
 **Use USB Camera on macOS**
 
 ```bash=
 ffmpeg \
     -f avfoundation \
-    -framerate 30 \
-    -re -i 0 \
-    -r 5 \
+    -framerate 5 \
+    -i 0 \
     -vcodec libx264 \
-    -preset ultrafast \
-    -acodec aac \
-    -ac 0 \
-    -g 25 \
+    -preset veryfast \
+    -vf "drawtext=fontfile=/usr/share/fonts/dejavu/DejaVuSans-Bold.ttf: \
+    text='%{localtime\:%T}': [email protected]: x=7: y=700" \
     -f flv rtmp://localhost/live/stream
 ```
 

app.js

@@ -15,21 +15,24 @@ const config = {
 };
 
 new MediaServer(process.env.LIVE_PRIVATE_KEY).run();
-(async () => {
+
+const deamon = async (command) => {
   // eslint-disable-next-line no-constant-condition
   while (true) {
-    // eslint-disable-next-line no-await-in-loop
     try {
       // eslint-disable-next-line no-await-in-loop
-      await exec(
-        'ffmpeg -i /dev/video0 -vcodec libx264 -preset veryfast -f flv rtmp://localhost/live/stream',
-      );
+      await exec(command);
     } catch (e) {
       console.error(e);
-      break;
     }
   }
-})();
+};
+
+deamon(
+  // eslint-disable-next-line no-useless-escape
+  'ffmpeg -framerate 5 -video_size 960x720 -i /dev/video0 -vcodec libx264 -preset veryfast -b 8M -vf "drawtext=fontfile=/usr/share/fonts/dejavu/DejaVuSans-Bold.ttf: text="%{localtime:%T}": [email protected]: x=7: y=700" -f flv rtmp://localhost/live/stream',
+);
+deamon('ffmpeg -y -i rtmp://localhost/live/stream -r 0.1 -f image2 -updatefirst 1 capture.jpg');
 
 ngrok
   .run(process.env.NGROK_TOKEN)

views/flv.html

@@ -8,14 +8,16 @@
     <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
     <marquee>このページのUIを担当してくれるデザイナー募集中</marquee>
     <div>
-      <button id="reload">
-        動画が固まったままのときはこのボタンを押してください
-      </button>
       <button onclick="location.href='./logout'">
         Logout
       </button>
     </div>
     <video id="videoElement"></video>
+    <div>
+      <button id="reload">
+        動画が固まったままのときはこのボタンを押してください
+      </button>
+    </div>
     <script>
       const button = document.getElementById("reload");
       const videoElement = document.getElementById("videoElement");