Untiy中如何嵌入前端页面，从而播放推流视频？

最近工作中频繁用到unity,虽然楼主之前也搞过一些UNTY游戏开发项目，但对于视频这块还是不太了解，所以我们采用的方案是在Unity里寻找一个插件来播放推流视频。经过我的一番寻找，发现了这款Vuplex 3D WebView，它可以完美的打通Unity和前端js。

具体步骤如下：

下载资源包，如果觉得收费，可以找楼主要资源哈。这里就不挂链接了。

在资源包里包含了很多个例子，其中有一个叫做SimplewebvidwDemo的例子，大家可以参照这个例子来实现自己需求。

这个插件本身也带有很多的说明文档，如果觉得不太懂怎么用，可以看看文档，只不过文档是英文的。

新建一个预制体，添加脚本，这个预制体也是例子里的， 我们可以改动尺寸调整大小哈。

接着就是写一个自己的类，来执行视频加载的逻辑。具体可以看看我下面的写法

public class SimpleView : MonoBehaviour
{
   public  WebViewPrefab _webViewPrefab;
    // Start is called before the first frame update
    void Awake()
    {
        Web.SetUserAgent(false);
    }

    // Update is called once per frame
    async void Start()
    {

        // The WebViewPrefab's InitialUrl property is set via the editor, so it
        // automatically loads that URL when it initializes.
        _webViewPrefab = GameObject.Find("WebViewPrefab").GetComponent<WebViewPrefab>();
        //  _setUpKeyboards();

        // Wait for the WebViewPrefab to initialize, because the WebViewPrefab.WebView property
        // is null until the prefab has initialized.
        await _webViewPrefab.WaitUntilInitialized();
        _webViewPrefab.WebView.LoadUrl("streaming-assets://index.html");
        // The WebViewPrefab has initialized, so now we can use the IWebView APIs
        // using its WebViewPrefab.WebView property.
        // https://developer.vuplex.com/webview/IWebView
        _webViewPrefab.WebView.UrlChanged += (sender, eventArgs) => {
            Debug.Log("[SimpleWebViewDemo] URL changed: " + eventArgs.Url);
        };
        await _webViewPrefab.WebView.WaitForNextPageLoadToFinish();
        // _webViewPrefab.WebView.PostMessage("{\"type\": \"greeting\", \"message\": \"Hello from C#!\"}");
        /* await _webViewPrefab.WebView.ExecuteJavaScript(@"
startPlay('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F', sdkList.sdk2, setSrcObjectCallback2)
");*/
      //  await _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
        //
    }

    public void PlayTwoVideoUrl(string url)
    {
       // url = "webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F";// webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F;
        var value = string.Format(@"androidToJs_layoutTwo('{0}')", url);
        Debug.Log(@value);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
        //  _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
    }

    public void PlayOneVideoUrl(string url)
    {
        // url = "webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F";// webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F;
        var value = string.Format(@"androidToJs_layoutOne('{0}')", url);
        Debug.Log(@value);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
        //  _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
    }

    public void PlayThreeVideoUrl(string url)
    {
        // url = "webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F";// webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F;
        var value = string.Format(@"androidToJs_layoutThree('{0}')", url);
        Debug.Log(@value);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
        //  _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
    }

    public void PlayFourVideoUrl(string url)
    {
        // url = "webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F";// webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F;
        var value = string.Format(@"androidToJs_layoutFour('{0}')", url);
        //Debug.Log(@value);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
        //  _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
    }

    public void PlayFiveVideoUrl(string url)
    {
        // url = "webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F";// webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F;
        var value = string.Format(@"androidToJs_layoutFive('{0}')", url);
        Debug.Log(@value);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
        //  _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_back('webrtc://148.70.213.246:21985/rtmplive/15-43-48-0C-11-1F-1E-41-4D-64-30-00-00-C0-D5-88-AF-02-3F')");
    }



    public  void  InitVideo()
    {
        _webViewPrefab.WebView.ExecuteJavaScript(@"androidToJs_close()");
    }

    public void SetVideoLayout(string layout ="1")
    {
        var value = string.Format(@"changeLayout('{0}')", layout);
        _webViewPrefab.WebView.ExecuteJavaScript(@value);
    }
}

像里面的androidToJs_layoutThree是我们跟前端页面的通讯函数，可以问前端取得，上层只需要调用这个类封装好的函数，就能实现视频的播放和暂停功能 。