1. Description of the problem
Hi, I’m developing multi platform video conference project. I’m using Ionic with CiscoSpark to establish the connection between the users.
CiscoSpark uses RTCPeerConnection from WebRTC to stablish a communication between users. This is done internally, so you don’t need to configure anything.
On browser the app works fine sending and receiving video. But on Android receiving video is not working. I’m not sure if it’s a problem of communication or it’s a video format / codecs problem, but my conclusions are that problem may come from:
- RTCPeerConnection (receiving data)
- Ice Candidate remote description.
- MediaStream
- Bad format (video codecs)
2. Examples
| ------------ Before the call ------------ | ------------ During the call ------------ |
As you can see only the local video can be rendered (top right). The stream remote video is not displayed (middle).
3. Code
home.ts
call.once('localMediaStream:change', () => {
this.selfView.nativeElement.srcObject = call.localMediaStream;
});
call.on('remoteMediaStream:change', () => {
[
'audio',
'video'
].forEach((kind) => {
if (call.remoteMediaStream) {
const track = call.remoteMediaStream.getTracks()
.find((t) => t.kind === kind);
if (track) {
if (kind === 'audio') {
this.remoteViewAudio.nativeElement.srcObject = new MediaStream([track]);
} else if (kind === 'video') {
this.remoteViewVideo.nativeElement.srcObject = new MediaStream([track]);
}
}
}
});
});
home.html
<div>
<audio #remoteViewAudio id="remote-view-audio" autoplay></audio>
<video #remoteViewVideo id="remote-view-video" autoplay></video>
<div id="div-child">
<video #selfView id="self-view" autoplay muted></video>
</div>
</div>
<button ion-button id="dtmf-button" title="connect" color="default" (click)="sendPin();" type="button" full no-margin> Send PIN </button>
<button ion-button id="call-button" title="connect" color="default" (click)="connect();" type="button" full no-margin> Connect </button>
Thanks in advance,
Jordi