mirror of
https://github.com/ae-utbm/sith3.git
synced 2024-09-19 17:38:10 +00:00
Basic webcam setup with modern web api
This commit is contained in:
Bartuccio Antoine
parent
d1f86fe3d9
commit
ef1537ac2c
@ -1,399 +0,0 @@
|
||||
// WebcamJS v1.0
|
||||
// Webcam library for capturing JPEG/PNG images in JavaScript
|
||||
// Attempts getUserMedia, falls back to Flash
|
||||
// Author: Joseph Huckaby: http://github.com/jhuckaby
|
||||
// Based on JPEGCam: http://code.google.com/p/jpegcam/
|
||||
// Copyright (c) 2012 Joseph Huckaby
|
||||
// Licensed under the MIT License
|
||||
|
||||
/* Usage:
|
||||
<div id="my_camera" style="width:320px; height:240px;"></div>
|
||||
<div id="my_result"></div>
|
||||
|
||||
<script language="JavaScript">
|
||||
Webcam.attach( '#my_camera' );
|
||||
|
||||
function take_snapshot() {
|
||||
var data_uri = Webcam.snap();
|
||||
document.getElementById('my_result').innerHTML =
|
||||
'<img src="'+data_uri+'"/>';
|
||||
}
|
||||
</script>
|
||||
|
||||
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
|
||||
*/
|
||||
|
||||
var Webcam = {
|
||||
version: '1.0.0',
|
||||
|
||||
// globals
|
||||
protocol: location.protocol.match(/https/i) ? 'https' : 'http',
|
||||
swfURL: '', // URI to webcam.swf movie (defaults to cwd)
|
||||
loaded: false, // true when webcam movie finishes loading
|
||||
live: false, // true when webcam is initialized and ready to snap
|
||||
userMedia: true, // true when getUserMedia is supported natively
|
||||
|
||||
params: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
dest_width: 0, // size of captured image
|
||||
dest_height: 0, // these default to width/height
|
||||
image_format: 'jpeg', // image format (may be jpeg or png)
|
||||
jpeg_quality: 90, // jpeg image quality from 0 (worst) to 100 (best)
|
||||
force_flash: false // force flash mode
|
||||
},
|
||||
|
||||
hooks: {
|
||||
load: null,
|
||||
live: null,
|
||||
uploadcomplete: null,
|
||||
uploadprogress: null,
|
||||
error: function(msg) { alert("Webcam.js Error: " + msg); }
|
||||
}, // callback hook functions
|
||||
|
||||
init: function() {
|
||||
// initialize, check for getUserMedia support
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
||||
|
||||
this.userMedia = this.userMedia && !!navigator.getUserMedia && !!window.URL;
|
||||
|
||||
// Older versions of firefox (< 21) apparently claim support but user media does not actually work
|
||||
if (navigator.userAgent.match(/Firefox\D+(\d+)/)) {
|
||||
if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null;
|
||||
}
|
||||
},
|
||||
|
||||
attach: function(elem) {
|
||||
// create webcam preview and attach to DOM element
|
||||
// pass in actual DOM reference, ID, or CSS selector
|
||||
if (typeof(elem) == 'string') {
|
||||
elem = document.getElementById(elem) || document.querySelector(elem);
|
||||
}
|
||||
if (!elem) {
|
||||
return this.dispatch('error', "Could not locate DOM element to attach to.");
|
||||
}
|
||||
|
||||
this.container = elem;
|
||||
if (!this.params.width) this.params.width = elem.offsetWidth;
|
||||
if (!this.params.height) this.params.height = elem.offsetHeight;
|
||||
|
||||
// set defaults for dest_width / dest_height if not set
|
||||
if (!this.params.dest_width) this.params.dest_width = this.params.width;
|
||||
if (!this.params.dest_height) this.params.dest_height = this.params.height;
|
||||
|
||||
// if force_flash is set, disable userMedia
|
||||
if (this.params.force_flash) this.userMedia = null;
|
||||
|
||||
if (this.userMedia) {
|
||||
// setup webcam video container
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute('autoplay', 'autoplay');
|
||||
video.style.width = '' + this.params.dest_width + 'px';
|
||||
video.style.height = '' + this.params.dest_height + 'px';
|
||||
|
||||
// adjust scale if dest_width or dest_height is different
|
||||
var scaleX = this.params.width / this.params.dest_width;
|
||||
var scaleY = this.params.height / this.params.dest_height;
|
||||
|
||||
if ((scaleX != 1.0) || (scaleY != 1.0)) {
|
||||
elem.style.overflow = 'visible';
|
||||
video.style.webkitTransformOrigin = '0px 0px';
|
||||
video.style.mozTransformOrigin = '0px 0px';
|
||||
video.style.msTransformOrigin = '0px 0px';
|
||||
video.style.oTransformOrigin = '0px 0px';
|
||||
video.style.transformOrigin = '0px 0px';
|
||||
video.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
|
||||
video.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
|
||||
video.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
|
||||
video.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
|
||||
video.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
|
||||
}
|
||||
|
||||
// add video element to dom
|
||||
elem.appendChild( video );
|
||||
this.video = video;
|
||||
|
||||
// create offscreen canvas element to hold pixels later on
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = this.params.dest_width;
|
||||
canvas.height = this.params.dest_height;
|
||||
var context = canvas.getContext('2d');
|
||||
this.context = context;
|
||||
this.canvas = canvas;
|
||||
|
||||
// ask user for access to their camera
|
||||
var self = this;
|
||||
navigator.getUserMedia({
|
||||
"audio": false,
|
||||
"video": true
|
||||
},
|
||||
function(stream) {
|
||||
// got access, attach stream to video
|
||||
video.src = window.URL.createObjectURL( stream ) || stream;
|
||||
Webcam.stream = stream;
|
||||
Webcam.loaded = true;
|
||||
Webcam.live = true;
|
||||
Webcam.dispatch('load');
|
||||
Webcam.dispatch('live');
|
||||
},
|
||||
function(err) {
|
||||
return self.dispatch('error', "Could not access webcam.");
|
||||
});
|
||||
}
|
||||
else {
|
||||
// flash fallback
|
||||
elem.innerHTML = this.getSWFHTML();
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
// shutdown camera, reset to potentially attach again
|
||||
if (this.userMedia) {
|
||||
try { this.stream.stop(); } catch (e) {;}
|
||||
delete this.stream;
|
||||
delete this.canvas;
|
||||
delete this.context;
|
||||
delete this.video;
|
||||
}
|
||||
|
||||
this.container.innerHTML = '';
|
||||
delete this.container;
|
||||
|
||||
this.loaded = false;
|
||||
this.live = false;
|
||||
},
|
||||
|
||||
set: function() {
|
||||
// set one or more params
|
||||
// variable argument list: 1 param = hash, 2 params = key, value
|
||||
if (arguments.length == 1) {
|
||||
for (var key in arguments[0]) {
|
||||
this.params[key] = arguments[0][key];
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.params[ arguments[0] ] = arguments[1];
|
||||
}
|
||||
},
|
||||
|
||||
on: function(name, callback) {
|
||||
// set callback hook
|
||||
// supported hooks: onLoad, onError, onLive
|
||||
name = name.replace(/^on/i, '').toLowerCase();
|
||||
|
||||
if (typeof(this.hooks[name]) == 'undefined')
|
||||
throw "Event type not supported: " + name;
|
||||
|
||||
this.hooks[name] = callback;
|
||||
},
|
||||
|
||||
dispatch: function() {
|
||||
// fire hook callback, passing optional value to it
|
||||
var name = arguments[0].replace(/^on/i, '').toLowerCase();
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
|
||||
if (this.hooks[name]) {
|
||||
if (typeof(this.hooks[name]) == 'function') {
|
||||
// callback is function reference, call directly
|
||||
this.hooks[name].apply(this, args);
|
||||
}
|
||||
else if (typeof(this.hooks[name]) == 'array') {
|
||||
// callback is PHP-style object instance method
|
||||
this.hooks[name][0][this.hooks[name][1]].apply(this.hooks[name][0], args);
|
||||
}
|
||||
else if (window[this.hooks[name]]) {
|
||||
// callback is global function name
|
||||
window[ this.hooks[name] ].apply(window, args);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false; // no hook defined
|
||||
},
|
||||
|
||||
setSWFLocation: function(url) {
|
||||
// set location of SWF movie (defaults to webcam.swf in cwd)
|
||||
this.swfURL = url;
|
||||
},
|
||||
|
||||
getSWFHTML: function() {
|
||||
// Return HTML for embedding flash based webcam capture movie
|
||||
var html = '';
|
||||
|
||||
// make sure we aren't running locally (flash doesn't work)
|
||||
if (location.protocol.match(/file/)) {
|
||||
return '<h1 style="color:red">Sorry, the Webcam.js Flash fallback does not work from local disk. Please upload it to a web server first.</h1>';
|
||||
}
|
||||
|
||||
// set default swfURL if not explicitly set
|
||||
if (!this.swfURL) {
|
||||
// find our script tag, and use that base URL
|
||||
var base_url = '';
|
||||
var scpts = document.getElementsByTagName('script');
|
||||
for (var idx = 0, len = scpts.length; idx < len; idx++) {
|
||||
var src = scpts[idx].getAttribute('src');
|
||||
if (src && src.match(/\/webcam(\.min)?\.js/)) {
|
||||
base_url = src.replace(/\/webcam(\.min)?\.js.*$/, '');
|
||||
idx = len;
|
||||
}
|
||||
}
|
||||
if (base_url) this.swfURL = base_url + '/webcam.swf';
|
||||
else this.swfURL = 'webcam.swf';
|
||||
}
|
||||
|
||||
// if this is the user's first visit, set flashvar so flash privacy settings panel is shown first
|
||||
if (window.localStorage && !localStorage.getItem('visited')) {
|
||||
this.params.new_user = 1;
|
||||
localStorage.setItem('visited', 1);
|
||||
}
|
||||
|
||||
// construct flashvars string
|
||||
var flashvars = '';
|
||||
for (var key in this.params) {
|
||||
if (flashvars) flashvars += '&';
|
||||
flashvars += key + '=' + escape(this.params[key]);
|
||||
}
|
||||
|
||||
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+this.params.width+'" height="'+this.params.height+'" id="webcam_movie_obj" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swfURL+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><embed id="webcam_movie_embed" src="'+this.swfURL+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+this.params.width+'" height="'+this.params.height+'" name="webcam_movie_embed" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'"></embed></object>';
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
getMovie: function() {
|
||||
// get reference to movie object/embed in DOM
|
||||
if (!this.loaded) return this.dispatch('error', "Flash Movie is not loaded yet");
|
||||
var movie = document.getElementById('webcam_movie_obj');
|
||||
if (!movie || !movie._snap) movie = document.getElementById('webcam_movie_embed');
|
||||
if (!movie) this.dispatch('error', "Cannot locate Flash movie in DOM");
|
||||
return movie;
|
||||
},
|
||||
|
||||
snap: function() {
|
||||
// take snapshot and return image data uri
|
||||
if (!this.loaded) return this.dispatch('error', "Webcam is not loaded yet");
|
||||
if (!this.live) return this.dispatch('error', "Webcam is not live yet");
|
||||
|
||||
if (this.userMedia) {
|
||||
// native implementation
|
||||
this.context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height);
|
||||
return this.canvas.toDataURL('image/' + this.params.image_format, this.params.jpeg_quality / 100 );
|
||||
}
|
||||
else {
|
||||
// flash fallback
|
||||
var raw_data = this.getMovie()._snap();
|
||||
return 'data:image/'+this.params.image_format+';base64,' + raw_data;
|
||||
}
|
||||
},
|
||||
|
||||
configure: function(panel) {
|
||||
// open flash configuration panel -- specify tab name:
|
||||
// "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
|
||||
if (!panel) panel = "camera";
|
||||
this.getMovie()._configure(panel);
|
||||
},
|
||||
|
||||
flashNotify: function(type, msg) {
|
||||
// receive notification from flash about event
|
||||
switch (type) {
|
||||
case 'flashLoadComplete':
|
||||
// movie loaded successfully
|
||||
this.loaded = true;
|
||||
this.dispatch('load');
|
||||
break;
|
||||
|
||||
case 'cameraLive':
|
||||
// camera is live and ready to snap
|
||||
this.live = true;
|
||||
this.dispatch('live');
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
// Flash error
|
||||
this.dispatch('error', msg);
|
||||
break;
|
||||
|
||||
default:
|
||||
// catch-all event, just in case
|
||||
// console.log("webcam flash_notify: " + type + ": " + msg);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
b64ToUint6: function(nChr) {
|
||||
// convert base64 encoded character to 6-bit integer
|
||||
// from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
|
||||
return nChr > 64 && nChr < 91 ? nChr - 65
|
||||
: nChr > 96 && nChr < 123 ? nChr - 71
|
||||
: nChr > 47 && nChr < 58 ? nChr + 4
|
||||
: nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
|
||||
},
|
||||
|
||||
base64DecToArr: function(sBase64, nBlocksSize) {
|
||||
// convert base64 encoded string to Uintarray
|
||||
// from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
|
||||
var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
|
||||
nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2,
|
||||
taBytes = new Uint8Array(nOutLen);
|
||||
|
||||
for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
|
||||
nMod4 = nInIdx & 3;
|
||||
nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
|
||||
if (nMod4 === 3 || nInLen - nInIdx === 1) {
|
||||
for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
|
||||
taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
|
||||
}
|
||||
nUint24 = 0;
|
||||
}
|
||||
}
|
||||
return taBytes;
|
||||
},
|
||||
|
||||
upload: function(image_data_uri, target_url, callback, form_elem_name='webcam', csrf=null) {
|
||||
// submit image data to server using binary AJAX
|
||||
if (callback) Webcam.on('uploadComplete', callback);
|
||||
|
||||
// detect image format from within image_data_uri
|
||||
var image_fmt = '';
|
||||
if (image_data_uri.match(/^data\:image\/(\w+)/))
|
||||
image_fmt = RegExp.$1;
|
||||
else
|
||||
throw "Cannot locate image format in Data URI";
|
||||
|
||||
// extract raw base64 data from Data URI
|
||||
var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
|
||||
|
||||
// contruct use AJAX object
|
||||
var http = new XMLHttpRequest();
|
||||
http.open("POST", target_url, true);
|
||||
|
||||
// setup progress events
|
||||
if (http.upload && http.upload.addEventListener) {
|
||||
http.upload.addEventListener( 'progress', function(e) {
|
||||
if (e.lengthComputable) {
|
||||
var progress = e.loaded / e.total;
|
||||
Webcam.dispatch('uploadProgress', progress, e);
|
||||
}
|
||||
}, false );
|
||||
}
|
||||
|
||||
// completion handler
|
||||
http.onload = function() {
|
||||
Webcam.dispatch('uploadComplete', http.status, http.responseText, http.statusText);
|
||||
};
|
||||
|
||||
// create a blob and decode our base64 to binary
|
||||
var blob = new Blob( [ this.base64DecToArr(raw_image_data) ], {type: 'image/'+image_fmt} );
|
||||
|
||||
// stuff into a form, so servers can easily receive it as a standard file upload
|
||||
var form = new FormData();
|
||||
if (csrf)
|
||||
form.append(csrf.name, csrf.value);
|
||||
form.append( form_elem_name, blob, form_elem_name+"."+image_fmt.replace(/e/, '') );
|
||||
|
||||
// send data to server
|
||||
http.send(form);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Webcam.init();
|
||||
@ -17,21 +17,38 @@
|
||||
|
||||
{# User Pictures #}
|
||||
<div class="profile-pictures">
|
||||
<div class="profile-picture">
|
||||
<div class="profile-picture" x-data="camera">
|
||||
<div class="profile-picture-display">
|
||||
|
||||
{%- if form.instance.profile_pict -%}
|
||||
<img src="{{ form.instance.profile_pict.get_download_url() }}"
|
||||
alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}" />
|
||||
{%- else -%}
|
||||
<img src="{{ static('core/img/unknown.jpg') }}" alt="{%- trans -%}Profile{%- endtrans -%}"
|
||||
title="{%- trans -%}Profile{%- endtrans -%}" />
|
||||
{%- endif -%}
|
||||
<img
|
||||
x-show="!is_camera_enabled"
|
||||
:src="get_profile_picture()"
|
||||
alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}"
|
||||
/>
|
||||
<video
|
||||
x-show="is_camera_enabled"
|
||||
x-ref="video"
|
||||
></video>
|
||||
<button
|
||||
x-show="can_edit_picture && !is_camera_enabled"
|
||||
class="btn btn-blue"
|
||||
@click.prevent="enable_camera()"
|
||||
>
|
||||
<i class="fa fa-camera"></i>
|
||||
{% trans %}Enable camera{% endtrans %}
|
||||
</button>
|
||||
<button
|
||||
x-show="is_camera_enabled"
|
||||
class="btn btn-blue"
|
||||
@click.prevent="take_picture()"
|
||||
>
|
||||
<i class="fa fa-camera"></i>
|
||||
{% trans %}Take a picture{% endtrans %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="profile-picture-edit">
|
||||
{%- if form["profile_pict"] -%}
|
||||
<p>{{ form["profile_pict"].label }}</p>
|
||||
{{ form["profile_pict"] }}
|
||||
<div x-ref="form" class="profile-picture-edit">
|
||||
{%- if form.profile_pict -%}
|
||||
<p>{{ form.profile_pict.label }}</p>
|
||||
{{ form.profile_pict }}
|
||||
{%- else -%}
|
||||
<em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
|
||||
{%- endif -%}
|
||||
@ -53,8 +70,8 @@
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="profile-picture-edit">
|
||||
<p>{{ form["avatar_pict"].label }}</p>
|
||||
{{ form["avatar_pict"] }}
|
||||
<p>{{ form.avatar_pict.label }}</p>
|
||||
{{ form.avatar_pict }}
|
||||
{%- if user.is_board_member and form.instance.avatar_pict.id -%}
|
||||
<a href="{{ url('core:file_delete', file_id=form.instance.avatar_pict.id, popup='') }}">
|
||||
{%- trans -%}Delete{%- endtrans -%}
|
||||
@ -73,8 +90,8 @@
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="profile-picture-edit">
|
||||
<p>{{ form["scrub_pict"].label }}</p>
|
||||
{{ form["scrub_pict"] }}
|
||||
<p>{{ form.scrub_pict.label }}</p>
|
||||
{{ form.scrub_pict }}
|
||||
{%- if user.is_board_member and form.instance.scrub_pict.id -%}
|
||||
<a href="{{ url('core:file_delete', file_id=form.instance.scrub_pict.id, popup='') }}">
|
||||
{%- trans -%}Delete{%-endtrans -%}
|
||||
@ -108,7 +125,7 @@
|
||||
|
||||
{# Textareas #}
|
||||
<div class="profile-fields">
|
||||
{%- for field in [form["quote"], form["forum_signature"]] -%}
|
||||
{%- for field in [form.quote, form.forum_signature] -%}
|
||||
<div class="profile-field">
|
||||
<div class="profile-field-label">{{ field.label }}</div>
|
||||
<div class="profile-field-content">
|
||||
@ -123,8 +140,8 @@
|
||||
|
||||
{# Checkboxes #}
|
||||
<div class="profile-visible">
|
||||
{{ form["is_subscriber_viewable"] }}
|
||||
{{ form["is_subscriber_viewable"].label }}
|
||||
{{ form.is_subscriber_viewable }}
|
||||
{{ form.is_subscriber_viewable.label }}
|
||||
</div>
|
||||
|
||||
{%- if form.instance == user -%}
|
||||
@ -152,38 +169,91 @@
|
||||
{%- endif -%}
|
||||
</p>
|
||||
|
||||
<script>
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("camera", () => ({
|
||||
can_edit_picture: false,
|
||||
|
||||
width: 320,
|
||||
height: 240,
|
||||
|
||||
is_camera_enabled: false,
|
||||
picture: null,
|
||||
video: null,
|
||||
picture_form: null,
|
||||
|
||||
init() {
|
||||
this.video = this.$refs.video;
|
||||
this.picture_form = this.$refs.form.getElementsByTagName("input");
|
||||
if (this.picture_form.length > 0){
|
||||
this.picture_form = this.picture_form[0];
|
||||
this.can_edit_picture = true;
|
||||
}
|
||||
},
|
||||
|
||||
get_profile_picture() {
|
||||
if (this.picture != null) {
|
||||
return this.picture;
|
||||
}
|
||||
|
||||
{%- if form.instance.profile_pict -%}
|
||||
return "{{ form.instance.profile_pict.get_download_url() }}"
|
||||
{%- else -%}
|
||||
return "{{ static('core/img/unknown.jpg') }}"
|
||||
{%- endif -%}
|
||||
},
|
||||
|
||||
enable_camera() {
|
||||
this.picture = null;
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true, audio: false })
|
||||
.then((stream) => {
|
||||
this.is_camera_enabled = true;
|
||||
this.video.width = this.width;
|
||||
this.video.height = this.height;
|
||||
this.video.srcObject = stream;
|
||||
this.video.play();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`An error occurred: ${err}`);
|
||||
});
|
||||
},
|
||||
|
||||
take_picture() {
|
||||
let canvas = document.createElement("canvas")
|
||||
const context = canvas.getContext("2d");
|
||||
this.video.pause()
|
||||
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height;
|
||||
context.drawImage(this.video, 0, 0, this.width, this.height);
|
||||
this.picture = canvas.toDataURL("image/png");
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
let file = new File(
|
||||
[blob],
|
||||
"{% trans %}captured{% endtrans %}.png",
|
||||
{ type: "image/jpeg" },
|
||||
);
|
||||
|
||||
let list = new DataTransfer();
|
||||
list.items.add(file);
|
||||
this.picture_form.files = list.files;
|
||||
|
||||
}, "image/jpeg");
|
||||
|
||||
|
||||
canvas.remove();
|
||||
this.is_camera_enabled = false;
|
||||
},
|
||||
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
{%- endblock -%}
|
||||
|
||||
{%- block script -%}
|
||||
{{ super() }}
|
||||
{%- if not form.instance.profile_pict -%}
|
||||
<script src="{{ static('core/js/webcam.js') }}"></script>
|
||||
<script>
|
||||
Webcam.on('error', function (msg) { console.log('Webcam.js error: ' + msg) })
|
||||
Webcam.set({
|
||||
width: 320,
|
||||
height: 240,
|
||||
dest_width: 320,
|
||||
dest_height: 240,
|
||||
image_format: 'jpeg',
|
||||
jpeg_quality: 90,
|
||||
force_flash: false
|
||||
});
|
||||
Webcam.attach('#camera_canvas');
|
||||
function take_snapshot() {
|
||||
const data_uri = Webcam.snap();
|
||||
const url = "{{ url('core:user_profile_upload', user_id=form.instance.id) }}";
|
||||
Webcam.upload(data_uri, url, function (code, text) {
|
||||
if (code === 302 || code === 200) {
|
||||
$('#new_profile').attr('src', data_uri);
|
||||
$('#take_picture').remove();
|
||||
$('#id_profile_pict').remove();
|
||||
} else {
|
||||
console.log("Unknown error: ");
|
||||
console.log(text);
|
||||
}
|
||||
}, "new_profile_pict", { name: 'csrfmiddlewaretoken', value: '{{ csrf_token }}' });
|
||||
}
|
||||
</script>
|
||||
{%- endif -%}
|
||||
{%- endblock -%}
|
||||
{%- if not form.instance.profile_pict -%}
|
||||
{%- block script -%}
|
||||
{%- endblock -%}
|
||||
{%- endif -%}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user