xoy
/
FlaskCameraLiveStream
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #20 from flipthedog/master 

Added button to take picture + raspberry pi browser icon
This commit is contained in:
EbenKouao 2022-05-07 23:04:16 +01:00 committed by GitHub
parent 9b27f5d8b4 71e26f8b5d
commit 870fc34065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

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

1
README.md
View File

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

20
camera.py
View File

@ -2,16 +2,20 @@
#Date: 27.09.20 #Date: 27.09.20
#Desc: This scrtipt script.. #Desc: This scrtipt script..
import cv2 import cv2 as cv
from imutils.video.pivideostream import PiVideoStream from imutils.video.pivideostream import PiVideoStream
import imutils import imutils
import time import time
from datetime import datetime
import numpy as np import numpy as np
class VideoCamera(object): class VideoCamera(object):
def __init__(self, flip = False): def __init__(self, flip = False, file_type = ".jpg", photo_string= "stream_photo"):
# self.vs = PiVideoStream(resolution=(1920, 1080), framerate=30).start()
self.vs = PiVideoStream().start() self.vs = PiVideoStream().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) time.sleep(2.0)
def __del__(self): def __del__(self):
@ -24,5 +28,13 @@ class VideoCamera(object):
def get_frame(self): def get_frame(self):
frame = self.flip_if_needed(self.vs.read()) 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() 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)

13
main.py
View File

@ -3,10 +3,8 @@
#Desc: This web application serves a motion JPEG stream #Desc: This web application serves a motion JPEG stream
# main.py # main.py
# import the necessary packages # import the necessary packages
from flask import Flask, render_template, Response, request from flask import Flask, render_template, Response, request, send_from_directory
from camera import VideoCamera from camera import VideoCamera
import time
import threading
import os import os
pi_camera = VideoCamera(flip=False) # flip pi camera if upside down. pi_camera = VideoCamera(flip=False) # flip pi camera if upside down.
@ -30,9 +28,12 @@ def video_feed():
return Response(gen(pi_camera), return Response(gen(pi_camera),
mimetype='multipart/x-mixed-replace; boundary=frame') 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__': if __name__ == '__main__':
app.run(host='0.0.0.0', debug=False) app.run(host='0.0.0.0', debug=False)

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

39
templates/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
body { body {
@ -150,6 +151,14 @@ body {
</a> </a>
</div> </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> </div>
@ -158,6 +167,7 @@ body {
<script type="text/javascript"> <script type="text/javascript">
// stop stream - called when pressing red X
var button = document.getElementById('button'); var button = document.getElementById('button');
button.onclick = function() { button.onclick = function() {
@ -170,8 +180,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> </script>
</body> </body>
</html> </html>