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

walterfan2024-06-15 10:19

概述

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

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

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

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

scss 复制代码 
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 .
ini 复制代码 
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 两种状态, 还支持如下设置

ini 复制代码 
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可能表示为媒体元素（例如或），通过网络发起并通过WebRTC RTCPeerConnection API 获得的流，或者使用Web Audio API MediaStreamAudioSourceNode创建的流。

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

API

ini 复制代码 
var promise = navigator.mediaDevices.getUserMedia(constraints);

基本用法

javascript 复制代码 
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

xml 复制代码 
<!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>
  1. 创建 media_stream_demo.js
javascript 复制代码 
'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);
    }
}

  1. 点击 "Oper Camera" 来打开摄像头，点击 "Take Snapshot" 来拍摄快照

  2. 可以自己动手试试，通过选择 "resolution" 来调整 getUserMedia 的 Contraints

  3. 可以自己动手试试，通过更改 "Filter" 来为摄像头捕捉的视频添加滤镜。

参考资料

相关推荐
egekm_sefg2 小时前
webrtc学习----前端推流拉流，局域网socket版，一对多
前端·学习·webrtc
红米饭配南瓜汤2 小时前
WebRTC服务质量（11）- Pacer机制（03) IntervalBudget
网络·网络协议·音视频·webrtc·媒体
布兰妮甜2 小时前
使用 WebRTC 进行实时通信
javascript·webrtc·实时通信
星就前端叭1 天前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
web150854159351 天前
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
vue.js·阿里云·webrtc
m0_748232391 天前
WebRTC学习二：WebRTC音视频数据采集
学习·音视频·webrtc
m0_748237151 天前
WebRTC 环境搭建
webrtc
重生之豪哥1 天前
WebRtc webrtc-streamer部署
webrtc
Amarantine、沐风倩✨2 天前
设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储）
java·物联网·音视频·webrtc·html5·视频编解码·七牛云存储
mo47762 天前
Webrtc音频模块(四) 音频采集
音视频·webrtc
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）