Expo React Native应用HLS流真机仅1FPS的性能问题排查

问题现象 #

• 使用expo run:ios启动的iOS模拟器中，HLS（.m3u8）直播流播放流畅
• 以下场景帧率骤降至约1FPS，严重卡顿：
  • 通过Expo Go打开应用时
  • 使用Xcode构建的Release版本本地播放时
• Release版本通过AirPlay投屏到电视时播放恢复正常，推测问题出在iPhone本地渲染环节

已尝试的播放器方案 #

测试了多种播放器组件，均出现相同卡顿问题，且已按官方文档完成安装配置、调整过多种参数：

• react-native-video
• expo-av
• expo-video
• 集成HTML5视频播放器的WebView

关键发现：转码后可解决但成本过高 #

通过ffmpeg对原流进行转码后，Expo Go及Release版本均可流畅播放，转码参数如下：

-vf format=yuv420p,colorspace=bt709
-profile:v main -level 3.1
-c:v libx264
-c:a aac
-b:a 128k

但我们使用node-media-server搭配ffmpeg，转码会带来极高服务器负载，无法作为长期方案。

原流详情 #

.m3u8文件内容 #

#EXTM3U
  #EXT-X-VERSION:3
  #EXT-X-TARGETDURATION:2
  #EXT-X-MEDIA-SEQUENCE:1
  #EXTINF:2.009011,
  1581F5BKB241400F01N0-53-0-0-1.ts
  ...

ffprobe检测输出 #

[STREAM]
index=0
codec_name=h264
codec_long_name=H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10
profile=High
codec_type=video
codec_tag_string=[27][0][0][0]
codec_tag=0x001b
width=1920
height=1088
coded_width=1920
coded_height=1088
closed_captions=0
film_grain=0
has_b_frames=0
sample_aspect_ratio=N/A
display_aspect_ratio=N/A
pix_fmt=yuv420p
level=40
color_range=tv
color_space=smpte170m
color_transfer=smpte170m
color_primaries=bt470bg
chroma_location=left
field_order=unknown
refs=1
is_avc=false
nal_length_size=0
id=N/A
r_frame_rate=30/1
avg_frame_rate=0/0
time_base=1/90000
start_pts=4081411
start_time=45.349011
duration_ts=N/A
duration=N/A
bit_rate=N/A
max_bit_rate=N/A
bits_per_raw_sample=8
nb_frames=N/A
nb_read_frames=N/A
nb_read_packets=N/A
extradata_size=30
DISPOSITION:default=0
DISPOSITION:dub=0
DISPOSITION:original=0
DISPOSITION:comment=0
DISPOSITION:lyrics=0
DISPOSITION:karaoke=0
DISPOSITION:forced=0
DISPOSITION:hearing_impaired=0
DISPOSITION:visual_impaired=0
DISPOSITION:clean_effects=0
DISPOSITION:attached_pic=0
DISPOSITION:timed_thumbnails=0
DISPOSITION:non_diegetic=0
DISPOSITION:captions=0
DISPOSITION:descriptions=0
DISPOSITION:metadata=0
DISPOSITION:dependent=0
DISPOSITION:still_image=0
DISPOSITION:multilayer=0
TAG:variant_bitrate=0
[/STREAM]
[FORMAT]
nb_streams=1
nb_programs=1
nb_stream_groups=0
format_name=hls
format_long_name=Apple HTTP Live Streaming
start_time=45.349011
duration=N/A
size=2300
bit_rate=N/A
probe_score=100
[/FORMAT]

请求帮助 #

希望找到无需服务器转码的解决方案，解决Expo Go及iOS Release版本本地播放HLS流的卡顿问题。

内容的提问来源于stack exchange，提问作者Sithys