webrtc之一 getUserMedia

最新推荐文章于 2024-08-12 08:42:28 发布

盛桃云

最新推荐文章于 2024-08-12 08:42:28 发布

阅读量1k

点赞数

分类专栏：前端文章标签： webrtc

本文链接：https://blog.csdn.net/bowei026/article/details/89792770

版权

前端专栏收录该内容

19 篇文章 3 订阅

订阅专栏

WebRTC最基本的功能是对视频和音频的控制，本文介绍getUserMedia对摄像头的控制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="WebRTC demo1">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <title>getUserMedia</title>
</head>
<body>

  <div id="container">
    <video id="video" autoplay playsinline></video>
    <button id="showVideo">Open camera</button>
    <div id="errorMsg"></div>
  </div>

<script type="text/javascript">
const constraints = { audio: false, video: true };

function handleSuccess(stream) {
  video = document.querySelector('video');
  video.srcObject = stream;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    let v = constraints.video;
    errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
  } else if (error.name === 'PermissionDeniedError' || error.name === 'NotAllowedError') {
    errorMsg('拒绝了授权访问该设备');
  } else {
    errorMsg(`getUserMedia error: ${error.name}`, error);
  }
}

function errorMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}

document.querySelector('#showVideo').addEventListener('click', e => init(e));
</script>
</body>
</html>

配置好nginx，启动nginx服务器后访问 http://localhost:9999/webrtc1.html ，点击Open camera按钮可以启动摄像头，点击允许后可以看到摄像头拍摄的画面；部署到服务器后本文的例子也可以在手机正常访问（请注意需要提供https服务）。

本文内容到此结束，更多内容可关注公众号和个人微信号：