I'm using code from here: https://github.com/TwilioDevEd/video-quickstart-php to develop a webRTC web app.
The example application, when running successfully on 2 browsers, creates the following HTML:
<div id="remote-media">
<audio src="blob:https%3A//myAddress.com/8a537e34-9ab2-4bea-a85d-61e5f80b585c"></audio>
<video src="blob:https%3A//myAddress.com/22b23b46-9021-4f15-9ab5-ffb78fec2d48"></video>
</div>
<div id="local-media">
<audio src="blob:https%3A//myAddress.com/740c8e33-cc60-4d1e-b1fe-2c23742e618d"></audio>
<video src="blob:https%3A//myAddress.com/3105d4a2-cd71-4408-8b7c-771cba677829"></video>
</div>
It works on Chrome and Firefox on a PC, and works on Firefox on Android.
Chrome on Android connects, there is video and audio input which is visible and audible on the remote browser, and there is video output - the video streamed from the remote browser. THE PROBLEM: there is no audio output.
I have tried $("audio").autoplay="true";
in the javascript that creates the <audio>
element.
I have opened other web pages from the same Chrome installation on the same device (eg. YouTube) and I have audio and video.
What am I missing?
"On iOS, and Chrome for Android, autoplay doesn’t work; users must tap the screen to play the video." source: https://developers.google.com/web/fundamentals/design-and-ui/media/video/quick-reference?hl=en#autoplay
My solution:
<button id="audioOn" onclick="$('#remote-media > audio')[0].play()">Cant hear? Click me!</button>