we are developing a web site where you can upload videos about tutorials, it looks like a repository of videos for a certain institution. and we came up a idea where the user can record a video directly to the site and upload it with title,description, etc. . and we are going to use ruby on rails framework. Do anyone knows here how to make it except using flash and silverlight?
well i search some and found some but the case is when the user stops the recording it automatically upload the file...and the user can put some title or descriptions etc.. and the example is in php thats why its a problem to me also how can i do it in rails
thanks in advance
If an HTML5 solution could be suitable for you, you can take a look to WebRTC (currently supported in Chrome, Firefox and Opera).
You can find a good tutorial here: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
The first hit on searching webcam plugin: http://www.xarg.org/project/jquery-webcam-plugin/ As it is using JavaScript it is easy to include in Rails.
Many others appear in the results ...
Another option is to use the Nimbb widget. There are a lot of tutorials showing how to embed it into a website.
There are list of JQuery Plugins for webcam.. Best Top 10 are listed Below:
1. ScriptCam : jQuery plugin to manipulate Webcams
ScriptCam is a popular JQuery plugin to manipulate webcams. Take snapshots, detect movement, colors, QR and barcodes, record videoclips and organize videochats.
2. Xarg jQuery webcam plugin
The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript.This plugin provides three different modes to access a webcam through a small API directly with JavaScript – or more precisely jQuery. Thus, it is possible to bring the image on a Canvas (callback mode), to store the image on the server (save mode) and to stream the live image of the Flash element on a Canvas (stream mode).
3. jQuery.WebcamQRCode : QR Code scanning in jQuery
WebcamQRCode is a jQuery plugin that uses the webcam user to scan a QR code and return the result to Javascript to be treated. This plugin was originally developed to scan the barcode of the product and automatically fill in the corresponding information on the form of an intranet.This plugin uses Flash to access the webcam.
4. Photobooth-js : jQuery Html5 plugin to take pictures through webcam
Photobooth-js is a jQuery plugin plus an html5 widget that allows users to take their avatar pictures on your site.This jquery plugin is supported in all browsers that support navigator.getUserMedia.
5. Photobooth with PHP, jQuery and CSS3
In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.
6. Mackers jQuery Webcam Plugin
Plugin which allows jQuery to read data from a user’s webcam or other video capture device.
7. headtrackr : Javascript library for headtracking via Webcam
headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.
8. tracking.js : Real Time tracking techniques by the Camera
The tracking.js brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.
9. Reveal.js with Webcam-based gesture recognition
This is what I got when I combined webcam-based gesture recognition with Hakim El Hattab’s reveal.js. It took me a while to write and fine tune the detection algorithms. Even then, the algorithms are only about 80% accurate.
10. Say Chees : JavaScript library for integrating a webcam
A minimal library for integrating webcam snapshots into your app. It uses getUserMedia, a recent API for accessing audio and video in the browser.
If my Answer Satisfied your requirement somehow or somewhere then I appreciate if you Up-Vote this Answer... :) ;)
You can do this without any external library and in fact, I think the work is way easier if you build this from the ground up.
You'll first need access to the user's webcam, with JavaScript you can first test if the user has a webcam in the first place. This can be done with:
function hasNavigator() {
return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
}
Then if hasNavigator() is true, you can
if (video) {
navigator.mediaDevices.getUserMedia(constraints).then((stream) => { video.srcObject = stream })
}
where video is
var video = document.querySelector('video')
This allows you to fetch a stream from the webcam:
Once you have the stream you can draw a frame of the stream on a canvas and save it as an image.
I wrote a blog post about Linking a Webcam Directly to Rails' ActiveStorage that I think you might find helpful.
Related
Last weeks I built a Progressive Web App using Html/JS. I found several (free) libraries for scanning QR codes. The result of the QR-scanning was not very good. In many cases, no auto-focus was done by the video camera.
Can Ionic use the video camera very well to scan (any) QR-codes?
Does Ionic use the native (like) access to the video camera?
The best way of proving something is to build it ;-) Would an Ionic app have better QR scanning?
Today I created my first Ionic3 app. I used this nice example.
The difference in QR scanning quality was far more than I expected:
After trying many (free) Javascript examples on the web, the quality was not very good. Alas.
The solution of the Ionic/Cordova example on Android was SUPERB!
Ionic generates a native app (either for IoS or Android). It will use the native functionality of the video camera for scanning the QR.
It is possible to create screenshot of a Window content in Qt 5? E.g we have web browser and I want to create screen only of the page without chrome (menus window ...). Here is an example:
http://s7.postimg.org/5ekkmpdbd/question.png
Image above represent the feature which I want to implement in my Qt application.
Here is the example:
originalPixmap = QPixmap::grabWindow(QApplication::activeWindow()->winId());
there is a possibility to render only the content (web page) of the browser ang get the image?
The way to deal with the chrome issue depends on what is your goal. The "chrome" you are referring to is a part of the web browser application that you're trying to interact with.
If you're doing this as a quick in-house hack, then you're free to hard code some offsets needed to trim the original pixmap so that the chrome is removed.
If you want something that can grab website screenshots and doesn't care on which browser is being used, you should be using WebKit bundled with Qt. Then you have full control over where the stuff is rendered.
If you want to grab screenshots from a user-provided browser, then one approach is to add an extension into the browser, and implement a server that can receive images from the extension running in the browser. The extension can be written in javascript presumably for everything out there but IE. It will be browser-specific, though.
Another approach is to check if the browser doesn't provide some other APIs that could be used for the purpose, without a need of writing an extension. For all I know, similar extensions should already exist. There surely are open source website testing frameworks out there that let you render a site in multiple browsers; they should provide this "grab from a browser" functionality.
Nitpick: In Qt 5 you should be using QScreen::grabWindow(), not the deprecated QPixmap::grabWindow(). I also hope that you're aware that if there are any windows in front of your window and obscuring it, they'll be grabbed. The grabbing is done from the screen, not directly from the window.
In the same way where we can make custom directshow filters to make a virtual cam/mic (and then select this virtual cam in another program like skype for example), what would be the equivalent to that feature in Media Foundation? Since MF is going to replace DS, i decided i would try to make my program future proof of some sorts and would like a starting point. Any ideas/tuts/links etc would be greatly appreviated.
Media Foundation employs the concept of Media Sources, which are close to DirectShow virtual devices.
Media sources are objects that generate media data in the Media Foundation pipeline. This section describes the media source APIs in detail. Read this section if you are implementing a custom media source, or using a media source outside of the Media Foundation pipeline.
While you are supposedly aware of multiple apps that would connect to your custom DirectShow source, you are going to have hard time trying to find something to connect to source implemented in Media Foundation: Skype does not yet attempt to leverage them.
You will find good samples there: Media Foundation Sample Code
What possible web technology Google might have used for this Gideon Sundback doodle (see video)
http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu
I am really curious. in a web browser, can we really do this much? I guess it is not flash, else i would not wonder. Any source code or similar samples available?
Guess it shows off how much we can extend in web technologies now.
A Canvas element <canvas> is used. All modern browsers supports HTML5 now - Firefox, chrome and Opera. Yes it is possible to do these with the browsers of today!
The zipper teeth are drawn onto the canvas from a png sprite file. The zipper slider also resides in that png image. The whole interactive animation is coded in the Javascript. The zipper peel effect is done using the arc() method of the context object, context being 2d in this case.
As soon as you click on the slider, it hides all the Dom elements - buttons and text input and all what you see is the canvas drawing. Since using the javascript code that is used, can't alone recreate the effect on the local html file. I think some external libraries are used. I am not sure how the google.listen() method works as its not defined. Check out the javascript here, in this thread, which is beautified javascript code, using the jsbeautifier.org
I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).
However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.
Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.
Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the <canvas> tag. Graph visualization examples are here, here and here, other demos are here.
There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.
This is the best I found, however they are plenty of others.
mxGraph (Not free)
You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).
For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.
Side note, here is my simple interactive graph visualization example:
You can do something like this very simply just with DOT and HTML.
Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)
dot test.dot -Tpng -o test.png -Tcmapx -o test.map
SVG exports are directly clickable.
It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.
As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.
I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.
First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.
I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.
I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.
I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.
If you want to see the code in ASP.NET, I can post it.