webrtc之一 getUserMedia

妖狐艹你老母 2022-02-05 00:07 285阅读 0赞

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][http_localhost_9999_webrtc1.html] ，点击Open camera按钮可以启动摄像头，点击允许后可以看到摄像头拍摄的画面；部署到服务器后本文的例子也可以在手机正常访问（请注意需要提供https服务）。

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

![2018111718160012.jpg][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

[http_localhost_9999_webrtc1.html]: http://localhost:9999/webrtc1.html
[2018111718160012.jpg]: https://img-blog.csdnimg.cn/2018111718160012.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220205/7925b21148d34d1ba3d0bbf9099842e6.png