WebRTC 之 MediaStream: 用你的摄像头拍照

概述

先看一下效果，你可以在这里亲自动手试试 https://www.fanyamin.com/webrtc/examples/media_stream.html

WebRTC 中对媒体流 Media Stream 做了内置的支持，可以从电脑的摄像头，麦克风中捕获音频或视频流，并在 HTML5 所支持的 <video> 或 <audio> 或 <canvas> 中回放或展示。

MediaStream 代表音频或视频数据流, 一个 MediaStream包含零个或多个 MediaStreamTrack ,

MediaStreamTrack 代表各种 audio 或 video track, 一个 MediaStreamTrack 包含一个或多个 Channels .

Channel 代表媒体流的最小单元, 例如音频信号关联到一个给定的 Speaker , 如立体声道的左右声道.

MediaStream对象具有单个输入和单个输出。由getUserMedia() 方法生成的MediaStream对象称为本地对象，其输入之一是用户的摄像机或麦克风。

非本地MediaStream可能表示为媒体元素(例如<video>或<audio>)，通过网络发起并通过WebRTC RTCPeerConnection API 获得的流，或者使用Web Audio API MediaStreamAudioSourceNode创建的流。

MediaStream对象的输出链接到使用者。它可以是媒体元素，例如<audio>或<video>，WebRTC RTCPeerConnection API或Web Audio API MediaStreamAudioSourceNode。

MediaStream

API

var promise = navigator.mediaDevices.getUserMedia(constraints);

基本用法

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}
// or not use promise
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});

实例

开始提到的实例怎么实现呢，其实很简单

1)先创建一个 media_stream.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> WebRTC Examples</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script type="text/javascript" src="js/util.js" ></script>
<script type="text/javascript" src="js/media_stream_demo.js"></script>
<script>
    $(function() {
        $(".navbar-static-top").load("navbar.html", function() {
            $(".navbar-static-top li.dropdown").addClass("active");
            $(".navbar-static-top a[href='echotest.html']").parent().addClass("active");
        });
    $(".footer").load("footer.html");
    //-----------------------------------------------------------//

    weblog("-------- Available User Devices -----------")
    listUserDevices();

    const constraints = window.constraints = {
      audio: false,
      video: true
    };

    const resSelect = document.querySelector('select#resolution');
    var selectedRes = resSelect.value;


    switch(selectedRes) {
      case "qvga":
        constraints.video = {
          mandatory: {
            maxWidth: 320,
            maxHeight: 240
          }
        }  
        break;
      case "vga":
        constraints.video = {
            mandatory: {
              maxWidth: 640,
              maxHeight: 480
            }
          }  
        
        break;
      default:
        constraints.video = {
            mandatory: {
              maxWidth: 1024,
              maxHeight: 768
            }
          }  
        
        break;
    }      
    
    const filterSelect = document.querySelector('select#filter');
    filterSelect.onchange = function() {
      const video = document.querySelector('video');
      video.className = filterSelect.value;
    };

    document.querySelector('#open').addEventListener('click', e => openCamera(e, constraints));

    document.querySelector('#close').addEventListener('click', e => closeCamera(e, constraints));

    document.querySelector('#snapshot').addEventListener('click', e => takeSnapshot(e));
    
    });
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
</head>
<body>

<!-- 
  <a href="https://github.com/walterfan/webrtc-primer"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<nav class="navbar navbar-default navbar-static-top">
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>WebRTC example of User Media </h1>
            </div>
            <div class="container" id="details">
          <div class="row">

              <div class="col-lg-12">

                <p>Click the button to open, close camera or take snapshot</p>
                <div>

                      <button class="btn btn-default" autocomplete="off" id="open">Open Camera</button>
                      <label for="resolution">resolution </label>
                      <select id="resolution">
                          <option value="qvga">320*240</option>
                          <option value="vga">640*480</option>
                          <option value="hd">1280*960</option>
                      </select>

                      <button class="btn btn-default" autocomplete="off" id="close">Close Camera</button>
                      <button class="btn btn-default" autocomplete="off" id="snapshot">Take Snapshort</button>
                          
                      <label for="filter">Filter: </label>
                      <select id="filter">
                          <option value="none">None</option>
                          <option value="blur">Blur</option>
                          <option value="grayscale">Grayscale</option>
                          <option value="invert">Invert</option>
                          <option value="sepia">Sepia</option>
                      </select>                   

                </div>
                <br/>
              </div>
              <div class="col-lg-12">
               
                <div class="col-lg-6"><video id="localVideo" autoplay playsinline controls="true"></video></div>
                <div class="col-lg-6"><canvas id="localCanvas"></canvas></div>
              </div>
          </div>
                
          <div class="note">

              <div id="logDiv">
                  <ul id="logContent">
          
                  </ul>
          
              </div>
              
            </div>
            </div>
    
        </div>
    </div>

    <hr>
    <div class="footer">
    </div>
</div>

</body>
</html>

创建 media_stream_demo.js

'use strict';

// Put variables in global scope to make them available to the browser console.


function handleSuccess(stream) {
  const video = document.querySelector('video');
  const videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log(`Using video device: ${videoTracks[0].label}`);
  window.stream = stream; // make variable available to browser console
  video.srcObject = stream;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    const 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') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  }
  errorMsg(`getUserMedia error: ${error.name}`, error);
}

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

async function openCamera(e, constraints) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
    document.querySelector('#close').disabled = false;
  } catch (ex) {
    handleError(ex);
  }
}

function closeCamera(e) {
    const videoElem = document.querySelector('video');
    const stream = videoElem.srcObject;
    const tracks = stream.getTracks();
    e.target.disabled = true;
    document.querySelector('#open').disabled = false;
    tracks.forEach(function(track) {
      track.stop();
    });
  
    videoElem.srcObject = null;
}

async function takeSnapshot(e) {
    console.log("take snapshot");
    try {
        const video = document.querySelector('video');
        const canvas = window.canvas = document.querySelector('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    } catch (ex) {
        handleError(ex);
    }
}

点击 "Oper Camera" 来打开摄像头，点击 “Take Snapshot” 来拍摄快照
可以自己动手试试，通过选择 "resolution" 来调整 getUserMedia 的 Contraints
可以自己动手试试，通过更改 "Filter" 来为摄像头捕捉的视频添加滤镜。

WebRTC 之 MediaStream: 用你的摄像头拍照

概述

API

实例

参考资料