# YouTube embed with CSS3DRenderer

###### tags: `babylon`

> Date created: 2021.08.09

[toc]

## References

- [Youtube videos on a mesh (port of CSS3DRenderer.js)](https://forum.babylonjs.com/t/youtube-videos-on-a-mesh-port-of-css3drenderer-js/10600/3)
- [Babylon.js Playground](https://playground.babylonjs.com/#14KRGG#490)

## Issues

### (Solved) 1. 只有聲音跑出來，濾鏡空間雖然被切出來但沒看到影像


- 因為濾鏡空間顯示出背景，所以嘗試把背景拿掉 → 變成白底
- 原本把 `css3DContainer` 塞在 `renderCanvas`之前，改為塞在 `background` div 之前

    // youtubePlayer.js
    let webGLContainer = document.getElementById('background')
    // add css3DContainer behind WebGl scene
    webGLContainer.insertBefore(css3DContainer, webGLContainer.firstChild)

    <div class="background" id="background">
       <!-- 改成塞在這邊 -->
       <div class="loading" id="loadingScreen">
          <img id="loadingLogoImage" src="https://bjsassets.blob.core.windows.net/textures/boothData/booth_osleepy/osense_logo.png">
       </div>
       <div class="main" id="entryBtn">
          <div class="row">
             <div class="button-group">
                <button type="button" class="entryBtn" onclick="createScene('zhtw', osleepyData.data)">Standard</button>
             </div>
          </div>
       </div>
       <canvas id="renderCanvas" tabindex="1">
          <!-- 原本塞在這邊 -->
       </canvas>
    </div>

### (Solved) 2. 視窗一旦 resize，YouTube 影片位置就跑掉；頁面重新整理後就沒有問題


- Solution: window resize 時重新 `setSize`

    const css3DRenderer = setupRenderer(videoViewMesh, UrlYoutube, scene)
      css3DRenderer.setSize(window.innerWidth, window.innerHeight) // 加這個讓一開始進去的時候不會有錯或沒顯示

      scene.onBeforeRenderObservable.add(() => {
        css3DRenderer.render(scene, scene.activeCamera)
      })

    	// window resize 就重新 setSize
      window.addEventListener('resize', function () {
        css3DRenderer.setSize(window.innerWidth, window.innerHeight)
      }, false)

- **PC 可行，Windows / Mac Safari 都沒問題**
- Android 手機垂直進去時正常 → 轉水平正常 → 再轉垂直就整個 babylon scene 的部分跑掉，變成在左上角
- 如果是先水平 → 再垂直，**只要一轉成垂直就壞掉**
- **解法: CSS position 設為 fixed**

        .background {
            width: 100%;
            height: 100%;
            position: fixed;
        }

- iOS 手機，垂直或水平旋轉都不會發生跑版成 1/4 的問題，但 **YouTube 影片顯示有問題，無法完整顯示**
- 以上兩種整合進 Vue，另有 3D renderer 沒對準的問題 (受到 Vue 專案 css style 影響)


### (Solved) 3. iOS 不論是 Chrome 還是 Safari，顯示都有問題 (只顯示 1/4)，Android 沒有問題

- **Solution**

// 原本是這樣
objectMatrixWorld = BABYLON.Matrix.FromArray(innerMatrix)
if (this.isIE) {
    // IE will round numbers like 1e-005 to zero so we need to scale whole matrix up.
    // Side-effect is reduced accuracy with CSS object mapping to Babylon.js object
    objectMatrixWorld = objectMatrixWorld.scale(100)
}

// 把它改成以下
objectMatrixWorld = BABYLON.Matrix.FromArray(innerMatrix)
objectMatrixWorld = objectMatrixWorld.scale(100)

- Ref: [Babylon.js Playground](https://playground.babylonjs.com/#1DX9UE#220)


### (Solved) 4. Mac Safari 無法開啟，會報錯；舊版手機 iOS 無法開啟

- Error: `Unexpected token '='. Expected an opening '(' before a method's parameter list`
- ~~Solution: 必須使用 babel~~

[SAFARI : Unexpected token '='. Expected an opening '(' before a method's parameter list](https://stackoverflow.com/questions/60026651/safari-unexpected-token-expected-an-opening-before-a-methods-paramet)

- i7 直接會打不開網頁
- iOS version: 12.2 無法、10.3 無法 (沒有整進 Vue、沒有使用 babel)
- Solution: **換成整進 Vue 的版本之後就可以，猜測是 babel 的原因**

### (Solved) 5. iOS single tab 的時候會沒對齊


- 整個 Babylon.js view 的比例都不對
- 已解決 (CSS)

### 6. 使用目前 Babylon.js 截圖方法，截不到影片


- `BABYLON.Tools.CreateScreenshotUsingRenderTarget`
- 因為是在 DOM 裡，Babylon.js 截圖時只會截 render canvas 上面
- 可能解法
- 截圖時將 mesh texture 暫時換為預設材質
- 或嘗試別的截圖方式
- 看能否調整 render target 讓 iframe 也可以被截到?

### 7. iframe 控制播放、暫停、全螢幕

- 電腦部分，參考這個 demo，偵測 `mouseout` 切換 iframe & Babylon scene 之間的 `pointerEvents` 控制: [https://playground.babylonjs.com/#1DX9UE#183](https://playground.babylonjs.com/#1DX9UE#183)
- 手機 (觸控) 端
- 做法一 (同電腦)：切換 `pointerEvents` 直接控制 iframe
- Touch event equivalent to `mouseout` → X
- 暴力解: Add `setTimeout`每次點擊完 YouTube 影片就把 body 的 `pointerEvents`改回 `auto`
- **手機上控制 iframe 的地方太小，就算可以操控但可用性不高** (電腦版，可以點擊影片正中間做暫停)
- 手機點擊 YouTube 會自動跳全螢幕
- Solution: `playsinline=1`
- 做法二：直接用 [youtube-player](https://www.npmjs.com/package/youtube-player) npm 套件處理

### 8. 手機無法自動播放

- YouTube 的部分，透過 API 控制，Android 可自動播放，iOS 無法 (安全性問題，被擋掉)

### 9. Loading 時水平轉垂直會有問題

## Features

### 1. 是否可用於多攤位環境?

- 現在的寫法不支援，不確定改 code 之後有沒有辦法
- 一直計算 3D matrix on CSS，效能有疑慮
- 如果 YouTube 跟 YouTube 有相互重疊，理論上就沒有辦法

### 2. 是否能以 iframe 方式嵌入別的網站?

- 可以
- 但在手機上無法直接控制 iframe 內容

### 3. 是否可以嵌入直播連結?

- 可以 (已測: YouTube, FB)
- 電腦可自動播放，手機無法

## Limitations

- 會受到頁面上所有的 CSS style 影響，容易跑版 (盡量放在 DOM 最外層)
- 一定不能放入 VR 環境中 (因為是用 CSS render)
- 一定需要有 babel，舊版 iOS 才跑得出來，不然就是要改寫法看看行不行
- 在算力低 / frame rate 低 / 狀態不佳的裝置上，移動視角時會看到它有破綻，因為一直在算影片的 3D matrix 和位置。有可能很明顯


- 在特定使用方式下，還是會有小跑版的問題
- iOS 手機無法自動播放
- 使用目前 Babylon.js 截圖方法，截不到 iframe 嵌入的影片
- 尚不支援多攤位環境
- 需確認各瀏覽器 & 裝置的支援度
- 目前測的裝置種類有限