获取相机和麦克风权限并在网页上显示预览

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 !,你将在网页上看到预览。