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

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

具体步骤如下:

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

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

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

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

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

cs 复制代码
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是我们跟前端页面的通讯函数,可以问前端取得,上层只需要调用这个类封装好的函数,就能实现视频的播放和暂停功能 。

相关推荐
清幽竹客38 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim38 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿42 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
美狐美颜sdk5 小时前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js