/ 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;
}