WebRTC 之 MediaStream: 用你的浏览器拍照

作者: 老瓦在霸都 | 来源:发表于2021-01-19 21:41 被阅读0次

概述

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

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

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

WebRTC 标准中对 MediaStream 对象有如下定义

interface MediaStream : EventTarget {
  constructor();
  constructor(MediaStream stream);
  constructor(sequence<MediaStreamTrack> tracks);
  readonly attribute DOMString id;
  sequence<MediaStreamTrack> getAudioTracks();
  sequence<MediaStreamTrack> getVideoTracks();
  sequence<MediaStreamTrack> getTracks();
  MediaStreamTrack? getTrackById(DOMString trackId);
  undefined addTrack(MediaStreamTrack track);
  undefined removeTrack(MediaStreamTrack track);
  MediaStream clone();
  readonly attribute boolean active;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

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

interface MediaStreamTrack : EventTarget {
  readonly attribute DOMString kind;
  readonly attribute DOMString id;
  readonly attribute DOMString label;
  attribute boolean enabled;
  readonly attribute boolean muted;
  attribute EventHandler onmute;
  attribute EventHandler onunmute;
  readonly attribute MediaStreamTrackState readyState;
  attribute EventHandler onended;
  MediaStreamTrack clone();
  undefined stop();
  MediaTrackCapabilities getCapabilities();
  MediaTrackConstraints getConstraints();
  MediaTrackSettings getSettings();
  Promise<undefined> applyConstraints(optional MediaTrackConstraints constraints = {});
};

Media Track 有 live 和 ended 两种状态, 还支持如下设置

dictionary MediaTrackSettings {
  long width;
  long height;
  double aspectRatio;
  double frameRate;
  DOMString facingMode;
  DOMString resizeMode;
  long sampleRate;
  long sampleSize;
  boolean echoCancellation;
  boolean autoGainControl;
  boolean noiseSuppression;
  double latency;
  long channelCount;
  DOMString deviceId;
  DOMString groupId;
};

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

实例

参考资料

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

音视频开发笔记