I have a web frontend that's able to obtain a MediaStream from a remote RTCPeerConnection.
Once I get this stream, I pass it to a <video> tag with autoPlay set.
(Note: the frontend is in React, so we pass the stream as an srcObject with a ref.)
Everything works fine in Firefox.
In Chrome, the video is only displayed if I do this at application startup:
call navigator.mediaDevices.getUserMedia({ ... }) with either audio or video set to true
take the MediaStream returned by getUserMedia, and keep it in a global or top-level variable
Now, that does not make any sense to me since:
I don't want to ask users for permission to access their microphone or webcam in order to display a video
This only happens in Chrome, and Firefox works fine
This happens both on localhost and https:// "public" domains, so it's probably not a security issue
This does not seem to be affected by playing with the autoPlay, controls, etc... attributes of the <video> tag.
Anything obvious I'm missing here ?
Chrome introduced autoplay restrictions in 2018. These are not in effect when getUserMedia is active.
If your application logic works when Chrome is started with --autoplay-policy=no-user-gesture-required this suggests this is the case. The article also has some background information and possible workarounds like introducing a user gesture.
(and no, these restrictions don't make sense...)
Related
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.
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
I am developing an app which is using a web browser control. In this app I want to restrict all streaming and downloading processes using web browser.
For example, if I click on a song link and if that leads to streaming and playing of that song in the web browser itself, I want to restrict such activity.
Is this possible?
Handle Navigating event of the browser. In the handler check the Uri, if you don't like it you can cancel the navigation.
This approach is not actually very reliable, and definitely should not be used for anything security-related.
It may or may not work for you.
OK, plan “B”.
You can handle browser’s Navigated event, in this event call browser.InvokeScript( "eval", JavaScriptSource ); where JavaScriptSource is the JavaScript code that alters the behavior of your target web site however you want.
The downside of this approach — your JS will likely stop working as soon as the web site owner change their JS to incompatible. If you’re the web site owner, you’re fine with that.
I have one wmv file hosted on virtual directory in IIS 6.0.
When we play this movie with our silverlight player using IE streaming and buffering it works but when I open the same movie in Firefox the movie does not play.
I just want to know is there something specific with silverlight related to browser which should be handled
I think the resoun is some browsers behave differently for mime types.
http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement.mediafailed(v=vs.95).aspx
Register the media element's MediaFailed event if it is your app. This may show more details. Maybe instead of stream a page or message returning to you as I faced of previously.
<MediaElement MediaFailed="eventhandler" .../>
I'd like to use the Notification API to create toast notifications for a Silverlight app designed to run both in and out of the browser, but the NotificationWindow class is only available OOB.
Does there exist anything that can replicate the behaviour inside the app? My idea is to have a container in the bottom right of the screen overlaying all other content. Then, create a wrapper which detects OOB-mode, passing params to the Notification API if possible, or populating and showing my own container if not. Is there anything that does this available?
It seems strange that MS chose not to implement something like this, as has been pointed out before.
Displaying a notification in browser is simple. You just need to use a popup and make it appear in the right place. See the following post as an example.
Now the difference with that approach is that the notification will show inside the browser. In OOB it shows outside the window and it's visible even if the windows is minimized. Due to security reasons it's not possible to directly do this.
Out of interest, Chrome Applications like Tweetdeck and Gmail, are able to display notifications outside of the browser. I think this might be a possiblity, but not exactly a Silverlight and cross browser solution.