细读ue4像素流的start方法

let qualityStatus = document.getElementById("qualityStatus");
获取这个div

 

 

 

if (qualityStatus) {
    qualityStatus.className = "grey-status";
}
这里赋予了它一个class，这个class是空样式。

let statsDiv = document.getElementById("stats");

 

 获取以上的div。

if (statsDiv) {
    statsDiv.innerHTML = 'Not connected';
}
初始化还没有连接的时候，会出现 not connected，证明之后这个会被赋值。

if (!connect_on_load || is_reconnection) {
    showConnectOverlay();
    invalidateFreezeFrameOverlay();
    shouldShowPlayOverlay = true;
    resizePlayerStyle();
} 

connect_on_load 和is_reconnection初始值为空，未被赋值。
由于这是非空判断，所以进入方法内。

showConnectOverlay方法

let startText = document.createElement('div');创建div

startText.id = 'playButton';
startText.innerHTML = 'Click to start';这是点击连接的按钮，赋予文字点击这里开始

setOverlay('clickableState', startText, event => {
    connect();
    startAfkWarningTimer();
});
进入setOverlay方法

let videoPlayOverlay = document.getElementById('videoPlayOverlay');
if (!videoPlayOverlay) {
    let playerDiv = document.getElementById('player');
    videoPlayOverlay = document.createElement('div');
    videoPlayOverlay.id = 'videoPlayOverlay';
    playerDiv.appendChild(videoPlayOverlay);
}
试图获取videoPlayOverlay的div，如果没有有，就创建一个div，并放在player标签里面。videoPlayOverlay作用未明。

// Remove existing html child elements so we can add the new one
while (videoPlayOverlay.lastChild) {
    videoPlayOverlay.removeChild(videoPlayOverlay.lastChild);
}
去除videoPlayOverlay里面的全部标签
将上面传进来的点击开始标签加进来。
以上的操作是，我要创建

 

 所以先查找player标签，在标签里面创建videoPlayOverlay标签，然后再把这个点击标签添加进去。

if (onClickFunction) {
    videoPlayOverlay.addEventListener('click', function onOverlayClick(event) {
        onClickFunction(event);
        videoPlayOverlay.removeEventListener('click', onOverlayClick);
    });
如果存在点击事件，对videoPalyOverlay标签绑定点击事件，然后点击后取消绑定事件。

// Remove existing html classes so we can set the new one
let cl = videoPlayOverlay.classList;
for (let i = cl.length - 1; i >= 0; i--) {
    cl.remove(cl[i]);
}

videoPlayOverlay.classList.add(htmlClass);
去除所有的样式，添加新的样式。

 

 对应的样式如上，居中样式。

回到start方法，

showConnectOverlay();的作用就是添加点击连接事件、设定样式、绑定方法

invalidateFreezeFrameOverlay();百度翻译士无效覆盖的意思

freezeFrameOverlay.style.display = 'none';
freezeFrame.valid = false;
freezeFrameOverlay.classList.remove("freezeframeBackground");

if (webRtcPlayerObj) {
    webRtcPlayerObj.setVideoEnabled(true);
}

以上是关于freezeFrameOverlay的样式，对于freezeFrameOverlay的出现频率非常的高，但是还是不知道是什么，未知情报。

shouldShowPlayOverlay = true;翻译是是否进行展示

resizePlayerStyle();方法 翻译是调整播放器的尺寸

//获取player div 空的div,应该要对其添加元素
let playerElement = document.getElementById('player');
//如果存在这个标签,标签存在于player.html
if (!playerElement)
    return;

updateVideoStreamSize();方法更新像素流的尺寸

if (!matchViewportResolution) {
    return;

匹配视口分辨率，默认matchViewportResolution是空的，所以会直接返回.暂时没有找到不直接返回的因素。