WebRTC video is not rendered

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:

  1. RTCPeerConnection (receiving data)
    • Ice Candidate remote description.
    • MediaStream
  2. 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

Have you able to achieve your goals if yes can you help me do such case?

It’s not a code or plugin problem: I can now resolve this issue in native android.
After changing minSdkVersion from 23 to 27, this issue was resolved.
Probably webrtc protocol is not supported by low minSdkVersion.

Hi, I’m facing the same issue video and audio not working in ionic app . while working fine in browser. Please help me if you have find solution.