Задача: Пользователь дает доступ камере, далее сайт его фотографирует и сохраняет фотографию на диск.
вот как это выглядит
после нажатия submit появляется ошибка
Environment:
Request Method: POST
Request URL: https://127.0.0.1:8000/camera/
Django Version: 4.2.2
Python Version: 3.9.11
Installed Applications:
['sslserver',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'account.apps.AccountConfig']
Installed Middleware:
['django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware']
Traceback (most recent call last):
File "C:\django-sites\photo-regisration-ai\venv\lib\site-packages\django\core\handlers\exception.py", line 55, in inner
response = get_response(request)
File "C:\django-sites\photo-regisration-ai\venv\lib\site-packages\django\core\handlers\base.py", line 197, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\django-sites\photo-regisration-ai\ai_registration\account\views.py", line 56, in camera
image.write(urlopen(image_path).read())
File "C:\Users\Константин\AppData\Local\Programs\Python\Python39\lib\urllib\request.py", line 214, in urlopen
return opener.open(url, data, timeout)
File "C:\Users\Константин\AppData\Local\Programs\Python\Python39\lib\urllib\request.py", line 501, in open
req = Request(fullurl, data)
File "C:\Users\Константин\AppData\Local\Programs\Python\Python39\lib\urllib\request.py", line 320, in __init__
self.full_url = url
File "C:\Users\Константин\AppData\Local\Programs\Python\Python39\lib\urllib\request.py", line 346, in full_url
self._parse()
File "C:\Users\Константин\AppData\Local\Programs\Python\Python39\lib\urllib\request.py", line 375, in _parse
raise ValueError("unknown url type: %r" % self.full_url)
Exception Type: ValueError at /camera/
Exception Value: unknown url type: ''
Exception Value: unknown url type: '' - пустая строка, изображения нет, я уже все проверил и не знаю как это решить
views
def camera(request):
if request.method == 'POST':
image_path = request.POST.get("src")
image = NamedTemporaryFile()
image.write(urlopen(image_path).read())
image.flush()
image = File(image)
name = str(image.name).split('\\')[-1]
name += '.jpg' # store image in jpeg format
image.name = name
with open('image.txt', 'w+') as file:
file.write(str(name))
default_storage.save('C:/media/a.jpg', ContentFile(urlopen(image_path).read()))
return HttpResponse('Done!')
return render(request, 'account/test_camera.html')
html
<!doctype html>
<html>
{% block content %}
{% load static %}
<head>
<title>Camera</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module" src="{% static 'js/index.js' %}"></script>
</head>
<body>
<div class="contentarea">
<div class="Input">
<form method="POST" name="inputForm" enctype='multipart/form-data'>
{% csrf_token %}
<div id="camera" class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton" type="button">Take photo</button>
<input id="webimg" value="" name="src" type="text" style="display: none;">
<canvas id="canvas">
</canvas>
</div>
<br>
<div>
<img id="photo" alt="your image">
</div>
<br>
<button type="submit" class="button" id="submit">Submit</button>
</form>
</div>
</div>
</body>
<style>
#video {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width: 320px;
height: 240px;
}
#photo {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width: 320px;
height: 240px;
}
#canvas {
display: none;
}
.camera {
width: 340px;
display: inline-block;
}
.output {
width: 340px;
display: inline-block;
vertical-align: top;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 32px;
background-color: rgba(0, 150, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 14px;
font-family: "Lucida Grande", "Arial", sans-serif;
color: rgba(255, 255, 255, 1);
}
.contentarea {
font-size: 16px;
font-family: "Lucida Grande", "Arial", sans-serif;
width: 760px;
}
</style>
{% endblock %}
</html>
js
(() => {
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.
const width = 320; // We will scale the photo width to this
let height = 0; // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
let streaming = false;
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
let video = null;
let canvas = null;
let photo = null;
let startbutton = null;
function showViewLiveResultButton() {
if (window.self !== window.top) {
// Ensure that if our document is in a frame, we get the user
// to first open it in its own tab or window. Otherwise, it
// won't be able to request permission for camera access.
document.querySelector(".contentarea").remove();
const button = document.createElement("button");
button.textContent = "View live result of the example code above";
document.body.append(button);
button.addEventListener("click", () => window.open(location.href));
return true;
}
return false;
}
function startup() {
if (showViewLiveResultButton()) {
return;
}
video = document.getElementById("video");
canvas = document.getElementById("canvas");
photo = document.getElementById("photo");
startbutton = document.getElementById("startbutton");
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
});
video.addEventListener(
"canplay",
(ev) => {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute("width", width);
video.setAttribute("height", height);
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
streaming = true;
}
},
false
);
startbutton.addEventListener(
"click",
(ev) => {
takepicture();
ev.preventDefault();
},
false
);
clearphoto();
}
// Fill the photo with an indication that none has been
// captured.
function clearphoto() {
const context = canvas.getContext("2d");
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL("image/png");
photo.setAttribute("src", data);
}
// Capture a photo by fetching the current contents of the video
// and drawing it into a canvas, then converting that to a PNG
// format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply
// other changes before drawing it.
function takepicture() {
const context = canvas.getContext("2d");
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
const data = canvas.toDataURL("image/png");
photo.setAttribute("src", data);
} else {
clearphoto();
}
}
// Set up our event listener to run the startup process
// once loading is complete.
window.addEventListener("load", startup, false);
})();
