Unity内接入WebRTC视频流

一、说明

	目前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文件夹下。方便读取以及后续适配打包发布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
        {
            // 创建一个 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和示例场景的内容。

三、windows电脑关于绿幕问题的设置

WebViewForWindow插件的浏览器内核是谷歌chrome浏览器。
1.如果开启硬件加速会出现这样的绿幕情况，需要关闭浏览器内设置的硬件加速选项。
在这里插入图片描述

2.需要在winodw设置内图形设置下设置GoogleChrome为高性能模式：
参考下方视频添加谷歌浏览器到图形性能首选项的列表，并且设置为高性能模式。

设置成功之后颜色会正常