2022前端最新面试题知乎 2022前端最新面试题( 七 )

在与Edge进行对比后可以发现，Edge只通过容器读取色彩空间，而没有SPS读取的逻辑，这会导致HDR视频无法正确ToneMapping，最终渲染视频异常，而在Chromium内则一切正常。
（左图为Edge在处理HLG视频时ToneMapping异常的问题）
在上述步骤后，硬解步骤已完成的差不多，目前所有的CL和Fix已合入Chromium104（main分支），Windows平台具体实现过程和代码Diff也可以追溯这个Crbug（）。
说了一堆技术实现可能会很枯燥，下面来到最有趣的环节：“与竞品对比” 。为了公平起见，使用原生HTML+原生Video标签方式，排除一切外界干扰完成一个基础的测试页面，并收集了28个不同Profile、HDR/非HDR、不同位深的测试Case（测试素材来自网络：-cdn-tos.bytegoofy.com/obj/tcs-client/resources/video_demo_hevc.html），下面开始测试：
我们首先进行HDR能力测试，测试选择了多个PQ、HLGTransfer的HEVC视频。
毕竟不是所有人都使用HDR显示器，甚至可以说99.99%的用户仍在使用SDR显示器，因此HDR视频是否能在普通SDR显示器正确显示，是非常重要的，将HDR视频转换为SDR视频的过程一般被称作做ToneMapping，因此下述测试主要测试浏览器是否支持ToneMapping 。
（左图：Edge102Windows，右图:Chromium104Windows）
可以看到在Windows平台，Edge在处理PQ曲线的HDR视频时存在ToneMapping异常的问题，而Chromium可以正常ToneMapping，这一轮Chromium胜。
（左图：Safari15.3macOS，右图:Chromium104macOS）
在macOS平台，Safari的对PQHDR视频的ToneMapping处理的很棒，Chromium104也同样不错，二者效果完全相同，而且由于macOS支持EDR（简介：），即使使用SDR显示器，其显示效果相比Windows平台更佳（Mac会适当扩展高光），两款浏览器这一轮打平。
（EDR简介，图片来自Apple）
接着我们将显示器调为HDR模式，并开启操作系统的HDR输出。
（左图：Edge102Windows，右图:Chromium104Windows）
可以看到，如果视频是mov，一般都会在封装容器会写入色彩空间，此时二者区别不大，都可以较好在HDR显示器以HDR效果显示PQHDR视频内容，但如果视频是mp4封装，则由于mp4一般不写入色彩空间到封装容器，Edge存在PQ视频显示异常的问题，这一轮Chromium胜。
接着我们测试macOS，在macOS播放HDR视频，无需任何设置，因为其支持EDR功能，我们选择支持HDR的XDR显示器Mac(新款M1Pro/MaxMacbookPro）进行测试，正确显示HDR视频无需任何设置。（注：如果需要为外置显示器强制启用HDR，需要使用支持的显示器并在设置-显示器面板开启“高动态范围”选项）
（左图：Safari15.3macOS，右图:Chromium104macOS）
可以看到在macOS平台，Safari对PQHDR视频的ToneMapping处理的很棒，Chromium104也同样不错，因此二者显示效果完全相同（由于macOS是默认EDR，无需额外设置），这一轮打平。
（左图：Edge102Windows，右图:Chromium104Windows）
可以看到Edge在处理HLG视频时，如果色彩空间没有写入封装容器，则无法正确读取色彩空间，导致存在偏色问题，而Chromium目前会通过容器读取色彩空间，如果不存在，则继续从SPS读取色彩空间，这可以保证所有HLG视频均可正确ToneMapping，这一轮Chromium胜。
（左图：Safari15.3macOS，右图:Chromium104macOS）
在macOS平台，Safari的对PQHDR视频的ToneMapping处理的很棒，Chromium104也同样不错，二者效果完全相同，而且由于macOS支持EDR（简介），即使使用SDR显示器，其处理效果相比Windows平台更佳（Mac不会强制压高光），两款浏览器这一轮打平。
（容器未写入色彩空间情况，左图：Edge102Windows，右图:Chromium104Windows）
（容器写入色彩空间情况，左图：Edge102Windows，右图:Chromium104Windows）