視訊直播系統方案之視訊互動遊戲

先上個效果圖

如果在視訊上面實作遊戲呢？

creator的控件都是渲染在canvas上的，如果直接在視訊顯示的位置放置creator的ui控件，控件是會被視訊給蓋住的。當然如果自己寫button樣式放到cc.game.container下雖然是能顯示出來，不過這樣會存在很多未知的問題。是以這個方式被kill了，現在的做法是：

首先.需要修改引擎的代碼CCMacro.js下面的參數ENABLE_TRANSPARENT_CANVAS設定為true。下面是該參數的說明：

順便說一下：creator2.0的引擎每次開啟編輯器會重新編譯引擎，是以修改代碼後隻需要重新開機就能實作效果哦！

其實.修改完引擎後我們還需要把canvas的透明度設定成透明，代碼：

cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);
複制代碼           

最後.再設定video與canvas的顯示層級就可以了

let video0 = document.getElementsByClassName('cocosVideo')[0];
        video0.style.zIndex = 5;

        let gCanvas = document.getElementsByClassName('gameCanvas')[0];
        gCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 10;
複制代碼           

現在你就可以在視訊上面放置任何你想放置的ui并且可以對他們進行操作了。效果圖：

遇到的問題