I'm building an application with the MEAN stack that allows users to use a mobile device's rear-facing camera through a browser. I am looking for a way to utilize a rear-facing camera to take a photo and save it to a database where I'll use it in a inventory system. I have looked at HTML5's getUserMedia() but seems to use mostly Audio and Video. Can anyone point me in a direction that will be useable across up-to-date browsers as well.
Possible duplicate answer : HTML5 Camera Access Through Browser in iOS
You would use
<input type="file" id="take-picture" accept="image/*"> to prompt the user for access to their camera.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/API/Camera_API/Introduction
Works on Android 3.0+ and iOS 6.0+
Related
If you are familiar with scratch, you'll know that Scratch 3 was built to support mobile.
Javascript audio isn't working on mobile devices shows that mobile doesn't support auto playback of audio
Scratch seems to play audio without a problem...
Does anyone know the secret behind Scratch mobile audio playing capabilities? (share pieces of code which scratch uses to play audio on mobile)
(Incase you're wondering why I need to know this, I need to use it on my website)
Read the answer carefully.
Some mobile browsers support automatic playback of audio, but ios, chrome and others require interactive actions to trigger the sound playback.You can try working with the mute attribute..
Scratch can't play sounds automatically. You have to click the Start button on any project. By "interactive actions" they mean clicks, scroll etc,.
I'm developing a Web Application on Tizen. My application was first developed on other platforms like iOS and Android.
Basically it starts on Landscape mode and plays remote content such as image, video or opens a web page. It has a menu inside the app to offer people the ability to change the screen orientation inside the app manually.
This approach is quite easy on iOS and Android but on Tizen seems it doesn't work that easy.
I'm following Tizen's official documentation which send's us to : https://w3c.github.io/screen-orientation/
But, can't make it work even though I followed steps written on the link above.
This is what I got when I try to rotate:
Trying with :
screen.orientation.lock('portrait-primary')
Error :
Promise {}
index.html:1 Uncaught (in promise) DOMException: The page needs to be fullscreen in order to call screen.orientation.lock().
P.S. The app is already in fullscreen. The error is not relevant.
Do you have any ideas ?
Thank you
For all to those who are still trying to achieve this:
After having a long discussion with Samsung, they claimed that supporting the TV orientation via code is not possible right now (Not sure if it's gonna be implemented in the future).
These restrictions come due to different operability of the hardware components on different orientation.
The only way to rotate your screen is to do it via Samsung's TV Settings so that it can prepare its hardware for the chosen orientation.
There are a special Samsung TVs for Advertising market (Digital Signage series) that are ready to set the orientation of the screen.
I comercial Samsung TV sets Tizen is not able to rotate some kind of elements (as far I know the video object are one of the HTML elements that cannot be rotated)
I've developed some apps for Tizen and for one customer I tried to make a video wall but it was impossible due the firmware limitation of Tizen (it's a marketing strategy in order to avoid having hotel and digital signage capabilities in commercial TV sets)
I am working on a project where by we are hosting and streaming video through Azure Media Service.
There is a particular video we have positioned as the hero background upon entry to the site. On desktop the video auto-play's and streams just fine but on mobile it does not autoplay at all. It simply showcases the preview image.
I'd love to be able to paste a link to the site but unfortunately due to the confidentiality of the project I am not able to. However, if there is something in particular you'd like me to post to help support the question please let me know.
The web-app is build using Angular.
Does anyone know how to fix this problem? or can point me in the right direction?
Check with the browser platform you are targeting on the mobile applications. Most mobile browsers have disabled autoplay. User MUST now initiate all playback actions.
Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/
Chrome 53 on Android also allowing muted video autoplay: https://developers.google.com/web/updates/2016/07/autoplay
I have a client that has a website. The website current allows users to login and search for and play .mp4 video. The list of playlist is created dynamically where values are stored in a sql server 2008 database. My client's site is already built for smartphone utilization and did not want to recreate an iphone app. Besides it would mean loading thousands of video. Instead I thought I would use the UIWebview to load the website. This seemed to work well. However, when you try to click on and play video within the UIWebview nothing happens. This is not the case if we launch the mobile website within the apple mobile safari browser. The vide plays by kicking off in the iPhone video player. Is there any way to accomplish this same functionality with a uiwebview? Any guidance or help is appreciated.
UIWebView will play video using <video> if everything is set up correctly, either remote files or local files will work (if they are the correct format).
What does your video tag look like? In particular your src.
If you want to, for example, play an inline video the html5 for that would be something like
<video id="theVideo" controls width="280" height="160" src="yourVideo.mp4" webkit-playsinline></video>
And it would be necessary in the UIWebView to set this line
self.webView.allowsInlineMediaPlayback = YES;
Or you can also explicitly load the media player, but doing everything in HTML5 is neat and tidy and easy.
I was wondering if I can access the webcam via a browser plugin e.g. for Firefox, Safari, Internet Explorer etc?
Are there already similar plugins/add-ons?
Thanks
It's possible to access the webcam through Flash, for instance.
An example of this is Omegle, which uses Flash to access the webcam.
An alternative is doing it in Silverlight, as in this example.
Finally, there's Java, in which you could write an applet to access the webcam. This article should demonstrate this.
If you wish to do it yourself, you will have to write the plugins yourself.
This can be done using the NPAPI for most browsers, or by writing a BHO (Browser Helper Object) for Internet Explorer.
How to interact with the webcam there depends on which language you choose, as you have full access to system libraries.
Note that writing a custom browser plugin is both harder, and a larger hassle for users, as they have to install something new, as opposed to just using their existing browser plugins.
I just found this:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
One year and a half after this question was made. I haven't tested it, but maybe it'll help.
From the link (just a copy/paste showing how to record something using the camera as input source):
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
None of the major Webbrowser's (IE, FF, Chrome) provide any special support for Webcams. You will need to either use the native OS's API (whatever that may be), or embed Flash in Webbrowser control in your browser plug-in.
You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS
To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
(Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).To make video recording work on Safari, it maybe worthwhile to explore https://github.com/ronghanghu/webcamjs (Note flash plugin needs to be installed and enabled)
Helpful demonstrations :
https://webrtc.github.io/samples/
https://mozdevs.github.io/MediaRecorder-examples/index.html
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/