Recording Audio on the browser - django

I have basic website I developed in Django and SQL lite.
I want to add this feature to it.
A user should be able to click a button and record a message that is no longer than 10 seconds and save it.
It can be saved on server as an audio file or can be saved on the database if that is more efficient and possible.
Can you please let me know if Django already has any component or plugin or something that I can use?
If it doesn't exist, what are my best options. If I need to write from the scratch, can you point me to any tutorials/blogs, etc?
Thanks for your time
RM

As far as I know there's no such plugin for django. But it's not mainly django's work to do this. You can record audio via javascript using Web Audio API, or by using one of several projects (see this answer). Also if you have to support older browsers I think that your best bet is to use flash for this purpose (but some mobile browsers don't support it). So the best thing is to use some sort of fallback mode with html5&javascript implementation for browsers that support Audio API and use flash for others.

Related

Django WebRTC TURN/STUN/ICE Server

So I have a basic question about WebRTC with Python Django.
Maybe I start at the beginning:
So is it possible that Python Django can serve as a Server for WebRTC? I think in generell it shouldn't be that hard, because how I saw the WebRTC client only needs a Websocket connection. I hope anybody can help me with that. Btw. I use Django Channels, so I think it is possible to build this connection, but how? :)
I would guess they're not recommending it above because it gets complicated very quickly implementing WebRTC video calls on your own with cross-browser support (Safari, especially). Using existing video APIs that have done that work for you can be a great option for a lot of companies to avoid all the edge cases that affect video quality. Daily, Agora, Twilio are all video API options that can handle this work for you.
It's not impossible but I do not recommend!
Instead, there are some WebRTC media servers like Jitsi, AntMedia and Janus. I used the last one on one of our project with Django.
Checkout microservices achitecture and find a way to combine your project with Django (for Authentication, Authorization and other processes) + WebRTC Media Server + Frontend and/or Mobile App. May Frontend could be in same code base with Django, up to you.

Settting up or creating Mobile layouts on an exisiting site with ASPX+Portal Templates

We are currently on Kentico EMS V.7 but when our site(s) was created there was not any mobile device layouts setup. an out entire site is build around ASPX+Portal templates so we don't have the edit layout option on our pages. What would you recommend an origination like ours do in this case? Is there an import or migration tool that can be used to move the pages into a responsive design template (are these available out of the box or do they all need to be built?)
has anyone else come against this challenge with their site when trying to a mobile accessible site, if so what approach did you take to move your site(s) over?
I know Stackoverflow doesn't like to answer broad questions, but I'll save you some trouble and hopefully at least point you in the right direction. I use to be in your shoes and I remember how frustrating it was trying to find resources to learn all of this.
You've got some options, but unfortunately none of them are magic bullets. All of these options involve design and development time. If you haven't already done the research to consider if optimizing your site for mobile users is a good business decision, then I would suggest starting there first.
Mobile Device Detection
Kentico offers device layouts that allow you to change the layout of your site depending on which device a user is browsing your site with. The technique it uses is called device detection, which relies on reading the incoming user agent string of the user's http request on your server and using that information to determine what to send back to the user's browser.
This process happens on the server side of your application and also relies on comparing the user agent string against a list of known user agent strings. Kentico in particular uses the 51degrees library to accomplish this. This has the drawback of not always having the most up-to-date user agent strings, so new devices won't be included in your list unless you keep it updated.
A big problem with this approach is that you wind up maintaining multiple sites and/or layouts. If you uses Kentico's mobile device detection, then any time you need to make changes to a page template you will also have to change each of the different layouts for that template.
You don't have to utilize Kentico's device layouts functionality to do mobile device detection. You could just redirect users to a different site entirely. In which case you can still very easily run into the problem of redundant maintenance.
Yes, there are ways of mitigating these issues, but most web devs agree that responsive design is usually the way to go if you want to cater to mobile users.
Responsive Design
This is a client-side design paradigm that relies on CSS media queries. I'm not going to explain how it works since googling "responsive design" will net you plenty of research material. The short version is your user's browser handles the adjustment of the layout by interpreting the CSS of your site. This means you maintain one CSS file for one site and the client handles the adjustments for you.
Now the down side to this is that it takes a takes a talented web designer to do it properly. There are many responsive frameworks out there that can help you out with this, but their appearance is pretty generic and will likely still require customization to fit your particular brand requirements. Some more popular ones are bootstrap, semantic-ui, and foundation.
I recently helped convert a large website in Kentico with a static design into a responsive design by rebuilding all of the page templates using Bootstrap and merging their stylesheets together so that the desktop version still looked the same and the mobile versions had a consistent appearance with the desktop version. This process took about two months and required a lot of UX and content strategy in addition to visual design and coding skills to accomplish correctly. It's not the hardest job in the world, but requires quite a bit of skill and time to do.
In my humble opinion there is no tool which will make (magically) your site responsive. AFAIK the only way is to redesign your site manually (new CSSs - maybe any UI framework, JS etc...)
Maybe you can still use out of the box features like device profiles and mobile pages. (But I am not sure how it works and if it is supported while using ASPX + Portal templates development models).

django: Usage logging tracker application

I am very new to web development. I have build a django application. Now what I want to do is log user behavior such as mouse clicking, time spend on certain section of the webpage. I am very new django so my django application is very simple and I want to start exploring how to build an user behavior tracker to my django application. Ideally I like to save all this session information in database/table. Where should I start and any example would be a great help.
What you want is just web analyics. There are lots of ready made systems that can do this for you, so you won't need to make it yourself in Django.
I would recommend Piwik as it's an open source solution. The drawback is that you have to install it yourself, so something like Google Analytics might be easier to set up, just remember that using this option enables google to track your visitors too.
There are a lots more web analytics software. For a good overview check this Wiki page:
https://en.wikipedia.org/wiki/List_of_web_analytics_software

REST Server, Delphi and Web Services - Advice needed

I am looking on advice on how best to approach a new project I need to develop. From the outset I must add, I have 0 experience with Web development on any level.
What I need to do is provide a web interface through the browser which will communicate with a server back end. The data retrieved will be sourced from either a DB or from another source - external device which the server itself will communicate with via IP. The data retrieved from the external device will always be a string format of n length (non unicode) and the DB data will mostly be strings and numbers with the odd blob thrown in (storing a picture). The communication will always go from the Client (web browser) to the Server. I don't believe that the server would need to instigate the comms.
I have Delphi XE, so started looking at using a REST server for communication and I think that seems to be OK. However, from what I can see, I need to create HTML web pages to "render" the data on the web browser. Is that true? Can I use the IW components with a REST server? If so, I'm not sure how to get the data to/from the browser UI. Am I better of investigating Ruby on Rails perhaps? From what I read on a different thread in here, it's based on MVC and some other areas which I feel, design wise, would fit how I would create the application (I was planning on creating the app based on the MVP or similar design pattern).
I think REST makes the most sense, so if the IW components can't be used, are there any 3rd party products I can use which would let me design "pretty" UI html. Given I don't know java script, would that be a stumbling block with REST too.
Thanks and hopefully I have provided enough information.
Thanks
Jason
Will a human being be responsible for typing the data retrieved from your external device into a web page?
If so, and you have no web development experience, Intraweb is definitely the way to go for Delphi programmers wanting to build a web application without learning new skills. For additional components to create a prettier UI I suggest using TMS Software's Intraweb Component Pack Pro.
If you don't need a human being to manually type in this data then you don't need Intraweb at all. Instead you would write a client application which presumably interrogated your external device for the data and then transmitted it to the REST server. Look at the documentation you've used to build your REST server and it should have a section on how to build a REST client.
You can build an ISAPI module with delphi that does the job, or include a HTTP server right into you executable with Indy, ICS or Synapse.
ISAPI will give you the freedom to choose Apache or IIS and give you all their power this way. Embeded HTTP server will give you a nice small application in which you control all ascpects of how it works.
Yes go with REST as it is simple and clean. All you need is to think and design the API (functions that your server will support). You can bind the APIs to the URL schema thus using the REST principle. I would do it simply like this.
A client makes a request. You show some form of GUI (load or render a HTML page with possible javascript)
User makes an action, you call appropriate API (or the user does it directly).
Show the user some result
Just guide the user process through a series of API calls until the result is made
You can use plain HTML and then add javascript if needed (jquery) or you can use ExtJS from Sencha which makes building a nice GUI a lot easier and is very well structured.
I would not use any "WYSIWYG" web tools. Plain old HTML written by your favorite editor is still the king in my opinion.

HTML5 Offline storage web framework

I am looking for a web app framework which can automatically generate an HTML5 offline storage based app, so while the users become disconnected they still can view the data which normally is stored on a server
Also currently I am using Django and it would be great if there was a framework which could pull data from Django and present that as an offline app.
From the related questions suggested by stackoverflow, while writing this question, I found one interesting link mentioning that GWT has such functionality, I would like to know more about that if possible and if it can generate an HTML5 offline app
Thanks in Advance
Rather than server-side frameworks, you should be taking a look at JavaScript frameworks.
Dojo Storage will transparently select between providers such as Google Gears, Adobe AIR or plain old HTML 5 local storage. Dojo 1.5 - dojox.storage: http://dojotoolkit.org/api/1.5/dojox/storage
There's also jQuery local storage: http://plugins.jquery.com/project/saveit
... or jStorage, which can act as a storage plugin for jQuery, Prototype or MooTools: http://www.jstorage.info/
With any of these, you should be able to use a quick little AJAX call to pull (JSON perhaps) data from your server and use one of these tools to help minimise your storage code.
You're talking about a standalone app, not a django app.
This can be done with javascript (jQuery, Sproutcore, JavascriptMVC, Pyjamas ...) or Adobe AIR, or...
Pulling data from Django is just a matter of setting up a syncing method, most probably using JSON, to fill up the browser local storage. So this is not django-specific at all.
If you want a standalone django app, this can be done if you bundle in a python desktop app django with a built-in server, that's another question
You could suggest the users to create web apps or use google gears instead... I don't know if this will fill the question, but, i'm in the same way. However, I'm developing an governamental solution who will run only for some kind of people, so, I can have a few control about the user's environment... All you need to do is to use jquery to detect if user has a live connection, or offer to the users a 'preferences' page where you define the behavior of the page itself...
Some info about offline cache: http://diveintohtml5.ep.io/offline.html
PS.: In another post in stackoverflow, I 've found another question: html5 offline caching with php driven sites... The last Post said:
HTML5 offline caching does not work to make your pages interact; it works only to make a
particular page available offline. Basically, it works on a URL-by-URL basis. If you
absolutely need offline functionality, you will be forced to make it work in JS.
Also, make sure your manifest includes all resources used by all pages.
Hope this helps!
Hope it helps!!