there is a problem about html5 webcam
this is the error i have
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at photo.js:17
photo.js :17
video.src=vendorUrl.createObjectURL(stream);
please check my code
thank you so much!
takeing_photo.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="{% static 'css/photo.css' %}" rel="stylesheet">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
Take photo
<canvas id="canvas" width="400" height="300"></canvas>
<img id="photo" src="http://placekitten.com/g/400/300" alt="photo of you">
</div>
<script src="{% static 'js/photo.js' %}"></script>
</body>
</html>
photo.js
(function(){
var video = document.getElementById('video'),
photo = document.getElementById('photo'),
context = canvas.getContext('2d'),
phto = document.getElementById('photo');
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video:true,
audio:false
}, function(stream){
video.src=vendorUrl.createObjectURL(stream);
video.play();
}, function(error){
});
document.getElementById('capture').addEventListener('click', function(){
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('image/png'))
});
})();
photo.css
.booth{
width:400px;
background-color: #ccc;
border:10px solid #ddd;
margin:0 auto;
}
.booth-capture-button {
display:block;
margin:10px 0;
padding:10px 20px;
background-color: cornflowerblue;
color: #fff;
text-align: center;
text-decoration: none;
}
#canvas {
display :none;
}
i just want to make webcam properly
and i m wondering there is a way to save the pics into the folder when i put the button "take of you"
please give me advice. thank you so much.
This error is caused because the function createObjectURL is deprecated. You need to update your code to set srcObject to the video object directly.
video.srcObject=stream;
Related
I'm trying to pass a variable from flask to my html code. I'm adding it as a url for a button, so a user can follow it. My problem is that the buttons don't work an when inspecting the website I see that the variables have had " added to them. Removing this makes the buttons work.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing buttons">
<meta name="keywords" content="Test">
<style>
h1 {
font-family: Arial, sans-serif;
color: #2f2d2d;
text-align: Center;
}
p {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: Center;
color: #2f2d2d;
}
</style>
</head>
<body>
<h1>Results</h1>
<p>Click the buttons below to go to your results: </p>
<button onclick={{ value1 }}>
Yandex.com
</body>
</html>
Value1 in my python code:
input1 = (str(""""window.location.href='""")
+ str(img_search_url) + str('''';"'''))
return render_template('results.html', value1=input1)
For testing purposes let img_search_url = https://yandex.com/images/search?cbir_id=1865182%2F7z8tGw017Oxvkl-ZRGX7jA6207&rpt=imageview&lr=123432
Thanks
You need to use the |safe filter as mentioned on other SO answers.
<button onclick={{ value1|safe }}>
This ensures that the auto unescaping is turned off. If you do it on untrusted data, it can easily lead to XSS vulnerabilities though.
I am building a toggle button and i am using some CSS but when i try to run code then one CSS command is not working. When i remove {% extends 'base.html' %} then it works perfectly but after adding it doesn't load a function.
toggle.html
{% extends 'mains/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
#media screen and (max-width: 700px) {
body {
padding: 170px 0 0 0;
width: 100%
}
}
a {
color: inherit;
}
.menu-item,
.menu-open-button {
background: #EEEEEE;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -35px;
margin-top: 230px;
position: absolute;
color: #FFFFFF;
text-align: center;
line-height: 3em;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
</style>
base.html
{% load static %}
Other links.......
.......
......
{% block content %}
{% endblock %}
line-height: 100px; is not working after adding extends base.html, which is necessary.
I have searched everywhere, and I have also tried by deleting every element on base.html, then I notice that after deleting every single link it is working.
Any help would be much appreciated. Thank you in advance.
There is an CSS that override your CSS, make sure that link to your CSS is the last in base.htnl.
In your ‘base.html’ add a block called ‘head’ between ‘’ and ‘< /head> and your style tag to it.
CSS can be only applied in HEAD not in body like JS
I added this in base.html :-
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
AND It Worked
I have tried using #fontface css style, but the font doesn't get rendered.
Is there another way of doing this using python/flask??
<!DOCTYPE html>
<html>
<style type="text/css">
#font-face {
font-family: trial;
src: url_for('CENTRALESANSCND-BOLD.otf') ;
font-weight:bold; }
</style>
<body>
<p style="font-family:trial; font-weight: bold"> Hello </p>
</body>
</html>
The above is my HTML template.
Unfortunately, when I render it using Flask, it doesn't reflect the font.
The following is my .py code:
from flask import Flask, render_template
app=Flask(__name__)
app.secret_key='1234'
#app.route('/', methods=['post', 'get'])
def output():
c=2+3
print c
return render_template('f.html', c=c)
if __name__=='__main__':
app.run(port=9876)
Thanks a lot for all your help.. A combination of all the suggestions finally worked.
Posting the solution here:
CSS file:
#font-face{
font-family: trial;
src: url('CENTRALESANSCND-BOLD.otf');
font-weight: bold;}
body {font-family: georgia; color:green}
h1 {font-family:trial; color: pink}
HTML file:
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='mystyle.css')}}"/>
<body>
<p > Hello... </p>
<h1> welcome </h1>
</body>
</html>
url_for takes a function name, and you need to wrap it in double curly brackets... try:
<style type="text/css">
#font-face {
font-family: trial;
src: {{ url_for('static', filename='CENTRALESANSCND-BOLD.otf') }};
font-weight:bold; }
</style>
<style>
#font-face {
font-family: FontName;
src: url("{{ url_for('static', filename='FontFile.otf') }}");
}
</style>
i need to know how to redirect the user in Django views to a certain page after he logs in.
let's say we have 3 types of users and 3 types of pages, i want each type to be directed to a certain page, and in the same time doesn't has the permission to view the other pages.
You can do something like this:
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.contrib.auth.decorators import login_required
#login_required
def home(request):
return HttpResponseRedirect(
reverse(custom_view,
args=[request.user.username]))
Here, custom_view should be your user specific view. This is assuming you have:
LOGIN_REDIRECT_URL = '/profiles/home'
and you have configured a urlpattern:
(r'^profiles/home', 'myapp.views.home')
You can add a check for account type and redirect to the correct view.
I wrote some similar functionality recently by sub-classing the LoginView provided by django.contrib.auth. Okay, make your first page from the root directory, call it login:
python manage.py startapp login. Make this file exist <projectRoot>/login/templates/registration/login.html Add this code inside said file, it's more or less cut and pasted from bootstrap's login form, but with some standard django template language to bind to the expected AuthenticationForm fields.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin to yourWebsite.com</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body class="text-center">
<form class="form-signin" method="post" action="{% url 'login' %}?next=clockin">
{% csrf_token %}
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<!--input id="inputEmail" class="form-control" placeholder="Email address" required="True" autofocus="" type="email"-->
{{form.username}}
<label for="id_password" class="sr-only">Password</label>
{{form.password}}
<!--input id="inputPassword" class="form-control" placeholder="Password" required="True" type="password"-->
<div class="checkbox mb-3">
<label>
<input value="remember-me" type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
</body>
</html>
<script>
$("#id_password").attr({
"class":"form-control",
"placeholder":"Password",
"required":"True",
"type":"password",
});
$("#id_username").attr({"class":"form-control",
"placeholder":"Email address",
"required":"True",
"type":"email",
});
</script>
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
Next, subclass the built in view and override the redirect part. Inside login.views.py, add this:
from django.contrib.auth.views import LoginView
class CustomLoginview(LoginView):
def get_redirect_url(self):
if self.request.user.groups.filter(name="customer").exists():
return 'invoice'
return super().get_redirect_url()
Finally, update urls.py:
from login.views import CustomLoginview
urlpatterns = [
path('', CustomLoginview.as_view(), name='login'),
I'm telling the login page to go to my next app 'invoice' if the user is a customer, otherwise it goes to the default that I specified in the settings file. Obviously you could expound upon the concept for 3 types of users, which is different than routing based on the names of users, not sure how that got 2 upvotes.
I am attempting to set up django view for my web application which redirects the page once a file upload is complete, and the status bar showing the upload progress reaches 100%. I have looked around online and attempted to do this in several ways but nothing seems to be working. When I use
render(request, 'template_name')
The application simply returns the plain text of 'template_name' to the console rather than rendering it in the browser window. The original page of the loading bar stays in place after this plain text is returned.
My view looks like the following
def barUpdate(request):
importid = request.GET.get('impid')
response_data = {}
import_status_dict = get_import_status(importid)
status_id = import_status_dict['returnval']
import_status_info = import_status_dict['data_row']
import_status_info = import_status_info[0]
total_rows = import_status_info['total_data_rows']
rows_analyzed = import_status_info['number_of_rows_analyised']
if status_id != 2:
if (rows_analyzed != None and total_rows != None):
percent_complete = int((float(rows_analyzed)/total_rows)*100)
response_data['value'] = percent_complete
if 'percent_complete' in locals():
if response_data['value'] >= 100:
#return render(request,'statustool/completed.html',{'importid':importid,'username':username,'failedparameters':new_failed_param_group,'failedsources':failed_sources,'failedparametergroups':failed_parameters_group,'failedsitegroups':failed_sites_group,'sources':get_sources(), 'failedunits':failed_units})
#Right here I would like to render a new template in my browser, although this is just a dummy template I created for testing
return render(request,'statustool/test.html')
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
else:
response_data['value'] = 0
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
My dummy template is the following which contains no variables to be passed in from the view
<html>
<head>
test
</head>
<body>
<h1>Finished with data insert!</h1>
</body>
</html>
Is there something I am missing?
If it helps, the current page with the status bar looks like the following and uses a javascript function called status to make GET requests every second to find the upload status for the status bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CACW: Status - Processing</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/boostrap-responsive.css" rel="stylsheet">
<style>
body,html{
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.container{
min-height:100%;
}
.footer{
height:40px;
margin-top:-25px;
}
.barcontainer{
width: 100px;
color: blue;
}
progress {
background-color: whiteSmoke;
border-radius: 2px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
position: relative;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/d3examples.js"></script>
<script type="text/javascript">
var importNum = {{importid}}
function status(){
var barProgress = window.setInterval("getProgress(importNum);", 1000);
}
var url=api_server_address+"import/status/update/";
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data){
$('#progressBar').val(data['value']);
console.log(data);
});
}
</script>
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">CACW</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Wiki</li>
<li>Contact</li>
</ul>
<a class="btn btn-primary pull-right" href="/logout">Logout</a>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<body onload="status({{importid}});">
<div class="container">
<div class="page-header">
<p><h2>Import {{ importid }} Status.</h2></p>
{{percent_complete}}
<progress id="progressBar" value={{status}} max="100"></progress>
</div>
</div>
<div class="footer">
<div class="navbar-fixed-bottom">
<hr>
<div class = "container" style="text-align: center">
<p> Help - Information - Contact - Wiki <p>
<img src="{{ STATIC_URL }}img/luc_logo.jpg"></img>
</div>
</div>
</div>
</body>
</html>
Since you are just getting the data in an AJAX call, this will never update your page (from the server side). What you can do is add a flag/object/parameter to your servers response to indicate when the upload is done, then on the client side, redirect to that location when the upload is finished.
Server side:
# code shortened a bit... continues from after line defining percent complete
response_data['value'] = percent_complete if 'percent_complete' in locals() else 0
response_data['done'] = response_data['value'] >= 100
return HttpResponse(json.dumps(response_data), content_type="application/json")
Client Side:
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data) {
if(data['done']) {
// I forget if this is how to do a redirect but it's where you put it
location.href('whatever/your/url/is');
} else {
$('#progressBar').val(data['value']);
console.log(data);
}
});
}