Stop Start WebRTC media stream - javascript

I have been working with the Kurento docs to build a one to one recorded call. This is using the adapter.js library. It is working well, however when the streams are appended to the video elements they are extremely stop start.
By this i mean they will play video as expected for a second or so, freeze for a second and then restart playing again.
I have noticed this before in other webRTC libraries, but not all.
Is there something that I may be doing that is causing this? I believe that this is not due to my computer as it works using native code only (no library). Is this a known issue?

chrome currently has an issue where something like this happens if you do not call play() on the video element and don't have autoplay set.
If you code does not play in Firefox at all that might be it.

Related

Audio element play promise rejection even while audio context is in running state

I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.

HTML5 audio/javascript stops working on android(google chrome) when screen is turned off

I have created a Web App which plays music playlist and it works well on desktop browsers and also in mozilla and opera of android. But When I play the songs on Chrome browser of Android and I turn off the screen, it stops after playing the current song. And as soon as I turn the screen on, it starts loading the next song in line.
From my observations, what I have understood is Google Chrome browser on android pauses the javascript code from executing if the screen is turned off till the screen is not waken up again. Is there any way I can prevent my specific library from pausing? Any approach or events?
Some related this question is what I am looking for: JavaScript halts in inactive android Chrome tab
There are so many WebApps which does not stop playing music. Does it need some permissions from Google App Store?
check what happens with youtube, at least few years ago i had an awful time dealing with that and that's what proved to my client it cant be done in the given time frame and budget. that was actually device specific, on some devices it worked fine and on others it didnt. check if it happens on other devices. the only solutions i could think of ware either to prevent screen turn off (on problematic devices or all of them at the beginning), or to build an app and handle onPause event
I don't think that you can change the behaviour of the Chrome app, if they want to save battery in the background and stop the javascript, you won't reactivate it.
There are maybe some other ways to get it working.
Tell your users that they should use Firefox or Opera on their mobile device.
All apps are allowed to play or stream music in the background, so you could make or use an app for your task.
Maybe you can use the default music player app on android. Open a playlist of streams using the app. (I don't know if this is possible, because I have no android device.)
I know that is not exactly what you want, but a maybe a way to get it working.

Best method to display html5 video on IOS

I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.

How can I debug a youtube flash embed's behavior?

A youtube embed I am using seems to freeze (pause and becomes unresponsive) when I mouse over it. It only happens on chrome, not firefox, and I think it is because of those thumnail previews when you go to fastforward but have no way of checking.
Does anyone know how I can track or diagnose what could be changing the youtube players state?
I have a function set up when it becomes paused, stopped, buffering, and youtube's errors (from their API) but none of these are being triggered. Is there something else you'd suggest using? perhaps in firebug or the like?
Use mm.cfg with Vizzy and a debug player to see what events are happening on the Flash side. A heap snapshot may help isolate the issue as well.

Creating two HTML5 video elements with the same source not working

I am trying to do a simple thing but so far I have not had any success and I cannot get why it does not work.
I need two (or several, for that matter) HTML5 video elements to play the same video, but it does not work. Here is the code I have been trying: http://jsfiddle.net/4K8DZ/
Any ideas on why is that?
Thanks
Just ran into this problem myself. I worked around it by adding a query param to the source file of the second video element’s source:
video1.setAttribute("src", "whatever.mp4");
video2.setAttribute("src", "whatever.mp4?random=1");
http://jsfiddle.net/br2bn/
Though I am still not able to just comment, I have to submit this as an answer.
This bug continuous for files > 10mb as long as one of them is buffering, the other one wont work. If you press pause, the other one will work.
I updated the example to demonstarate the bug: http://jsfiddle.net/4K8DZ/23/
Actually, I can play only one video with iPad + Safari and Chrome on Windows7.
With Safari, if I start one video, then another stops.
With Chrome, I got almost the same result.

Categories