獲取相機和麥克風許可權並在網頁上顯示預覽

Created: November-22, 2018

要開始使用 WebRTC，你需要獲得相機和麥克風的許可。為此，你需要遵循以下事項：

adapter.js，你可以從這裡得到它
一個帶有視訊標籤和一點點 js 程式碼的 html 網頁

adapter.js 是 WebRTC 的 JavaScript 墊片，由 Google 在 WebRTC 社群的幫助下維護，提取供應商字首，瀏覽器差異和規範更改。

現在有了這個檔案後，用以下程式碼建立一個 html 檔案：

<!DOCTYPE html>
<html>
    <head>
        <title>My first webrtc example</title>
        <script src="adapter.js"></script>
        <script type="text/javascript">
            function gotStream(stream) {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                var audioContext = new AudioContext();

                // Create an AudioNode from the stream
                var mediaStreamSource = audioContext.createMediaStreamSource(stream);

                // Connect it to destination to hear yourself
                // or any other node for processing!
                mediaStreamSource.connect(audioContext.destination);
                var video = document.querySelector('video');
                var videoTracks = stream.getVideoTracks();
                window.stream = stream; // make variable available to browser console
                video.srcObject = stream;
            }
            function onfail(error) {
                console.log("permission not granted or system don't have media devices."+error.name);
            }
            navigator.getUserMedia({audio:true,video:true}, gotStream,onfail);
            
            
        </script>
    </head>
    <body>
        Welcome to webrtc
        <video id="local" autoplay=""></video>
    </body>
</html>

完成後，儲存此檔案並在瀏覽器中執行。當你執行瀏覽器時，系統會要求你允許此網頁訪問你的網路攝像頭和麥克風。允許它和 whola !,你將在網頁上看到預覽。