camera_and_microphone.html | Explore in Territory

<!DOCTYPE html>

<!--
Copyright 2022 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>Requesting Camera and Microphone Permissions</title>
</head>

<body>
  <div id="container">
    <video autoplay="true" id="videoElement" width="480px" height="270px" muted playsinline>
    </video>
    <p>Current volume: <span id="volume">0</span></p>
  </div>
  <script type="text/javascript">
    const video = document.querySelector("#videoElement");
    const audio = document.querySelector("#volume");
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(function(stream) {
        // Video.
        video.srcObject = stream;

        // Audio.
        const audioCtx = new AudioContext();
        const source = audioCtx.createMediaStreamSource(stream);

        const analyser = audioCtx.createAnalyser();
        analyser.fftSize = 64;
        const bufferLength = analyser.frequencyBinCount;
        let dataArray = new Uint8Array(bufferLength);

        // Connect the source to be analysed.
        source.connect(analyser);
        setInterval(function () {
          analyser.getByteFrequencyData(dataArray);
          let averageVolume = dataArray.reduce((a, b) => a + b) / bufferLength;
          audio.innerHTML = averageVolume;
        }, 500);
    });
</script>
</body>
</html>
chromium/ios/testing/data/http_server_files/permissions/camera_and_microphone.html
