Mobile browser camera access - mobile

HeIIo, I was reading lot's of articles and answers regarding this topic; however most of them are way outdated.
On my website I utilize webcam functionality with:
<input type="file" accept="video/*;capture=camcorder">
Yet, this will not work on any mobile browser. Is there a way to stream video and take snapshots within a mobile browsers (at least some of them)? Thank you.

Related

chrome html5 video requests stay pending while video is playing

I'm currently working on a eLearning website where I use html5 video tag to show video tutorials to my users. I'm using the video streaming technique explained here:
https://getpocket.com/redirect?url=http%3A%2F%2Fstudentguru.gr%2Fb%2Feloy%2Farchive%2F2015%2F07%2F13%2Fvideo-streaming-for-mobile-clients-via-asp-net-web-api-2-tutorial.
After I implemented this solution everything works fine, but after a while I realized while video is playing using html5 video tag in chrome, other requests that are sent to the same server, stays pending for a long time. I don't have this issue on other browsers link Firefox. This is because of a specific bug in chrome (https://github.com/videojs/video.js/issues/455). This is a major problem for me because while users are watching videos on my website, I use ajax to save their progress and this issue prevents that. Do you know any workaround to fix this issue? I have used solutions in HTML5 video element request stay pending forever (on chrome) and none of them solved my problem.
Thanks in advanced.

Embedded SurveyMonkey survey not appearing on mobile

I'm looking to embed an existing survey monkey survey into a webpage, following the instructions here:
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
which is working perfectly on desktop and tablet sizes, but for some reason not working on mobile (either on an android device or in chrome emulator)
The following steps appear to be working:
Loading embed script into the page
Embed script calls surveymonkey.com, and retrieves the SMCX script
SMCX.boot() is called
But, the survey (or its markup) does not appear in the page.
Has anyone else run into this issue? What other additional information can I provide?
The Website Collector used to work everywhere, but they changed their API and now document that mobile is not supported.
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
"Website Collectors display on desktop browsers only—not on mobile devices or tablets."
It's actually worse than not supporting mobile or tablets, their surveys don't even load on desktop browsers if your browser is currently 760 pixels or less wide.
The solution is to just iframe the web link in manually.
<iframe height="500" width="500" src="https://www.surveymonkey.com/r/XL3DDMS"></iframe>
In addition to the answer of using iframe, for iPhone, both in Safari and Chrome rendered a weird view (the spacing between each question is extremely large), and I finally tackled it by turn off the "One Question at a Time" option, hope this helps someone.

AngularJS: Embedding Youtube videos in iframe does not work on Android Chrome

I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed

how to build a mobile website using html on ubuntu 12.04

I'm working on a simple mobile website for a hotel.they don't need much dynamic feature.most are simple HTML.So my question are as below.
I find it's hard to debug mobile website on Ubuntu.cause you know ,desktop browser are to big to show a mobile website.each time i need to put it on a server.then using a phone to test the mobile website.is't too annoy.is there a better way to do this?
On windows u have Dreamweaver to change the css style.but on Ubuntu can I find a tool like Dreamweaver?
is any any JavaScript code for animation for a mobile website.
Jquery mobile is a good js lib to create the basic element in webpages.but if I want to do some transition between pictures.how could I do that.
PS:if you want to use php to send a email to a email address how to do that?
In chrome you can emulate a mobile device, the viewport and user agent will adjust to desired device. In your developer tools you have something called Emulation where you can change your device.
Link!
To send a email with PHP, check the documentation:
Link to php docs
FWIW, I would reccomend you start with a resposive framework. There are plenty of great options, including Bootstrap , Foundation or Skeleton
From what you describe about your requirements, responsive is going to be a good fit for your client and you'll future-proof your design.
Then with a responsive design, you can test everything in a standard web browser by making the viewport or window wider or smaller.
Good luck!

Stream live video to Android and iPhone smartphones

I am developing a live video streaming solution for a client with the following requirements:
- Stream live video to high-end Android and iPhone devices, from a mobile-optimized web app (NOT native apps)
- The video should not be full screen but partial screen, so that other HTML content can be displayed below the video
So my question is, what is the video format/technology that allows live video streaming in both devices? I've heard about HLS but I am not sure it plays in both devices.
And also, is there a way to prevent the video from going full screen? I've come across this in SO http://broken-links.com/tests/video/, but it's for on demand video. Could it also apply for live video streaming?
Thanks in advance
You should set allowsInlineMediaPlayback attribute of your UIWebView instance to YES for iOS.
From Apple's UIWebView reference page:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or
use the native full-screen controller.
#property(nonatomic) BOOL allowsInlineMediaPlayback Discussion The
default value on iPhone is NO.
In order for video to play inline, not only does this property need to
be set on the view, but the video element in the HTML document must
also include the webkit-playsinline attribute.
For Android, AFAIK default behaviour of Android's WebView is not triggering media player with fullscreen. You should be able to use WebView as is.
You can get information about supported video formats with those links:
iOS Media Layer Supported Video Formats
Android Supported Video Formats
There are two major industry standards, I guess it won't be a problem if I understand your concerns correctly.
Hope that helps.

Resources