一、說明
目前Unity內基于谷歌的WebRTC通訊存在一定技術壁壘，所以選擇與前端HTML結合解決需求。由前端提供JS與HTML，HTML內由前端編寫了可以適配并且可以正常播放WebRTC視頻流；然后在Unity內導入插件“WebViewForWindow”，該插件可以在Unity內通過API加載HTML網頁到UI面板或者三維場景，并且可以對網頁內容進行點擊等操作。從而解決了WebRTC視頻流的功能難點。
二、流程
1.在Unity工程內導入“WebViewForWindow”插件，得到如圖文件夾。
2.將該路徑下的預制體拖到場景內的Canvas下
3.如果填入Url，直接Unity運行可直接加載網頁（但是不適配我們本次功能需求，只做介紹）
4.我們需要通過http接口請求返回WebRTC流（如果是其他方式拿到WebRTC視頻流流程一樣），并且將該流寫入HTML文件內對應的url位置。所以我們要先去布置HTML和JS文件在工程內的位置和應用。我們此次把JS文件以及HTML文件放在了StreamingAssets文件夾下。方便讀取以及后續(xù)適配打包發(fā)布exe版本不需要考慮JS、HTML文件位置和路徑。
5.在Unity內編寫可以讀寫HTML的功能。根據需求讀寫HTML內的WebRTC流的位置即可。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
using System.IO;
public class WriteHtml : MonoBehaviour
{
private List<string> htmlContent = new List<string>();//用于讀寫html的容器
private string path = Application.streamingAssetsPath + "/test.html";//前端網頁位置
private int webrtcIndex = 23;//網頁內webrtc所在行的下標
private string newWebRtc;//傳入的新的webrtc地址
public static WriteHtml _instance;
private void Awake()
{
_instance = this;
}
// Start is called before the first frame update
void Start()
{
//測試
ReadHtmlTxt("填入webrtc視頻流地址")
}
/// <summary>
/// 讀取html
/// </summary>
/// <param name="_newWebRtc">webrtc視頻流地址</param>
public void ReadHtmlTxt(string _newWebRtc)
{
newWebRtc = "var url = '" + _newWebRtc+ "';";
htmlContent = new List<string>();
try
{
// 創(chuàng)建一個 StreamReader 的實例來讀取文件
// using 語句也能關閉 StreamReader
using (StreamReader sr = new StreamReader(path))
{
string line;
// 從文件讀取并顯示行，直到文件的末尾
while ((line = sr.ReadLine()) != null)
{
//Console.WriteLine(line);
Debug.Log(line);
htmlContent.Add(line);
}
}
}
catch (Exception e)
{
// 向用戶顯示出錯消息
//Console.WriteLine("The file could not be read:");
//Console.WriteLine(e.Message);
Debug.Log(e.Message);
Debug.Log("The file could not be read:");
}
WriteHtmlTxt();
}
/// <summary>
/// 寫入html
/// </summary>
public void WriteHtmlTxt()
{
using (StreamWriter sw = new StreamWriter(path))
{
for (int i = 0; i < htmlContent.Count; i++)
{
if (i == webrtcIndex)
{
sw.WriteLine(newWebRtc);
continue;
}
sw.WriteLine(htmlContent[i]);
}
}
}
}
html相關內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webrtc 視頻播放</title>
</head>
<style>
.videoStyle{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
bottom:0;
right:0
}
</style>
<body>
<video id="video_webrtc" controls class='videoStyle'></video>
<script type="text/javascript" src="./jswebrtc.min.js"></script>
<script type="text/javascript">
var video = document.getElementById('video_webrtc');
var url = '填入webrtc視頻流地址';
var option={
video: video,
autoplay: true
}
var player = new JSWebrtc.Player(url,option);
</script>
</body>
</html>
6.然后要通過代碼，讓插件讀取StreamingAssets下的HTML文件即可。
具體代碼調用如下：
聲明變量public CanvasWebViewPrefab canvasWebViewPrefab;調用canvasWebViewPrefab.WebView.LoadUrl(“file://” +Application.streamingAssetsPath + “/test.html”);就可以顯示出來前端的網頁了。具體該預制體的窗口大小可以根據需求調整，插件會進行適配。
要注意的點就是 該預設上的腳本“CanvasWebViewPrefabs.cs”腳本內的Start方法會將進行初始化工作，所以LoadUrl方法要在初始化之后調用?？梢酝ㄟ^if (canvasWebViewPrefab.WebView.IsInitialized) ;該API去判定初始化是否完成。WebView該接口字段為核心內容，其中的API都可以應對需求，如果今后需求有變，可參考該接口的字段和方法。
public CanvasWebViewPrefab canvasWebViewPrefa
canvasWebViewPrefa.WebView.LoadUrl("file://" + Application.streamingAssetsPath + "/test.html");
另外還要說的就是，LoadUrl方法可以讀取本地的HTML文件也可以讀取Http的連接。
如果對插件不熟悉，可以上網查看對應的API和示例場景的內容。文章來源：http://www.zghlxwxcb.cn/news/detail-427927.html
三、windows電腦關于綠幕問題的設置
WebViewForWindow插件的瀏覽器內核是谷歌chrome瀏覽器。
1.如果開啟硬件加速會出現這樣的綠幕情況，需要關閉瀏覽器內設置的硬件加速選項。
2.需要在winodw設置內圖形設置下設置GoogleChrome為高性能模式：
參考下方視頻添加谷歌瀏覽器到圖形性能首選項的列表，并且設置為高性能模式。
設置成功之后顏色會正常文章來源地址http://www.zghlxwxcb.cn/news/detail-427927.html
到了這里，關于Unity內接入WebRTC視頻流的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
