UE4解决WebUI或WebBrowser无法播放直播流的问题

问题原因: UE4的WebBrowser自带的cef3为3071版本,默认不支持h264等直播流,导致web里的直播流无法播放。而很流行的WebUI也是基于WebBrowser开发出来的,所以有一样的问题。

解决方案: 修改cef3源码,改成支持h264,重新编译,然后在UE4安装目录下替换相关文件(csdn里能搜索到网友编译好的win64版本)。

替换路径如下:
\Epic Games\UE_4.26\Engine\Binaries\ThirdParty\CEF3\Win64,替换所有文件

\UE_4.26\Engine\Source\ThirdParty\CEF3\cef_binary_3.3071.1611.g4a19305_windows64\Release,只替换libcef.lib

测试网页

url可以替换成其他

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用video.js实现rtmp流的直播播放</title>
    <!--引入播放器样式-->
    <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
    <!--引入播放器js-->
    <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>

<!--vjs-big-play-centered 播放按钮居中-->
<!--poster默认的显示界面,就是还没点播放,给你显示的界面-->
<!--controls 规定浏览器应该为视频提供播放控件-->
<!--preload="auto" 是否提前加载-->
<!--autoplay 自动播放-->
<!--loop=true 自动循环-->
<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来,如data-setup={"autoplay":true}-->

<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
       poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
    <!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
    <source src='rtmp://221.222.249.140/springmvc/hello1' type='rtmp/flv'/>
</video>
<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
    var player = videojs('my-player'); //my-player为页面video元素的id
    player.play(); //播放
//    1. 播放   player.play()
//    2. 停止   player.pause()
//    3. 暂停   player.pause()
</script>
</body>
</html>

其他协助问题分析的技巧

想查看UE4里使用的cef3具体版本信息,在url里输入chrome://version即可打印下面信息,浏览器也可以:

CEF 3.3071.1611.g4a19305
Chromium    59.0.3071.15
OS  Windows
WebKit  537.36 (@b3f9fb3b948d9304d587a127c3e4f47b2ad78927)
JavaScript  5.9.211.4
Flash   
User Agent  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Digital/++UE4+Release-4.26-CL-15973114 UnrealEngine/4.26.2-15973114+++UE4+Release-4.26 Chrome/59.0.3071.15 Safari/537.36
Command Line    "D:/Program Files/Epic Games/UE_4.26/Engine/Binaries/Win64/UE4Editor.exe" --browser-subprocess-path="D:/Program Files/Epic Games/UE_4.26/Engine/Binaries/Win64/UnrealCEFSubProcess.exe" --no-sandbox --product-version="Digital/++UE4+Release-4.26-CL-15973114 UnrealEngine/4.26.2-15973114+++UE4+Release-4.26 Chrome/59.0.3071.15" --lang=en --log-file=D:/Projects/digital-factory/Digital/Saved/Logs/cef3.log --log-severity=warning --resources-dir-path="D:/Program Files/Epic Games/UE_4.26/Engine/Binaries/ThirdParty/CEF3/Win64/Resources" --locales-dir-path="D:/Program Files/Epic Games/UE_4.26/Engine/Binaries/ThirdParty/CEF3/Win64/Resources/locales" --enable-gpu --enable-gpu-compositing --enable-begin-frame-scheduling
Module Path D:\Program Files\Epic Games\UE_4.26\Engine\Binaries\ThirdParty\CEF3\Win64\libcef.dll
Cache Path  D:/***/Saved/webcache

想查看自带浏览器具体支持什么功能,可以在url里输入http://html5test.com/进行检测,如下图:
在这里插入图片描述
在这里插入图片描述

关于cef3

官网: https://bitbucket.org/chromiumembedded/cef/src/master/
The Chromium Embedded Framework (CEF) is an open-source software framework for embedding a Chromium web browser within another application

UE4里如何查web的console?

点击web里的任意元素,按键盘 Shift + Ctrl + I即可弹出console窗口
在这里插入图片描述

Web的一些报错信息

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media
{code: 4, message: "No compatible source was found for this media."}
aliplayer_WAtFU TypeError: c.player.on is not a function

Add a Comment

邮箱地址不会被公开。 必填项已用*标注