Embed h264 stream using HTML5 video tag on iOS

Question

I'm trying to get work Ionic 2 application on iOS. Stream comes from Raspberry pi (gStreamer + Janus WebRTC gateway)

Application is a streaming application with the following logic:

1. Create connection to RPi using Janus WebRTC gateway
2. Obtain stream and create video tag with src: URL.createObjectURL(stream)

I'm getting WebRTC support by the following plugin: https://github.com/eface2face/cordova-plugin-iosrtc

Streaming works great in FireFox browser by ionic serve --platform=ios command.

Streaming is NOT works inside iOS emulator and on a real device. I just got a green rectangle instead of stream, like on the picture above:

gStreamer command:

raspivid --verbose --nopreview --width 640 --height 480 --framerate 15 --bitrate 1000000 --profile main --timeout 0 -o - | gst-launch-1.0 -v fdsrc ! h264parse ! rtph264pay config-interval=1 pt=96 ! udpsink host=127.0.0.1 port=8004

Janus config:

[gst-rpwc]
type = rtp
id = 1
description = RPWC H264 test streaming
audio = no
video = yes
videoport = 8004
videopt = 96
videortpmap = H264/90000
videofmtp = profile-level-id=4D401F\;packetization-mode=1

I have googled a similar problem ( h.264 video won't play on iOS ).

They say iOS safari support Main profile with AVC level 3.1. I'm tried this proposal but it doesn't help me too..

I'm also tried the following "pairs" (profile-level-id + profile) without success: "42e028 + baseline" "640028 + hight"

Answer 1

I know this happend some years ago. In case someone else ends up in this thread. This is a codec issue. I had the same problem and found that using VP9 instead of H264 codec for mobile native app (cordova ionic) displays the video correctly. For some reason using safari ios it works but in the native app does not. Hope that helps!