跳转至

从摄像头获取视频流（二）

你会学到什么

在这一步中，您将了解：

  • 从您的摄像头获取视频流
  • 操纵流播放
  • 使用CSS和SVG来处理视频

此步骤的完整版本位于step-01文件夹中。

一小段HTML代码

将video元素和javascript元素添加到工作目录中的index.html文件： 

<!DOCTYPE html>
<html>

<head>

    <title>Realtime communication with WebRTC</title>

    <link rel="stylesheet" href="css/main.css" />

</head>

<body>

    <h1>Realtime communication with WebRTC</h1>

    <video autoplay></video>

    <script src="js/main.js"></script>

</body>

</html>

少量JavaScript

将以下内容添加到js文件夹的main.js文件中： 

'use strict';

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {
    audio: false,
    video: true
};
var video = document.querySelector('video');

function successCallback(stream) {
    window.stream = stream; // stream available to console
    if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
    } else {
    video.src = stream;
    }
}

function errorCallback(error) {
    console.log('navigator.getUserMedia error: ', error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

这里的所有JavaScript示例都使用“use strict”; 避免常见的编码问题。详细请了解ECMAScript 5 Strict Mode，JSON和更多内容。

Try it out

在你的浏览器中打开index.html，你会看到类似的东西（当然还包括你的摄像头的视图！）：

运行原理

getUserMedia()是这样调用的： 

navigator.getUserMedia(constraints, successCallback, errorCallback);

这项技术还是比较新的，所以浏览器仍然使用getUserMedia的前缀名称。 在main.js的顶部填充此代码！

constraints参数允许您指定要获取的媒体 - 在本例中为视频而不是音频： 

var constraints = {
    audio: false,
    video: true
};

如果getUserMedia()调用成功，则摄像头的视频流将被设置为视频元素的source： 

function successCallback(stream) {
    window.stream = stream; // stream available to console
    if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
    } else {
    video.src = stream;
    }
}

知识扩展：

  • 传递给getUserMedia()的流对象在全局范围内，因此您可以从浏览器控制台检查它：打开控制台，键入流并按回车键。 （要在Chrome中查看控制台，请按Ctrl-Shift-J或Command-Option-J（假如你是Mac）
  • stream.getVideoTracks() 返回什么？
  • 尝试调用stream.getVideoTracks()[0].stop()。
  • 查看constraints对象：将其更改为 {audio：true，video：true} 时会发生什么？
  • 视频元素的大小是多少？ 如何从JavaScript获得视频的自然大小，而不是显示大小？ 使用Chrome开发工具进行检查。
  • 尝试将CSS过滤器添加到视频元素。 例如： 
    video { -webkit-filter: blur(4px) invert(1) opacity(0.5); }
  • 尝试添加SVG过滤器。 例如： 
    video {
    filter: hue-rotate(180deg) saturate(200%);
    -moz-filter: hue-rotate(180deg) saturate(200%);
    -webkit-filter: hue-rotate(180deg) saturate(200%);
}

你学到了什么

在这一步你学会了如何：

  • 从您的摄像头获取视频。
  • 设置媒体约束。
  • 与视频元素混淆。

此步骤的完整版本位于step-01文件夹中。

Tips

最佳实践

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

video {
    max-width: 100%;
    width: 320px;
}
有了视频流，但你怎么发送流呢？