简介

这两天公司有个项目，我打算用HTML5做个演示版本，只要是音视频方面的，所以打算采用HTML5协议规范中的WebRTC来研究，考虑到目前国产浏览器大部分‘高速模式’都是用的webkit核心的浏览器引擎，所以除了Chrome和Firefox浏览器之外，国产的浏览器像是sougou支持的都还不错。这里主要是通过WebRTC获取音频和视频流，然后通过video元素转换，经过canvas绘制成图片或者视频录制。这里主要介绍一下关于拍摄照片和美化处理的一些相关知识。其他部分，关于音频和视频的录制，后期在追加。

转载请注明出处：

WebRTC简介

WebRTC是Google公司推出的一项通过浏览器实时语音和视频通信的技术，Web Real Time Communication。他是的开发者通过javascrip接口调用音频与视频流，实现语音和图片等多媒体应用。
WebRTC1.0 的架构如下：

谷歌做了些什么？
a) Google面向web浏览器开发者，将GIPS封装到一些Java Script APIs中，创建了WebRTC，这意味着VoIP技术将可以为百万开发者所使用。
b) Google开源了WebRTC，将其置于宽松的BSD证书下——这使得该技术可以被重用、修改并衍化开发；使得该技术脱离了实时媒体工程师的控制。
c) Google将该技术提交给W3C和IETF标准机构进行标准化，确保该技术成为浏览器中的通用部件，并在此过程中，去除该技术中任何与Google相关部分。
d) 它忽略了拨号层，让开发商可以在任何实时通信环境下使用WebRTC，而不必考虑是使用何种协议建立信号通信。

WebRTC访问API

长久以来，音频/视频捕获都是网络开发中的“圣杯”。多年来，我们总是依赖于浏览器插件（Flash 或 Silverlight）实现这一点。
现在轮到 HTML5 大显身手了。也许看起来不是很显眼，但是 HTML5 的崛起引发了对设备硬件访问的激增。地理位置 (GPS)、Orientation API（加速计）、WebGL(GPU) 和 Web Audio API（视频硬件）都是很好的例子。这些功能非常强大，展示了基于系统底层硬件功能之上的高级 JavaScript API。
WebRTC提供了了一种新 API：navigator.getUserMedia()，可让网络应用访问用户的相机和麦克风。
发展历史，参考：
说说这个navigator.getUserMedia()的使用，考虑到不同浏览器的兼容性，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
navigator.getUserMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
);
navigator.getUserMedia({video: true,audio:false}, function (stream) {
//在这里操作stream对象，一般是用createObjectURL把stream生成URL对象输出给video元素的src属性
//videoDom.src=window.webkitURL.createObjectURL(stream);
}, function (error) {
console.log(error);
});

上面代码中的{video: true,audio:false}，表示的是获取多媒体的音频和视频的开关。

API使用详解

目前一般获取视频的都是调用前置摄像头，可能是由于前置摄像头像素低的原因，默认获取的是480p的图像。至少我的130万像素的摄像头获取的是480p。
在博客上看到有仁兄查看源代码，有这样一段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#include "base/logging.h"
#include "base/strings/string_number_conversions.h"
#include "content/renderer/media/media_stream_dependency_factory.h"
#include "content/renderer/media/media_stream_video_track.h"
#include "content/renderer/media/webrtc/webrtc_video_capturer_adapter.h"
namespace content {

// Constraint keys. Specified by draft-alvestrand-constraints-resolution-00b
const char MediaStreamVideoSource::kMinAspectRatio[] = "minAspectRatio";
const char MediaStreamVideoSource::kMaxAspectRatio[] = "maxAspectRatio";
const char MediaStreamVideoSource::kMaxWidth[] = "maxWidth";
const char MediaStreamVideoSource::kMinWidth[] = "minWidth";
const char MediaStreamVideoSource::kMaxHeight[] = "maxHeight";
const char MediaStreamVideoSource::kMinHeight[] = "minHeight";
const char MediaStreamVideoSource::kMaxFrameRate[] = "maxFrameRate";
const char MediaStreamVideoSource::kMinFrameRate[] = "minFrameRate"


const char* kSupportedConstraints[] = {
MediaStreamVideoSource::kMaxAspectRatio,
MediaStreamVideoSource::kMinAspectRatio,
MediaStreamVideoSource::kMaxWidth,
MediaStreamVideoSource::kMinWidth,
MediaStreamVideoSource::kMaxHeight,
MediaStreamVideoSource::kMinHeight,
MediaStreamVideoSource::kMaxFrameRate,
MediaStreamVideoSource::kMinFrameRate
};

const int MediaStreamVideoSource::kDefaultWidth = 640;
const int MediaStreamVideoSource::kDefaultHeight = 480;
const int MediaStreamVideoSource::kDefaultFrameRate = 30;

namespace {

// Constraints keys for
const char kSourceId[] = "sourceId";
// Google-specific key prefix. Constraints with this prefix are ignored if they
// are unknown.

const char kGooglePrefix[] = "goog";