4.从您的网络摄像头流传输视频

你会学到什么

在此步骤中，您将了解如何：

从您的网络摄像头获取视频流。
操纵流播放。
使用CSS和SVG操纵视频。

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

一小段HTML ...

在work工作目录中的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严格模式，JSON和更多内容的含义。

试试看

在浏览器中打开index.html，你应该会看到这样的东西（当然可以从你的网络摄像头看）！）

更好的API
如果你认为代码看起来有点古老，你是对的。
我们正在使用getUserMedia()的回调版本来兼容当前的浏览器。
请访问github.com/webrtc/samples查看演示，以查看基于Promise的版本，使用MediaDevices API和更好的错误处理。更好！我们稍后会使用。

运行原理

getUserMedia()被调用如下：

navigator.getUserMedia(constraints, successCallback, errorCallback);

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

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

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

如果getUserMedia()成功，网络摄像头的视频流将被设置为视频元素的源：

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

加分点

传递给getUserMedia()的流对象在全局范围内，因此您可以从浏览器控制台检查它：打开控制台，键入stream并按Return。（要在Chrome中查看控制台，请按Ctrl-Shift-J或Command-Option-J（如果您在Mac上）。
```
MediaStream {id: "yl4SAOCmH47LRnDNxKogO3JzhKehKTjSRIza", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}
```

stream.getVideoTracks()返回什么？

[MediaStreamTrack]
0:MediaStreamTrack {kind: "video", id: "e1fb20e7-4dc8-4406-97fe-835e0287f477", label: "HP TrueVision HD (064e:e263)", enabled: true, muted: false, …}
length:1
__proto__:Array(0)

尝试调用stream.getVideoTracks()[0] .stop()。
结果：摄像头被关闭。
看看约束对象：当您将其更改为{audio：true，video：true}时会发生什么？
同时请求摄像头和麦克风权限。
视频元素的大小是多少？如何从JavaScript显示视频的自然尺寸，而不是显示尺寸？使用Chrome开发工具进行检查。
```
// TODO:
```

尝试添加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%);
 }

你学到了什么

在这一步你学会了如何：

从您的网络摄像头获取视频。
设置媒体限制。
与视频元素混合

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

提示

不要忘记视频元素上的自动播放属性。没有它，你只会看到一帧！
getUserMedia()约束有更多选项。看看webrtc.github.io/samples/src/content/peerconnection/constraints上的演示。您将看到，该网站上有许多有趣的WebRTC示例。

最佳实践

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

video {
  max-width: 100%;
  width: 320px;
}

接下来

你有视频，但如何流式传输？在下一步了解！

Previous3.获取示例代码 Next5.使用RTCPeerConnection流式传输视频

Last updated 5 years ago