Javascript/HTML5：全屏视频源（网络摄像头或类似）答案

【问题标题】：Javascript/HTML5: Fullscreen Video Source (Webcam or similar)Javascript/HTML5：全屏视频源（网络摄像头或类似）
【发布时间】：2019-03-14 18:06:41
【问题描述】：

我可以在此处按照 Fullscreen API 的教程进行操作： https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

HTML：

  <video autoplay
      id = "video"
      src="SampleVideo.mp4">
      <script src="fullscreen.js"></script>
  </video>

JS：

function toggleFullScreen() {
  if (!document.fullscreenElement) {

    var elem = document.getElementById("video");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }

  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    console.log('enter')
    toggleFullScreen();
  }
}, false);

然后我按照这里的教程进行操作：https://www.html5rocks.com/en/tutorials/getusermedia/intro/

JS：

const hdConstraints = {
  video: {width: {min: 1280}, height: {min: 720}}
};

navigator.mediaDevices.getUserMedia(hdConstraints).
  then((stream) => {video.srcObject = stream});

const video = document.querySelector('video');

const videoElement = document.querySelector('video');
const audioSelect = document.querySelector('select#audioSource');
const videoSelect = document.querySelector('select#videoSource');

navigator.mediaDevices.enumerateDevices()
  .then(gotDevices).then(getStream).catch(handleError);

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

function gotDevices(deviceInfos) {
  for (let i = 0; i !== deviceInfos.length; ++i) {
    const deviceInfo = deviceInfos[i];
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label ||
        'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Found another kind of device: ', deviceInfo);
    }
  }
}

function getStream() {
  if (window.stream) {
    window.stream.getTracks().forEach(function(track) {
      track.stop();
    });
  }

  const constraints = {
    audio: {
      deviceId: {exact: audioSelect.value}
    },
    video: {
      deviceId: {exact: videoSelect.value}
    }
  };

  navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream; // make stream available to console
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.error('Error: ', error);
}

我想知道为什么我不能只删除 HTML 中的 src 并将 2 个 js 文件合并在一起并拥有一个全屏网络摄像头。仅对视频（即不是视频源）使用全屏 API 是否有限制？

提前感谢您的帮助！

【问题讨论】：

不，没有这样的限制。你能展示你是如何将这些脚本“合并”在一起的吗？ jsfiddle.net/kv6x2tf7
我可以看到你的作品！我现在来看看有什么不同
好吧，不管有什么不同，你的解决方案都适用于我的环境，所以如果你作为答案发布，我会接受它@Kaiido
由于我不知道使用 Fullscreen API 方法的视频 div 元素会发生什么，我实际上最终使用了更改样式表功能来放大和居中文档中的视频

标签： javascript html video html5-video fullscreen

【解决方案1】：

查看@Kaiido 的回答：https://jsfiddle.net/kv6x2tf7/

HTML：

<select id="audioSource">
</select>
<select id="videoSource">
</select>
<video id="video" muted autoplay></video>

JS：

function toggleFullScreen() {
  if (!document.fullscreenElement) {

    var elem = document.getElementById("video");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }

  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    console.log('enter')
    toggleFullScreen();
  }
}, false);

const hdConstraints = {
  video: {width: {min: 1280}, height: {min: 720}}
};

navigator.mediaDevices.getUserMedia(hdConstraints).
  then((stream) => {video.srcObject = stream});

const video = document.querySelector('video');

const videoElement = document.querySelector('video');
const audioSelect = document.querySelector('select#audioSource');
const videoSelect = document.querySelector('select#videoSource');

navigator.mediaDevices.enumerateDevices()
  .then(gotDevices).then(getStream).catch(handleError);

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

function gotDevices(deviceInfos) {
  for (let i = 0; i !== deviceInfos.length; ++i) {
    const deviceInfo = deviceInfos[i];
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label ||
        'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Found another kind of device: ', deviceInfo);
    }
  }
}

function getStream() {
  if (window.stream) {
    window.stream.getTracks().forEach(function(track) {
      track.stop();
    });
  }

  const constraints = {
    audio: {
      deviceId: {exact: audioSelect.value}
    },
    video: {
      deviceId: {exact: videoSelect.value}
    }
  };

  navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream; // make stream available to console
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.error('Error: ', error);
}

或查看此处提到的样式表更改：

Changing Style Sheet javascript

【讨论】：