Subversion Repositories php-qbpwcf

Rev

Blame | Last modification | View Log | RSS feed

<?php

namespace qbpwcf;
        
include("../allInOne.php");

?>

<div style="text-align:center;">
        <video style="width:90vw;height:90vh;" id="video" autoplay></video>
</div>

<script>

//在 load event 之前的狀態與事件綁定
//https://developer.mozilla.org/zh-TW/docs/Web/API/Document/readyState
//async function()代表該function 遇到 await 會等待
document.onreadystatechange = async function () {

        // alternative to DOMContentLoaded event
        //文件已經完成讀取和解析,但是其他的子資源,如「圖片樣式層次表」,仍然在讀取。這個狀態表示 DOMContentLoaded 事件已經被觸發。
        //可以開始使用 DOM 元素。
        if (document.readyState == "interactive"){
        
                //debug
                console.log('文件已經完成讀取和解析,但是其他的子資源,如「圖片樣式層次表」,仍然在讀取。這個狀態表示 DOMContentLoaded 事件已經被觸發.可以開始使用 DOM 元素');
        
                }//if end

        // alternative to load event
        //文件及子資源都完成讀取。這個狀態表示 load 事件即將被觸發。
        else if (document.readyState == 'complete'){
                
                //參考資料
                //https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
                
                //capture options
                var displayMediaOptions = {
                        video:{
                                cursor: 'always'
                                },
                        audio:{
                                echoCancellation: true,
                                noiseSuppression: true,
                                sampleRate: 44100
                                }
                        };
                
                //詢問使用者要分享的畫面
                try{            
                        //等待使用授權後再執行
                        document.getElementById('video').srcObject=await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                        }
                catch(err){
                        //error log
                        console.error('Error: ' + err);
                        }
                }
                
                
        }




</script>