I am trying to develop a test taking website for students. In this website, students should be able to answer the questions(displayed in text format) by using webcam in one go. Currently I have implemented this feature using Flash, it captures the frames and simultaneously sends it to the server. The problem with this technique is that the quality(FPS) of my video is restricted and is dependent on the bandwidth of the internet connection. Also I am not in favor of using flash.
I want that as soon as student clicks on the start button, a timer should start to record the video. The video should get saved on the client's machine (without asking the client to mention the path) and on completion of video, it should automatically get uploaded on the server and when uploading gets completed, the video should be automatically deleted from the client's machine.
In short can anyone give me a starting point, so as to I can proceed with the work. Any helo will be highly appreciated.Thanks!
Here is a good example how to get webcam working on html5:
http://blog.teamtreehouse.com/accessing-the-device-camera-with-getusermedia
It doesnt tell how to upload the video to the server.
Currently I have implemented this feature using Flash, it captures the frames and simultaneously sends it to the server. The problem with this technique is that the quality(FPS) of my video is restricted and is dependent on the bandwidth of the internet connection.
That is actually incorrect.
The fps you're getting depends 100% on:
the webcam quality
the light available in the room (the more light the better)
The resolution you're recording at (lower res results in higher fps even with low quality webcams in low light)
The video should get saved on the client's machine (without asking the client to mention the path) and on completion of video, it should automatically get uploaded on the server and when uploading gets completed, the video should be automatically deleted from the client's machine.
Flash records by streaming (through rtmp) the audio/video data to a media server (Red5, AMS, Wowza). After the recording is stopped you could move the file to a web server and trigger a http download.
In what regards HTML the Media Recording API has been implemented by Firefox and Chrome 49 and it allows you to record to local RAM and download the file as .webm (the audio video codecs might differ btwn browsers).
Disclaimer: I work at Pipe which handles video recording.
Related
I use Google chrome as my browser, and when I'm outside of my home, I often tether my laptop to my phone for internet.
I sometimes listen to music or watch videos on youtube in the aforementioned circumstance, often repeating the same videos.
Is it possible to configure the browser to store the data from the videos /forever/ (or at least longer) because I've even left my computer on for a couple days, and as soon as I go offline the video will bug at some point.
It seems senseless to be continually reloading streamed videos and in so doing, eat up all of my limited data.
If the browser can temporarily store the video (which it must do) is there some way to extend the lifetime of that data?
The following link describes how to build a flash project that captures a video stream from a webcam, encodes to h264 and stream it to a media server over a network connection:
http://www.adobe.com/devnet/adobe-media-server/articles/encoding-live-video-h264.html
My limited experience is that this approach is limited by available bandwidth, namely if the project is configured to record a video at a bitrate exceeding the available bandwidth, then frames are dropped and the final video is lacking.
I'm wondering if there are facilities in flash to either record to local storage or to an in-memory cache, and then upload it to the media server when the recording is complete? This let's a web app spend additional time uploading as the upload is decoupled from the recording, and there's no contention between video bitrate and bandwidth.
Actually there is a way. I've built a library encoding videos in web Flash (or AIR) by recompiling C/C++ code. It stores the video into memory as ByteArray and currently works with ogv(Theora/Vorbis codecs). It can also run in "realtime" mode which runs the encoding on another thread so it's capturing and encoding at the same time. You can try a free version anytime and see if it's useful or not...http://rainbowcreatures.com/product_flashywrappers.php. If the video being encoded is relatively short(dozens of seconds) and lower res(640x480, 800x600) the size is max. 5-15 MB.
I've been able to build demos with it to share the video to php, Facebook or store to disk.
Unless you are running an AIR app, no such functionality exists in Flash. With regards to local storage, all you have for a web-based application is the SharedObject, which is generally limited to ~100kb, if I remember correctly. You'd be lucky to record a single frame of video in that space.
You can try to save directly to memory (i.e. just leave it as a ByteArray), but depending on OS, browser, and plugin being used, your app is likely to be forced to shut down for overusing memory. Even if it didn't, this would be a poor choice since there could be a system with 512MB of RAM in it and you are trying to save a 300MB file in it. You would slow down that system (and even better systems) without even blinking an eye.
If you are using AIR, you can save the video to memory and then every few seconds, save that to disk using File and FileStream. The only limit there is the size of the drive it is being saved on. You could then upload at the end of the recording, or when the user is satisfied.
Is there anyway to buffer video in a Windows Phone 8 app?
I want to create an app that buffers the last 30 seconds or so of video so that the user can tap the screen and get a video file that includes the 30 seconds of video taken prior to their tapping the screen.
I've looked at both the .NET CaptureSource API, and the WP8 only AudioVideoCaptureDevice, both look like they record directly to a file on IsolatedStorage:
For CaptureSource you use a FileSink object to write an mp4 file of your recorded video.
For AudioVideoCaptureDevice you can write to a RandomAccessStream. WP8 doesn't have the InMemoryRandomAccessStream though, so the only way I see to get a RandomAccessStream is to create one from a storage file.
For CaptureSource you could write your own VideoSink class to buffer your video and use that instead of FileSink, but then you you would be stuck working with the Raw video data, and you'd have to write your own encoder to get it into a formal like an mp4.
Is there anything I'm missing, or is buffering video just not possible on WP8 unless you write your own encoder?
I'm not sure you can do This... for various reasons... Maybe you can cache video in memory, making your own implementation of IRandomAccessStream but... as you noted, you need to play in first instance with RAW video, and depending resolution, 30 seconds of raw video and audio can weight more than the total allowed memory for the application so you can had your app closed by the system.
I don't know if you can use a mediaelement to play the video Without showing it to the user and when the user click on play, rewind to Start position and show it to the user, as OS automatically cache streamed videos (This is a happy idea... i don't test This in anyway....)
Sorry for not begin more useful :(
I use HTML5 <video> tag to play videos in my LAN from different computers. In my current setup, I have got a server, which provides the html page and all the videos I want to play. There are some computers which should play these videos by loading the html page. In general that works already. But sometimes after a while playing a video, the console says failed to load resource and the playing stops immediately. I thougt, this is maybe some sort of timeout in my LAN and I had the idea to play the videos locally, i.e. copy all videos to each computer and just provide the html on the server. The server html then, just links to file://.../.
but when I tried this approach on the server, the video was stopping every few seconds and it did not buffer at all. It was completely impossible to watch the video.
Videos are *.mp4; I run chrome on all win7 computers, Server is XAMPP.
Is there either a way to catch the failed to load resource error, or a way to play local videos in a reasonable quality?
Did none of you have problems like that yet?
A few thoughts:
does your config include 'AddType video/mp4 .mp4'?
is it possible that progressive loading has been disabled somehow?
how large are the videos? there are reports of > 30Mb files having playback issues in XAMPP
if you convert to another format ( .ogg, .avi, similar ) do they playback any better?
if you use a .php (or similar) file to provide progressive loading - any change? IE Stream from the app instead of directly.
I have an interesting project wherein I need to allow users to capture video of themselves with a webcam at a kiosk, after which I email them a link to their video. The trick is the resulting video needs to be a 'slow motion' version of the captured video. So for example, if someone creates a 2 minute movie, the resulting movie will be 4 minutes.
I'd like to build this in Flex / AS3 if possible. I don't have issues capturing the video and storing it / generating and emailing a link, but slowing down the video is the real mind bender. I'm unsure how to approach 'batch post-processing' a set of videos using Adobe tools.
Has anyone had a project similar to this or have suggestions on routes to take in order to do this?
Thanks!
-Josh
This is absolutely feasible from the client side, contrary to what some may believe. :)
http://code.google.com/p/flvrecorder/
Just adjust the capture rate, which shouldn't be too difficult all the source is there.
Alternatively, you could write an AIR app that launches Adobe Media Encoder after writing a file and launch it with a preset that has FTP info etc. Or you can just use the socket class to connect and upload over FTP.
http://code.google.com/p/fl-ftp/
It is not feasible to do this client-side.
Capture the video and send it to the server.
Use a library like FFMpeg to do your coneversions