概述
先看一下效果，你可以在这里亲自动手试试 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" 来为摄像头捕捉的视频添加滤镜。
