Capturing image with webcam - javascript

I'm working on a project with Asp.net MVC4. I need to take pictures with a webcam. This application should be configurable with any tablet.
Currently runs the application on desktop, on tablets no.
I am using jscam.swf and jscam_canvas_only.swf.
On tablets I use this the Samsung Galaxy on these devices install adobe flash player to a well does not work ... someone knows some other technology to take pictures or if someone can help me solve this problem I'll be grateful

Flash has limited support on Android tablets and no support on iOS devices.
A better solution may be to move to 100% HTML5. When using HTML5, your browser has access to your webcam. Below are some links showing HTML5 accessing your webcam:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas
https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia

Latest method as of 2020
const userVideo = await navigator.mediaDevices.getUserMedia({ video: true })
const userVideoTrack = userVideo.getVideoTracks()[0]
const photoBlob = await new ImageCapture(userVideoTrack).takePhoto()
You can then proceed the blob with something like the FileReader or URL API.

Have you tried with Silverlight? Since you are using .NET this might be helpful. http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/
SL is a simple plugin it runs on every browser, you just need to embed your Silverlight component within your view code and the browser will handle it as an object tag.
Hope it helps.

I found the way to enable the camera and audio using HTML5 Chrome using Android for tablets.
We connect to chrome://flags/ and look for WebRTC.
After we enable this flag.
Restart the browser or tablet and working properly.

Related

Voice recording on iPhone by using Safari and HTML5

I am developing a simple web application which only records a voice from microphone but I have some trouble.
HTML5 voice recording function works well on chrome and firefox desktop or android. But while using mobile browsers on iPhone even chrome and firefox it doesn't work.
I tried recorder.js and result did not change.
Is it possible to recording voice on safari or it is a missing function of safari or iOS?
May 2018 Update (because figuring this out has been tough with all the outdated info).
I found this demo that proves it is possible: https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1
As far as I knew, even on the latest iOS (iOS 10), recording voice on iOS using HTML5 is still impossible. Since all the browsers on iOS are limited to use UIWebView which Safari on iOS uses as well, Chrome on iOS is not able to support any API that can be used for media recording.
For example, recorder.js which you used are built on Media Capture API. If you check caniuse.com, you will find this API is not supported on iOS. (Also check the issue here).
MediaRecorder API is also a promising API but still not supported by Apple's browser.
Check answers below for more information.
1. Record voice from IPhone using HTML5
2. Audio Recording html5 on iOS
It's now possible and "easy" to do on iOS11 for Safari! The mediaStream API is supported now. The mediaRecorder API however is not. This causes any existing examples out there to not work. So you'll have to implement your own mediaRecorder functionality by connecting the media stream to a webkitAudioContext ScriptProcessorNode and collect the stream buffer on the node's onaudioprocess event. You can then collect the iOS microphone's streaming audio data and do with it what you want, most likely merging it into a wav file for upload/download. This works for any browser that supports the Media Stream API.
Two gotcha's:
- iOS Safari likes to deallocate any AudioContext that wasn't created on the main thread (on a tap) so you can't initialize it on the device media access accepted callback.
- The scriptProccessorNode wont fire any audioprocessed events unless the input AND output are connected for some reason.
Since iOS11, Safari now supports Media Capture API:
New in Safari 11.0 – Camera and microphone access.
Added support for the Media Capture API.
Added ability for websites to access camera and microphone streams from a user's
device (user permission is required.)
Announcement by Apple - broken link as of Jul 2018
A copy of the announcement on someone's blog
Therefore recorder.js will work now.
I'm using the new iPhone 11 ProMax, with iOS13.3, and have been trying to build out a web app with voice recognition services via HTML5 to work in safari or any browser on my iPhone. It seems iOS developers have blocked audio / video recording at the os level. There is a limited workaround however that might be useful for someone coming here as I did.
https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/
Basically, if you go into advanced settings for safari you can enable the mediaRecorder. Their demo works with video capture, I have not seen it with pure audio yet.
Safari on iOS 11 does NOT support the 2 standards which would make audio (only) recording possible (and easy to implement):
HTML Media Capture for audio (spec, correct syntax ) - audio recording should be passed to a native app which should pass the result back to the browser for upload (it works for video and picture)
MediaStream Recording API (spec, demo) - allows you to record to a blob directly in the browser. The recording can be downloaded or uploaded to a web server.

Capturing photo , audio and video from web application

I am making a web application which has the functionality of capturing the photo, audio and video. Till now i have considered the JQM and Sencha framework.
For photo i am able to directly open a camera using Sencha and it works great. But for audio and video i am not able to find solution like photo. Does anyone has done this? or have an idea how can this done?.
I am aware this can be done via Phone-gap but that is for the Hybrid App (native + html5) app i want to do it for browser.
There is no API in html 5 that will allow you to acces the camera/microphone directly in iOS.
Since iOS 6 there is only the option the upload an photo via the input tag.
You could try getUserMedia.
Supports is still sparse though - see here
Tutorial - see here
I highly recommend using Media element. I've built entire JQM mobile solutions using the video player capabaility, and audio.
http://mediaelementjs.com/

Can we access device photogallery from mobile device browser

In my project as per client we need to access and upload picture from photo gallery to site. It is for iOS, Android and blackberry. I know we can access it for android using opera browser but my question is can we access it for all mobile device and from any device browser.
Yes, in fact iOS even has multi-upload functionality built in as well. I'm not sure about blackberry, but I'm almost positive that any mobile device has this feature. The best thing you can do is just more research online and testing on them.
HTML(you don't need javascript to do it)
<input type="file"/>

Voice Record on Mobile Web Application

Question:
Is it possible, with some sort of technology, to integrate voice recording into a mobile web application?
Some background:
I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going.
Voice Recording Requirements:
1. Must work with both iOS and Android.
2. Must work in most current versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari.
3. Must work within the framework of a mobile web application.
4. Must be able to record without being actively connected to the internet.
5. The client application shouldn't require the user to alter their phone OS.
I tried to be as specific as possible to assist in allowing you to answer this question accurately. If anything is unclear, just let me know in a comment below, and I will further clarify.
Check this http://www.html5rocks.com/en/tutorials/getusermedia/intro/
HTML Media Capture <input type="file">
Work for most of the mobile browsers, but it works not well because it will require native recording app and needs to active manually.
getUserMedia() and WebRTC
So far, only the Chromium support it well in mobile.
So, I gave up the web app. Hybrid app is the solution.
If you want to try the hybrid app for recording, you can check the Cordova Plugin https://github.com/emj365/cordova-plugin-audio-recorder-api that I created for recording task in the hybrid app.
It looks like in the years since asking this question a solution has surfaced. This solution has come in the form of MediaStreamConstraints dictionary audio property.
The Web API docs from Mozilla have a very nice example shown below:
document.getElementById("startButton").addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
audio: true
}).then(stream => audioElement.srcObject = stream)
.catch(err => log(err.name + ": " + err.message));
}, false);
Resources
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
If you want to record it as an audio, I think you can only make it for Chrome dev, Chrome canary, Opera next, and some mobile browser.
Using the WebRTC getUserMedia() API then make the blob URL of the audio data URL to save it.
If you want to record it as text maybe you can use <input -x-webkit-speech/> for webkit browsers. Make an event that make every-time it stop recording it'll add the currently recorded speech to an element and start recording again. Finally, make a blob URL to save it as a text file.

Audio streaming and voice recording via HTML and Javascript

I'm on a new project that requires to stream audio files (mp3) and record voice messages.. of course my first option was to use flash. But the problem is that the customer wants the website to be iPhone friendly.
Is there any technologie that allows me to play and record voice messages just with javascript/php/xhtml?
And of course, the website should be fully compatible with firefox, safari, internet explorer, etc.
I googled it and everything I found was flash-based.
but if you have any clue about it, please let me know.
No. Not even the new-ish HTML5 has any features to record audio. You'd need to go through Flash or Java - but that would rule out iPhone.
if you want to record sound you should do it with the new HTML5's api's, you can read more about it on
https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
However, this is theory, in reality no browsers support it and there is no way to do it. So in short: you cannot do what you ask.
What you could do is create an iPhone native app for those who want to use iPhone, and a flash website for those who want to access it with a regular browser.

Categories

Resources