通过WebRTC进行实时通信-从webcam获取视频流

2018-10-13 本文已影响25人音视频直播技术专家

你将学到什么

在这一步，你将知道如何做下面的事儿：

从webcam获得视频流
控制流播放
例用 CSS 和 SVG控制视频

对于操作的完整版本在 step-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 playsinline></video>
        <script src="js/main.js"></video>
    </body>
</html>

...和一段javascript片段

添加下面的代码到 js目录下的main.js中：

'use strict';

const mediaStreamContrains = {
    video: true,
};

const localVideo = document.querySelector('video');
let localStream;

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

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

navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

这里的所有JavaScript例子都使用 use strict; 以避免一般的代码陷阱。可在 ECMAScript 5 Strict Mode, JSON, and More。中找到更多的信息。

试一下

在你的浏览器中打开 index.html，你将看到像下面这样子（当然是你的 webcam 中样子）：

它是如何工作的呢？

通过调用getUserMedia()，浏览器向用户请求访问camera的权限（当前是否是第一次对camera的请求）。如果成功，返回MediaStream。MediaStream 将被多媒体元素的 srcObject 属性所使用：

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

...

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

contrains 参数允许你指定你要得到的媒体。在这个例子中，只有video。因此，audio默认提关闭的。

const mediaStreamConstraints = {
  video: true,
};

你能使用contrains申请额外的功能，如视频分辨率：

const hdConstraints = {
  video: {
    width: {
      min: 1280
    },
    height: {
      min: 720
    }
  }
}

在 MediaTrackConstraints 规范中列出了所有可能的 contrains 类型。但并不是所有的浏览器都支持这些选项。
如果请求的分辨率当前camera无法支持，getUserMedia将被拒绝，并返回OvercontrainedError，并且也不会给用户访问camera权限的提示。

这里你能看到一个demo演示如何使用 contrains去请求不同的分辨率, 这里有一个demo使用 contrains选择camera和microphone。
如果调用 getUserfMedia成功，从webcam获取的视频流将作为源设置给video元素。

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

点滴

传递给 getUserMedia的 localStream是全局变量，所以你能从浏览器的console中看到：找开 console，敲入 stream 并按回车键。（在Chrome中查看console，按 crtl+shift+j, 或在Mac 下按Command-Option-j）
localStream.getVideoTracks()会返回什么？
偿试调用localStream.getVideoTrack()[0].stop()
查看 contrains对象，当你修改它为 {audio: true, video:true}会发生什么？
视频元素的大小是多少？通过 JavaScript你如何能得到视频的自然尺寸？使用 Crome Dev工具检查。

添加 CSS 过滤视频元素，例如：

video {
  filter: blur(4px) invert(1) opacity(0.5);
}

偿试添加 SVG过滤器，例如：

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

我们学到了什么

在本节中，你学到了：

从webcam得到视频
设置多媒体的 contrains
与视频元素混淆

本节完整的版本在 step-01目录下。

提示

在 video无素中别忘了 autoplay属性。如果没有它，你只能看到一个简单的帧。
对于 getUserMedia() contrains有很多选项，可以看这个 demo webrtc.github.io/samples/src/content/peerconnection/constraints。正如你看到的，在那个网站上有很多有趣的WebRTC例子。

最佳实践

确保你的视频元素别超出它的container。我们添加了width和 max-width设置最佳视频的尺寸和最大尺寸。浏览器会自动计算高度：
```
video {
    max-width: 100%;
    width: 320px;
}
```

接下来

你已经得到了视频，但如何传输它呢？下一步我们来给出答案。