I'm trying to get an image capture from the front or back camera of my smartphone using the WebRTC. I used one of WebRTC samples for that. This code works perfectly in browsers on the computer, but on the smartphone with different operating systems (iOS, Android) I get a black screen in the tag <video autoplay></video>. I tried various browsers, in none of them the image capture function worked properly, everywhere a black screen was displayed. What should I do to capture the picture?
I have a http connection, all my smartphones and cameras work fine, so the problem is definitely in WebRTC (or in its use).
For Safari, try adding playsinline to the video element. See this thread for background information.
If that doesn't help you might want to check the mediastream as well as the video elements readyState property.
Related
My website lets a user record and upload a file using some basic html
<input type="file" accept="video/*;capture=camcorder">
Everything works fine; however, I have noticed my video is blurry compared to when I'm just normally recording a video on my iPhone. I've tested on multiple devices and all are blurry. The problem is when using this input element the camera is blurry. Why would the input element make the camera blurry, compared to when I just used the iPhone camera app? Can I add some attributes to the html element? Do I need to specify size? etc.
Here is the difference on my phone. Here is a screenshot when using html input (and yes I tried clicking to focus):
And here is screenshot from normal iPhone camera roll (when not opened through web input):
How can I make this input element camera look as good as the normal iPhone camera app?
I use video.js for vimeo. Played on the desktop in a custom player with my styles, it's good, but on the tablets and mobiles played in a default browse player. Why? I want custom player in mobile too. Can you help me?
In a recent version video.js was updated to use the custom skin on touch devices, so you might try updating your version. But this will still only make a difference on tablets that don't go to fullscreen video. On iOS devices and most(?) android devices, whenever the video goes to fullscreen it uses the native controls, and there's nothing we can do in the browser to change that. Hopefully in the future the devices will adopt the requestFullscreen browser API so we can use custom controls in that context.
My design calls for a video playing in the background of my login screen, exactly like 6snap has.
I would like to avoid the default behavior of stopping the user's music when the video starts to play. My video does not have sound.
I'm using:
<MediaElement Source="MyVideo.mp4" />
I tried setting IsMuted=true which didn't help. Does anyone have an idea how 6snap managed it?
Edit: currently trying the animated gif route. Using the ImageTools 3rd party library and having converted my MP4, it works fine. My 9 second 640x1136 3MB video became a 41MB GIF, so I have to reduce the quality drastically. Still trying to find a better way if possible.
You won't be able to do that with Background Audio and MediaElement, hence as MSDN says:
When a MediaElement control plays audio or video content, any background sounds or media already playing are halted. The app launches the playback experience when the user taps the control. Only one MediaElement control can operate at a time.
It's no matter you have no sound - when you start to play all background sounds/media are halted.
I'm not sure how the App you have mentioned achieved that, but maybe you can try with DirectX/XNA - thought I've not tried this and don't know if that would help.
I'm working on a page that has a list of houses for sale. Each listing has a short video with the option of watching in the page or full screen.
I'm struggling a little with having the videos on the page at one resolution and the fullscreen at a higher resolution - this is needed especially for devices that automatically go fullscreen when the play icon is pressed.
I've had good results with video.js (http://www.videojs.com/) for the page resolution but it doesn't appear to support resolution change on fullscreen. I found this thread with comments about the HTML spec and changing resolution mid-stream: https://github.com/videojs/video.js/pull/233.
I'm told the embedded Youtube player selects the correct resolution automatically but the branded player makes this a non-starter.
Also I've found that in IE10 without Flash that the embedded Vimeo player doesn't function and in Chrome without Flash the Vimeo and Youtube players fail as well... so much for HTML5!
So anyone have a solution for showing video at the correct resolution (low/high) for the state of the player (contained/fullscreen)?
Your question answered a query of mine. It looks like auto switching resolution is still not implemented in videoJS other than for YouTube videos. There is a demo at videoJS Resolution Switcher and you can see in the console that changing window resolution to full screen has no effect.
I've been using the JWPlayer for several years with no problems at all. It reliably supports auto switching has many features and very good support.
I have a web site that opens iframe for video on page, page uses ajax to pull in videos from selected menu. As expected and understood, on iPod touch after selecting video it shows a play button, which brings up video in another screen. However, when the video completes, it returns browser to page prior to one where video was played from. Sequence:
open Page1
go to Page2 which offers videos to play, in iframe
play video
video completes, returns to Page1, not Page2!!
Only happens on iPod touch, so must be issue with how control is returned on video completion.
Any suggestions? If this is not a known problem, I can work up example (currently, need account on site).
Of course, because the browser returns the URL of the page that was displayed before the video was played back. It won't remember the URL of the IFRAME, that had already changed in the process of selecting a video, if I don't get you wrong.
That's a common problem with frames/iframes and one reason why you shouldn't use them.
The solution could be to place your video selection menu in your actual page and not in an IFRAME. This could be achieved by loading in into a DIV via Ajax for example.
Figured this out, sort of. Got it to go back to the right place, but I do believe that it is easy to confuse the iTouch quicktime player and Safari about where to return to.