Added functionality to take screenshots during stream

.gitignore

@@ -44,3 +44,7 @@ dev.env
 #_pycache
 __pycache__/
 
+#image_files
+*.jpg
+*.jpeg
+*.png

README.md

@@ -39,7 +39,6 @@ sudo pip3 install opencv-contrib-python
 sudo pip3 install imutils
 sudo pip3 install opencv-python
 
-
 ```
 
 Note: This installation of opencv may take a while depending on your pi model.

camera.py

@@ -2,16 +2,19 @@
 #Date: 27.09.20
 #Desc: This scrtipt script..
 
-import cv2
+import cv2 as cv
 from imutils.video.pivideostream import PiVideoStream
 import imutils
 import time
+from datetime import datetime
 import numpy as np
 
 class VideoCamera(object):
-    def __init__(self, flip = False):
+    def __init__(self, flip = False, file_type  = ".jpg", photo_string= "stream_photo"):
-        self.vs = PiVideoStream().start()
+        self.vs = PiVideoStream(resolution=(1920, 1080), framerate=30).start()
-        self.flip = flip
+        self.flip = flip # Flip frame vertically
+        self.file_type = file_type # image type i.e. .jpg
+        self.photo_string = photo_string # Name to save the photo
         time.sleep(2.0)
 
     def __del__(self):
@@ -24,5 +27,13 @@ class VideoCamera(object):
 
     def get_frame(self):
         frame = self.flip_if_needed(self.vs.read())
-        ret, jpeg = cv2.imencode('.jpg', frame)
+        ret, jpeg = cv.imencode(self.file_type, frame)
+        self.previous_frame = jpeg
         return jpeg.tobytes()
+
+    # Take a photo, called by camera button
+    def take_picture(self):
+        frame = self.flip_if_needed(self.vs.read())
+        ret, image = cv.imencode(self.file_type, frame)
+        today_date = datetime.now().strftime("%m%d%Y-%H%M%S") # get current time
+        cv.imwrite(str(self.photo_string + "_" + today_date + self.file_type), frame)

main.py

@@ -5,8 +5,6 @@
 # import the necessary packages
 from flask import Flask, render_template, Response, request
 from camera import VideoCamera
-import time
-import threading
 import os
 
 pi_camera = VideoCamera(flip=False) # flip pi camera if upside down.
@@ -30,9 +28,12 @@ def video_feed():
     return Response(gen(pi_camera),
                     mimetype='multipart/x-mixed-replace; boundary=frame')
 
+# Take a photo when pressing camera button
+@app.route('/picture')
+def take_picture():
+    pi_camera.take_picture()
+    return "None"
+
 if __name__ == '__main__':
 
     app.run(host='0.0.0.0', debug=False)
-    
-
-

templates/index.html

@@ -136,7 +136,7 @@ body {
 </div>
 
   <div class="top-right-logo">
-  	<a></a>Raspberry Pi - Camera Stream </a>
+  	<a></a>Arya Stream </a>
   </div>
 
 
@@ -150,6 +150,14 @@ body {
          </a>
     </div>
 
+    <div class="picture">
+          <a href=# id=take-picture class="picture_class">
+              <button id="take-picture-button" onclick="take_picture()">
+                  <i style="background: blue; color: white;" class="fa fa-camera fa-2x" aria-hidden="true"></i>
+              </button>
+         </a>
+    </div>
+
 </div>
 
 
@@ -158,6 +166,7 @@ body {
 
 <script type="text/javascript">
 
+// stop stream - called when pressing red X
 var button = document.getElementById('button');
 
 button.onclick = function() {
@@ -170,8 +179,35 @@ button.onclick = function() {
     }
 };
 
+// Take and save a photo, call picture function in main.py
+$(function() {
+  $('a#take-picture').on('click', function(e) {
+    e.preventDefault()
+    $.getJSON('/picture',
+        function(data) {
+      //do nothing
+    });
+    return false;
+  });
+});
+
+</script>
+
+<script type="text/javascript">
+// take picture
+var button = document.getElementById('take-pica-button');
+
+button.onclick = function() {
+    var div = document.getElementById('newpost');
+    if (div.style.display !== 'none') {
+        div.style.display = 'none';
+    }
+    else {
+        div.style.display = 'block';
+    }
+};
+
 </script>
 
 </body>
 </html>
-