/ WebRTC  

webrtc从摄像头获取视频流

从摄像头获取视频流

学习提纲

  • 从摄像头获取视频流
  • 操纵流的回播
  • 使用css和svg来操作视频

简短的HTML

在你的项目文件夹下的index.html文件中添加video和script元素

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
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<body>

<video autoplay playsinline></video>

</body>
<script type="text/javascript">
'use strict'; //避免常见的编码陷阱。

var constrains= {
video: true, // 视频流
audio: true // 音频流
};

// 页面中video放置的位置
var localVideo = document.querySelector('video')

// 视频的本地流
var localStream;
//通过将MediaStream添加到页面中视频元素节点来处理成功
function gotLocalMediaStream(mediaStream){
//成功后回调
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}

// 调起摄像头失败后回调
function handleError(error) {
console.error("getUserMedia error", error)
}

// 调起摄像头 初始化媒体流。
navigator.mediaDevices.getUserMedia(constrains).then(gotLocalMediaStream).catch(handleError);

</script>
</html>

运行原理

在getUserMedia()调用之后,浏览器请求用户访问其摄像头的权限(如果这是第一次请求当前源的摄像头访问)。如果成功,则返回MediaStream,媒体元素可以通过srcObject属性使用它:

1
2
3
4
5
navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}

你可以使用约束来满足其他要求,例如视频分辨率:

1
2
3
4
5
6
7
8
9
10
const hdConstraints = {
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}

MediaTrackConstraints规范列出了所有可能的约束类型,但并非所有浏览器都支持所有选项。如果当前选定的摄像机不支持所请求的分辨率,则getUserMedia()将被OverconstrainedError拒绝,并且不会提示用户授予访问其摄像机的权限。

您可以在此处查看演示如何使用约束来请求不同分辨率的演示,以及使用约束在此处选择摄像机和麦克风的演示。

关键点

  • 传递给getUserMedia() 的localStream对象在全局范围内,因此您可以从浏览器控制台进行检查:打开控制台,键入stream并按Return键。
  • 使用localStream.getVideoTracks() 会返回什么呢? //此流中视频轨道的MediaStreamTrack对象序列。
  • 试试 localStream.getVideoTracks()[0].stop(). // 关闭摄像头
  • 改变传入参数{audio: true, video: true}查看变化
  • 视频元素的大小是多少?如何从JavaScript中获取视频的分辨率大小,而不是显示大小?使用Chrome开发工具进行检查。 // 使用localVideo.videoWidth
  • 使用css过滤器改变视频元素

    1
    2
    3
    video {
    filter: blur(4px) invert(1) opacity(0.5);
    }
  • 使用svg过滤器改变视频元素样式

    1
    2
    3
    video {
    filter: hue-rotate(180deg) saturate(200%);
    }

提示

  • 不要忘记视频元素上的autoplay属性。没有它,你只会看到一个帧!
  • getUserMedia()约束有很多选项。在 webrtc.github.io/samples/src/content/peerconnection/constraints 上查看演示。正如您将看到的,该网站上有许多有趣的WebRTC样本。

分辨率练习

确保您的视频元素不会溢出其容器。我们添加了宽度和最大宽度来设置视频的首选大小和最大大小。浏览器将自动计算高度:

1
2
3
4
video {
max-width: 100%;
width: 320px;
}