[UE]pixelStreaming - Chrome浏览器无法自动播放音频视频的问题，Uncaught(in promise) DOMException

问题描述

---

       Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

问题背景

---

       现有 a.html 和 b.html 两个网页，通过点击 a.html 中的按钮跳转到 b.html，其中 b.html 是pixelStreaming的像素流送前端显示界面。

       在实际测试时，发现跳转到 b.html 后UE4的渲染画面并没有显示出来。使用 ctrl+shift+I 切换到console控制台发现有错误提示：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 

问题分析

---

       通过检索资料后大致明白原因了：在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。 

       其实Chrome只是不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

解决方法

---

       比较常规的做法是：为video标签设置muted属性，使它静音，这样视频就能自动播放了（会导致没有声音）；然后待用户在网页上有了任意触发后，再将muted去掉。

       实践：找到 app.js 中 showPlayOverlay() 方法，在 webRtcPlayerObj.video.play(); 前面加上 webRtcPlayerObj.video.muted = true; 即可。

/// app.js

function showPlayOverlay () {
	var img = document.createElement('img');
	img.id = 'playButton';
	img.src = '/images/Play.png';
	img.alt = 'Start Streaming';
	// setOverlay('clickableState', img, event => {
	// 	if (webRtcPlayerObj)
	// 		webRtcPlayerObj.video.play();

	// 	requestQualityControl();

	// 	showFreezeFrameOverlay();
	// 	hideOverlay();
	// });
	if (webRtcPlayerObj) {
		//webRtcPlayerObj.video.autoplay="autoplay";
		webRtcPlayerObj.video.muted = true;//禁止音频，使得视频能自动播放
		webRtcPlayerObj.video.play();
	}

	requestQualityControl();

	showFreezeFrameOverlay();
	hideOverlay();
	shouldShowPlayOverlay = false;
}

参考

---

http://01vh0.cn/RDHzf