I've been reading about invoking a mobile device's camera and allowing the user to take a picture in HTML5, and I found I can do it using an input element like so:
<input type="file" accept="image/*;capture=camera">
I also read about the getUserMedia() API, but it doesn't seem as though it's supported by Safari very well.
I want to customize the UI that is visible while the user is taking a screenshot. A couple examples of the customization I'd like to perform are overlaying text on the screen and drawing rectangles to show what portion of the screen will be captured. This is already done in native apps, but is it possible in the web?
If not, is there any sort of workaround?
Thanks in advance for any help!
It is not possible on the web (yet).
HTML Media Capture (the code you used) relies on the OS & browser for the camera & library apps.
Also, the code you used is deprecated, here's the correct one: <input type="file" accept="image/*" capture> .
This (new) code will tell the browser 2 things:
accept="image/*" → you want to take a picture (not a video or audio)
capture → only get a picture from the camera (not from the library, works only on Android)
See Correct Syntax for HTML Media Capture for more info.
Related
Hello
I have an issue with Xamarin Mobile Android, I'm using a label of type html and I wanted to display an online pic, the following sample code is working fine on IOS:
<Label TextType="Html" Text="<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'></img>" />
But on Android it display like the following: Powered by TinyTake Screen Capture
I'm using Xamarin.Forms 4.7.0.1351
Please Advise.
Label in Xamarin forms is designed for Display text in Xamarin.Forms. The Image tag is recommended.
I can't get it worked too, it displays the same as the picture which you provided.
It contains this sentence in the docs:
Displaying HTML in a Label is limited to the HTML tags that are
supported by the underlying platform
Maybe this explained it, as it even couldn't add the colors to the text on android while the label works well on ios.
I have a site (which is only viewed using Internet Explorer 7) that is made up of 5 sections and in section 2 I am currently using Vimeo to embed a video. The requirement is that the user has to watch all of it before proceeding to the next section. In order to achieve this I have used event listeners which only activate the ‘Next’ button to proceed when all of the video has been watched (Works Great)
Another requirement is for users to be able to play the video in full screen but the problem I have using Vimeo is that it does not support the option to hide the progress bar when a video is playing in full screen, this allows the user to skip the video. After researching around and contacting Vimeo support I can confirm that hiding the progress bar can only be achieved when viewing the video in standard mode when you have subscribed to the pro account (which I have).
I looked into targeting the CSS classes within the iFrame, and setting a display none value on the controls div but this is something that can’t be done.
I have looked at using YouTube as an alternative and you are able to hide the progress bar in full screen using this markup
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&controls=0&showinfo=0?&fullscreen=1" frameborder="0" allowfullscreen=1></iframe>
I’ve done some reading on using the YouTube Player API Reference for iframe Embeds (https://developers.google.com/youtube/iframe_api_reference) but it says that one of the requirements is that the user's browser must support the HTML5 postMessage feature - INTERNET EXPLORER 7 DOES NOT SUPPORT IT :(
Could anyone suggest how I can achieve this, either by hiding the progress bar using vimeo in full screen or by implementing the youTube Iframe API to work with IE7?
Cheers
Paul
I don't see a parameter to remove the controls in a Vimeo video on their page on embedding. Also, the Vimeo FAQs say that the control bar gets hidden on an embedded video when it's less than a specified number of pixels wide.
You might have to do some sneaky CSS styling stuff instead. I did manage to find an article on hiding controls on an HTML5 video when viewing it fullscreen, but it said that IE does not support the full-screen API, so I'm not entirely sure what you're trying to do is actually possible on IE.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.
For some reason, when I load the page on an iPad, it is not showing the video posters.
Try the following:
load the page on a desktop browser
load it on an iPad or iPad simulator, and you get a big black box with a play button
please tell me why this is happening?
Here's what I've already ruled out:
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Type header properly image/jpeg.
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.
Most of the StackOverflow questions on the topic just say "Restart your iPad"
Here's where it gets weird:
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
Then, I tried this:
(all of the following on the iPad simulator)
Go to the site, video posters don't show
Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
Kill Safari
Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
Go back to the single-video test page, the video poster for that one no longer works either.
Repeat steps 3 to 8 to see the process of when video posters stop working.
So apparently, at some point, Mobile Safari decides it will no longer show any video posters.
Also, apparently, my site triggers this condition.
Clarifications:
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
Does anyone have any idea why this is happening? Is there a way to work around it?
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
I see the question keeps getting upvoted once in a while, though there's no answer.
So here's what I ended up doing:
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
I fixed it by adding preload="none" to my code.
<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
I’m writing an HTML5 page with a embedded video tag for the iPad.
How can I hide or disable the fullscreen button? I just need to show the video without the fullscreen option.
As far as I know (I could be wrong, this isn’t really my area), you can’t tell Safari how to render its standard video controls.
However, you can tell it not to render its standard video controls (at least according to the HTML5 spec) by omitting the controls attribute from the video tag.
You can then write your own play/pause controls. (See e.g. http://diveintohtml5.ep.io/video.html#markup). That’s obviously a bit more work, but I think it’s your only option.
If you don’t want to write your own controls from scratch, there are a couple of good pre-built ones out there, specifically:
Video JS
Video for Everybody
They’re more focused on providing video via HTML5 or Flash depending on browser capabilities, but you might be able to extract the control parts, or at least see how they’re doing it.