I have a blazor web app which uses the camera to scan differen qr codes (using the zbar implementation for blazor). On windows in different browsers and on android in different browsers i get to see the feed the camera generates. However Ios and safari keep not showing the camera feed. my code in typescript is the following:
const mediaStream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
facingMode: 'environment',
width: { max: 640 },
height: { max: 480 }
}
});
and in my blazor page i have the following:
<video #ref="video" autoplay loop muted playsinline controls="controls"></video>
Safari show the controlls of the video player correctly without any problem but no camera feed. Sadly i do not have access to the debugger console to see the log from safari to see what is wrong in the page.
i found some references that the camera feed needs to be in a correct size and that the controls needed to be visible for it to work. but to no avail. On the different devices we have set the permission to camera and microphone to allow but we don't see the popup for allowing the camera feed in the browser.
Is there someone who has an idea what is wrong? We haven't tried to install a different browser yet but would that work?
Related
Try to open camera while accessing web page in safari. I'm using an overlay over the frame so user can position the object following the overlay frame.
But when try to capture, it moves to iPhone camera.It's showing another popup to open the camera not directly in the web page i prepared.
Is there any jQuery library that support camera running inside the webpage?
e.g.
webcamtoy.com
pixect.com
Both of web run camera directly in safari. not open another popup iPhone camera
My case, the camera show like this url : https://i.stack.imgur.com/8N1lN.png
We are using LinkedIn to share a link to an HTML5 interactive video. When the link is shared, by default it opens in LinkedIn's browser inside the app. The problem is that when the user starts playing the video, the browser automatically switches to fullscreen, hiding our custom controls. iOS allows inline video playback nowadays with playsinline attribute on the video element, but LinkedIn browser doesn't support the attribute. On iPad the video does play inline though and does not switch to fullscreen. We have tested this bug on iOS versions 10 and 11. On native Safari browser or Google Chrome there's no problem, the video plays inline as intended. The video plays inline in other apps, for example Facebook Messenger's in-app browser. The only problem we have had is with the LinkedIn browser.
Is there any way to play a video inline on iPhone when using the in-app browser without going fullscreen? Or, is there any url scheme that could be used to launch Safari from the in-app browser? Currently the user experience is quite bad when the users have to manually exit fullscreen, which also pauses the video.
Try adding the target=”_blank” attribute. It will open the link provided in a new page, meaning it can open the video in a new page in the web browser.
i try to play a DM video on a page on clicking a custom button. It works perfectly on desktop browsers but not on ios devices.
Here is how i proceed using js sdk and jquery.
function _on_apiready(){
$custom_button.one("click", _playVideo)
}
function _playVideo(e){
player.play();
$custom_button.click(function(){player.togglePlay();})
}
var player = DM.player(dom_el,
{
video:dm_id,
params:{html:1, autoplay:0, info:0, logo:0, related:0},
events:{
apiready: _on_apiready,
timeupdate: _on_progress,
playing: _on_playing,
pause: _on_pause
}
}
);
On ios devices, the video seems to load but doesn't play. I need to press the play button of the player to start the video and then may use my custom button to togglePlay.
Doing something wrong ?
Thx
this question has been answered here already: Dailymotion embedded player on iOS devices (HTML5)
Basically, mobile devices prevent videos from being played automatically, this is why it's not playing with your code. As you say, those devices require an user interaction to first play the video.
I have created a web page that auto plays a full screen background video.
On top of the video is a div that contains text & a link to an external site - this works fine in all desktop browsers.
How do i recreate the same setup to play on mobile devices - would I need to use javascript in order to achieve this?
I have spent many hours trawling google for a definitive answer and am now very confused.
Thanks in advance.
Autoplay for HTML5 video is not allowed on mobile devices such as iOS or Android. You can read this for the whys and hows on iOS.
On iPhone the video plays in the default (fullscreen) Quicktime player. So there is no real background notion (this could be accomplished in a native app where inline playback of video is allowed but not in the Safari/web browser). You would need to stick to an image I guess.
On the iPad or on Android in order to accomplish what you want you will need to bind your video tag to a touch event/button (like when a user 'touch' to enter your site), and on this event initiate the play sequence for the video (in your case the video being set to occupy the full width and height of the viewport).
Thanks
I am using the following code to load a YouTube video.
jQuery(document).ready(function() {
$("#LOAD").click(function(){
data = '<iframe id="placeHolder"> </iframe>';
$('#putItHere').html (data);
$('#putItHere').show ();
document.getElementById ('placeHolder').src='http://www.youtube.com/embed/7R4LJQ7-_6Y';
});
});
Additional buttons exist as well. The problem is that only on an iPad or iPhone, the other buttons are frozen (do not respond to touch) until the video is started. Once it is started, the other buttons function. This occurs only in the 'touch' environment. Using a 'click' environment, the buttons are not frozen. So, for example on a lap top (using a mouse), I can load a video, see that it is the wrong one, and click to load a different video. On an iPad, I can not click (touch) to load a different video until the loaded video has started to play.
This has been logged as a bug with youtube api, it affects iPod/iPad/iPhone family where any links directly underneath an embedded youtube video do not work for the same height as the embedded video. See the below link:
https://code.google.com/p/gdata-issues/issues/detail?id=4569