WebRTC实时通信系列教程4 从摄像头获取视频流

刺骨的言语ヽ痛彻心扉 2022-05-17 11:55 384阅读 0赞

转载地址：[https://blog.csdn.net/Leytton/article/details/76704342][https_blog.csdn.net_Leytton_article_details_76704342]

《WebRTC实时通信系列教程》翻译自《[Real time communication with WebRTC][]》

示例代码下载[http://download.csdn.net/detail/leytton/9923708][http_download.csdn.net_detail_leytton_9923708]

[WebRTC实时通信系列教程1 介绍][WebRTC_1]

[WebRTC实时通信系列教程2 概述][WebRTC_2]

[WebRTC实时通信系列教程3 获取示例代码][WebRTC_3]

[WebRTC实时通信系列教程4 从摄像头获取视频流][WebRTC_4]

[WebRTC实时通信系列教程5 RTCPeerConnection传输视频][WebRTC_5 RTCPeerConnection]

[WebRTC实时通信系列教程6 使用RTCDataChannel传输数据][WebRTC_6 _RTCDataChannel]

[WebRTC实时通信系列教程7 使用Socket.IO搭建信令服务器交换信息][WebRTC_7 _Socket.IO]

[WebRTC实时通信系列教程8 打通P2P连接和信令通信][WebRTC_8 _P2P]

[WebRTC实时通信系列教程9 数据通道图片传输][WebRTC_9]

[WebRTC实时通信系列教程10 恭喜完成本系列课程][WebRTC_10]

# 一、译文 #

## 1、你将学到 ##

在这一节中，你将学会:

*  从你的网络摄像头获取视频流.
 *  播放视频流.
 *  使用CSS和SVG操作视频.

此节代码保存在 step-01 文件夹下.

## 2、少量HTML代码... ##

添加一个video 标签和一个 script 标签到 **work** 目录下的 **index.html** 文件中:

1.  `<!DOCTYPE html>`
2.  `<html>`
3.  
4.  `<head>`
5.  
6.  `<title>Realtime communication with WebRTC</title>`
7.  
8.  `<link rel="stylesheet" href="css/main.css" />`
9.  
10. `</head>`
11. 
12. `<body>`
13. 
14. `<h1>Realtime communication with WebRTC</h1>`
15. 
16. `<video autoplay></video>`
17. 
18. `<script src="js/main.js"></script>`
19. 
20. `</body>`
21. 
22. `</html>`

## 3、少量JavaScript代码 ##

添加以下代码到 **js** 目录中的 **main.js** 文件中:

1.  `'use strict';`
2.  
3.  `navigator.getUserMedia = navigator.getUserMedia ||`
4.  `navigator.webkitGetUserMedia || navigator.mozGetUserMedia;`
5.  
6.  `var constraints = {`
7.  `audio: false,`
8.  `video: true`
9.  `};`
10. `var video = document.querySelector('video');`
11. 
12. `function successCallback(stream) {`
13. `window.stream = stream; // stream available to console`
14. `if (window.URL) {`
15. `video.src = window.URL.createObjectURL(stream);`
16. `} else {`
17. `video.src = stream;`
18. `}`
19. `}`
20. 
21. `function errorCallback(error) {`
22. `console.log('navigator.getUserMedia error: ', error);`
23. `}`
24. 
25. `navigator.getUserMedia(constraints, successCallback, errorCallback);`

所有的JavaScript案例代码使用 `'use strict';` 来避免常见代码错误.

详情阅读 [ECMAScript 5 Strict Mode, JSON, and More][ECMAScript 5 Strict Mode_ JSON_ and More].

## 4、测试结果 ##

在浏览器打开 **index.html** 你将看到这个 (展示的是你的摄像头视图!):

![SouthEast][]

更好的语法形式

你会感觉这些代码看起来有点旧.

我们现在使用 `getUserMedia()` 的回调函数来兼容当前浏览器.

可以查看 [github.com/webrtc/samples][github.com_webrtc_samples] 上的Promise版示例代码, 使用的是 [MediaDevices API][] 并且能更好地进行错误处理. 我们后面将会使用它.

## 5、工作原理 ##

`getUserMedia()` 调用语法为:

navigator.getUserMedia(constraints, successCallback, errorCallback);

这一接口相对较新, 所以各种浏览器在getUserMedia中依然使用的是前缀名,你可以查看 **main.js** 文件中的顶部代码.

constraints 变量的参数可以指定获取哪些媒体资源 — 在下面的代码中, 只获取视频而不获取音频:

1.  `var constraints = {`
2.  `audio: false,`
3.  `video: true`
4.  `};`

如果 getUserMedia() 函数执行成功, 摄像头视频流可以设置为video标签的src属性资源:

1.  `function successCallback(stream) {`
2.  `window.stream = stream; // stream available to console`
3.  `if (window.URL) {`
4.  `video.src = window.URL.createObjectURL(stream);`
5.  `} else {`
6.  `video.src = stream;`
7.  `}`
8.  `}`

## 6、拓展 ##

*  通过 getUserMedia() 获取到的 stream 对象是全局变量, 所以你可以从浏览器控制台查看它: 打开控制台, 输入 "stream" 并按回车键.
 *  执行 stream.getVideoTracks() 语句会返回什么?
 *  试着调用 stream.getVideoTracks()\[0\].stop().
 *  查看 constraints 对象: 改成 \{audio: true, video: true\}会如何?
 *  video标签尺寸是多少? 你可以通过JavaScript获取视频自然尺寸而不是展示尺寸吗? 使用 Chrome Dev Tools 来检验.
 *  尝试使用CSS过滤Video标签. 例如:

1.  `video {`
2.  `-webkit-filter: blur(4px) invert(1) opacity(0.5);`
3.  `}`

*  尝试使用SVG过滤. 例如:

1.  `video {`
2.  `filter: hue-rotate(180deg) saturate(200%);`
3.  `-moz-filter: hue-rotate(180deg) saturate(200%);`
4.  `-webkit-filter: hue-rotate(180deg) saturate(200%);`
5.  `}`

## 7、你学到的 ##

在这节内容中你学习了:

*  获取摄像头视频流.
 *  设置媒体约束.
 *  修饰视频标签.

此节代码保存在 step-01 文件夹下.

## 8、提示 ##

*  不要忘记在 video 标签添加 autoplay 属性. 否则, 你将只能看到一张图片而不是动态视频!
 *  getUserMedia() 函数有很多约束设置.你可以在这看到示例[webrtc.github.io/samples/src/content/peerconnection/constraints][webrtc.github.io_samples_src_content_peerconnection_constraints]. 这里也有很多其他有趣的 WebRTC 示例.

## 9、最佳实践 ##

*  确保你的video标签大小不会超出父容器. 我们添加了 width 和 max-width 来设置video标签的首选尺寸和最大尺寸. 浏览器将会自动计算其高度:

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

## 10、下一节 ##

你已经获取到视频了, 但如何传输视频呢? 下一节即将揭晓!

# 二、原文 #

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/\#3

## 4. Stream video from your webcam ##

## What you'll learn ##

In this step you'll find out how to:

*  Get a video stream from your webcam.
 *  Manipulate stream playback.
 *  Use CSS and SVG to manipulate video.

A complete version of this step is in the step-01 folder.

## A dash of HTML... ##

Add a `video` element and a `script` element to index.html in your work directory:

## ...and a pinch of JavaScript ##

Add the following to main.js in your js folder:

All the JavaScript examples here use `'use strict';` to avoid common coding gotchas.

Find out more about what that means in [ECMAScript 5 Strict Mode, JSON, and More][ECMAScript 5 Strict Mode_ JSON_ and More].

## Try it out ##

Open index.html in your browser and you should see something like this (featuring the view from your webcam, of course!):

![SouthEast][]

A better API for gUM

If you think the code looks a little old fashioned, you're right.

We're using the callback version of `getUserMedia()` for compatibility with current browsers.

Check out the demo at [github.com/webrtc/samples][github.com_webrtc_samples] to see the Promise-based version, using the [MediaDevices API][]and better error handling. Much nicer! We'll be using that later.

## How it works ##

`getUserMedia()` is called like this:

navigator.getUserMedia(constraints, successCallback, errorCallback);

This technology is still relatively new, so browsers are still using prefixed names for `getUserMedia`. Hence the shim code at the top of main.js!

The `constraints` argument allows you to specify what media to get — in this example, video and not audio:

1.  `var constraints = {`
2.  `audio: false,`
3.  `video: true`
4.  `};`

If `getUserMedia()` is successful, the video stream from the webcam is set as the source of the video element:

## Bonus points ##

*  The `stream` object passed to `getUserMedia()` is in global scope, so you can inspect it from the browser console: open the console, type *stream* and press Return. (To view the console in Chrome, press Ctrl-Shift-J, or Command-Option-J if you're on a Mac.)
 *  What does `stream.getVideoTracks()` return?
 *  Try calling `stream.getVideoTracks()[0].stop()`.
 *  Look at the constraints object: what happens when you change it to `{audio: true, video: true}`?
 *  What size is the video element? How can you get the video's natural size from JavaScript, as opposed to display size? Use the Chrome Dev Tools to check.
 *  Try adding CSS filters to the video element. For example:

1.  `video {`
2.  `-webkit-filter: blur(4px) invert(1) opacity(0.5);`
3.  `}`

*  Try adding SVG filters. For example:

1.  `video {`
2.  `filter: hue-rotate(180deg) saturate(200%);`
3.  `-moz-filter: hue-rotate(180deg) saturate(200%);`
4.  `-webkit-filter: hue-rotate(180deg) saturate(200%);`
5.  `}`

## What you learned ##

In this step you learned how to:

*  Get video from your webcam.
 *  Set media constraints.
 *  Mess with the video element.

A complete version of this step is in the step-01 folder.

## Tips ##

*  Don't forget the `autoplay` attribute on the `video` element. Without that, you'll only see a single frame!
 *  There are lots more options for `getUserMedia()` constraints. Take a look at the demo at[webrtc.github.io/samples/src/content/peerconnection/constraints][webrtc.github.io_samples_src_content_peerconnection_constraints]. As you'll see, there are lots of interesting WebRTC samples on that site.

## Best practice ##

*  Make sure your video element doesn't overflow its container. We've added `width` and `max-width` to set a preferred size and a maximum size for the video. The browser will calculate the height automatically:

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

## Next up ##

You've got video, but how do you stream it? Find out in the next step!

[https_blog.csdn.net_Leytton_article_details_76704342]: https://blog.csdn.net/Leytton/article/details/76704342
[Real time communication with WebRTC]: https://codelabs.developers.google.com/codelabs/webrtc-web/
[http_download.csdn.net_detail_leytton_9923708]: http://download.csdn.net/detail/leytton/9923708
[WebRTC_1]: http://blog.csdn.net/leytton/article/details/76696372
[WebRTC_2]: http://blog.csdn.net/leytton/article/details/76696521
[WebRTC_3]: http://blog.csdn.net/leytton/article/details/76697092
[WebRTC_4]: http://blog.csdn.net/leytton/article/details/76704342
[WebRTC_5 RTCPeerConnection]: http://blog.csdn.net/leytton/article/details/76691543
[WebRTC_6 _RTCDataChannel]: http://blog.csdn.net/leytton/article/details/76820765
[WebRTC_7 _Socket.IO]: http://blog.csdn.net/leytton/article/details/76831005
[WebRTC_8 _P2P]: http://blog.csdn.net/leytton/article/details/76836265
[WebRTC_9]: http://blog.csdn.net/leytton/article/details/76838194
[WebRTC_10]: http://blog.csdn.net/leytton/article/details/76846455
[ECMAScript 5 Strict Mode_ JSON_ and More]: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
[SouthEast]: /images/20220517/1368efa9d43844d8b644385266300da3.png
[github.com_webrtc_samples]: https://github.com/webrtc/samples
[MediaDevices API]: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices
[webrtc.github.io_samples_src_content_peerconnection_constraints]: https://webrtc.github.io/samples/src/content/peerconnection/constraints/