I have been trying to get this to work for months but it's still not working. It works fine in all browsers except Google Chrome. The problem is audio doesn't stream in Chrome.
Here's a JS fiddle of the most basic example. https://jsfiddle.net/sq23uxqs/
First I include the new javascript SDK
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
Then in my Javascript
SC.initialize({
client_id: "78c2f0ffbef212328769a921e5663879"
});
SC.stream('/tracks/293').then(function(player){
player.play();
});
Does anyone know why this is or is it a problem with the API?
After investigation it seems to be related to issues with the flash player. Proof is that if you go here chrome://plugins/ and disactivate the flash player it will work again in Chrome. But obviously when developing a site you don't want the site to work just for you.
Soundcloud Api seems to use soundmanager2 as a base to handle audio stream that itself have 2 modes flash and html5. The issue is that if the flash player is avaible it will try to use it and fail while if it's not available it will just use html5 and work right away.
https://github.com/soundcloud/soundcloud-javascript/issues/39
'rtmp' protocol on chrome causes that issue.. reverse the order of available protocols so 'http' will be before 'rtmp'
if (player.options.protocols[0] === 'rtmp') {
player.options.protocols = player.options.protocols.reverse();
}
Related
I've developed an application like netflix which streams video.
I'm working with video.js.
when I try to play unmuted video, it throw error says that
"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https:// goo.gl/xX8pDD"
I can understand what the policy is, but I wonder how autoplay works in Netflix.
Video Preview on netflix works with sound well on chrome and safari.
as soon as I access the video chat page in Netflix party, it turns to play with sound.
I wanna know what they do and apply them to mine.
Thanks.
It seems some sites are whitelisted:
If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound.
I am building a PWA with Agora broadcasting API. I managed to get the video stream playing on desktop Chrome, but not on Safari. The documentation says Safari is supported on both MacOS and iOS, but it doesn't seem like the case.
When I opened the client page on Safari, instead of playing the video stream, it just create a video player without content. I don't see any data being streamed in the inspector view, or there isn't any activity going on at all.
Do I need to do something different with Safari?
Agora.io provided an auto-diagnostic page for their Web SDK, which may be useful for you:
agora_webrtc_troubleshooting
My app accesses the camera for purposes of webrtc, and works correctly.
I'm using pwacompat from Google Labs to add pwa features to my web app.
When running the app as a pwa, everything works fine until I access the camera. Then I get this console.log error:
getUserMedia failedObject {type: "error", msg: "undefined is not an object (evaluating 'navigat…"}
getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
What am I missing?
Update - 19/11/2020
WKWebView can use getUserMedia in iOS 14.3 beta 1.
https://bugs.webkit.org/show_bug.cgi?id=208667
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
Update - 14/09/2019
There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)
https://bugs.webkit.org/show_bug.cgi?id=183201
However WKWebView does not seem to gain getUserMedia functionality:
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
https://bugs.webkit.org/show_bug.cgi?id=185448
iOS 13 and Safari 13 release notes:
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
Edit
In short: A PWA or any website being used on iOS outside of the native Safari app will not be allowed access to getUserMedia as Apple is deliberately blocking access for "Security concerns". This includes any websites saved to the homescreen and/or viewed inside another application such as Facebook. The same restrictions apply to Android however on Android the app developer can ask for Camera permissions and get around this. (This means if you are a website developer and you need camera functionality, you will need to ask Facebook, etc, to rebuild their app to allow this on Android).
See their bug tracker here: http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052
From web based Safari experiences to Native Android, etc. I make crossplatform Apps in web and native for a living. There are several potential problems you will encounter with getUserMedia. To workout what is causing potential problems you should follow this list in order to create a successful application.
Your problem is specifically 1. because you are not successfully querying the API. Nevertheless the MediaCapture from getUserMedia should fail because after fixing 1. you will encounter 2. and 3.
API Polyfil - Always make sure you include the latest getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link for other needed polyfills.
Support - Check CanIUse for getUserMedia support for your target audience and make sure you have the necessary fallbacks. Your fallback for if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false, and if getUserMedia throws and error ideally should be the same.
Permissions - Even though you include pwacompat it does not mean the browser window has the permissions to access the camera. This is because not all browsers are equal! iOS 11 allows getUserMedia access inside of the native Safari app only. However you cannot access getUserMedia on iOS 11 WKWebView or UIWebViews. When you save an app to the homepage it is hosted inside a WKWebView. Thus an experience which works inside of Safari will not work when saved to the homescreen or inside another application. Confusing eh?..! Thus if you want your experience to work you need to tell the user when they open upside another app that they must open the website in safari for real-time camera access. There is no way around this. On Android an app maker can override this permission and allow access to getUserMedia. If you use macOS or Windows you need to make sure the browser shell also has getUserMedia compatibility (e.g. Edge+, Chrome, Firefox, etc)
Security - HTTPS websites can only access the camera (unless on localhost). Check the location prototcol '(location.protocol === 'https:') ? true : false;' to see if you are allowed to get a successful MediaCapture request
The following is a test link I use for platform support:
https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
In my GitHub there are also Android and React-native getUserMedia solutions
I am using an iframe to embed video from Vimeo in our Moodle LMS. My code works perfectly in Chrome, IE and Firefox, but not Safari. I am using the standard Vimeo API to embed the video. I know the issue is SSL related because I can remove the S from HTTP in the url and the embedded video works perfectly. I can't run our LMS in an unsecured environment, and the videos are no threat, but vimeo will not stream their video using ssl because of the overhead. Anyone have a solution that works across all browsers?
Vimeo's Embedding Videos FAQ page indicates that it does support HTTPS. Are you following these instructions?
Can I embed my video on an HTTPS domain?
You sure can!
Our embed code is now “protocol relative,” which means that we adhere to the protocol of your website, whether it’s HTTP or HTTPS.
If you’re using an older version of the Vimeo embed code (with a http://player.vimeo.com URL within it), you’ll simply need to change “http” to “https” and it should start working!
and
Why doesn't my video load when I preview it in my website editor?
Vimeo's embed code uses protocol-relative URLs, meaning that we automatically match the embedded video's protocol to your website's — either HTTP or HTTPS.
If you are previewing your website with a program like Dreamweaver, the video will not load because the program cannot determine the correct protocol to use. That said, the video should work flawlessly once you publish it.
There are two ways you can test your embed:
Add http:// to the player.vimeo.com URL in your website's source code. This should allow you to see the embed in preview mode.
Publish a live test page where you can see the embedded video in action.
Maybe I'm missing something, but hopefully someone here knows better than I...
I'm trying to install Ooyala's video player using their HTML5 API. However, in their HTML5 demo, there's no HTML5 to be found, just a flash player (as in the rest of their examples). Do they not actually have an HTML5 API, or am I doing something wrong? I was expecting video to be dropped in via a <video> tag or object embed or anything other than Flash.
Ooyala has recently upgraded to V3, also they have deprecated AS3 API. V3 supports flash video with HTML5 fallback. Also you can set HTML5 option by default as shown in example below. It's shame they haven't done HTML5 with flash fallback.
You can specify HTML5 platform as shown below. If you don't specify anything, flash version will be used by default with HTML5 fallback.
<script src='http://player.ooyala.com/v3/MzZiMzc1ZDUzZGVlYmMxNzA3Y2MzNjBk?platform=html5'></script>
This demo uses HTML5 version:
http://demo.ooyala.com/product-demos/OOview_Win8/OOView/player.html
More implementation information can be found here:
http://support.ooyala.com/developers/documentation/reference/player_v3_dev_embedplayer.html
The Ooyala Player will use html5 only if it detects that the user is on an iOS device. To test on the Desktop, use Safari. Select Develop -> User Agent -> (Any iOS Device), then open the link.
I am not entirely sure about this. However, I think that Ooyala did not launch HTML5 API yet. As far as I know, Brightcove just launched a Limited Availability of the HTML5 API, and I was under the impression that this was a step ahead in the HTML5 video market.