【WebRTC 02】从摄像头获取视频以及切换分辨率和视频源

最新推荐文章于 2023-08-24 09:21:45 发布

T型人小付

最新推荐文章于 2023-08-24 09:21:45 发布

阅读量6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/Victor2code/article/details/106905266

版权

上一节中我们已经搭建出了用于操作的环境，这一节我们要实现的一个小目标，就是将电脑摄像头拍到的内容实时显示到网页上。同时我们一起学习下原理，并做一些小拓展。

文章目录

操作环境

效果展示: Chrome 83
IDE: Hbuilder X

实现效果

这一节的完整代码可以在上一节下载的step-01目录中找到。

修改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"></script>

</body>

</html>

添加了一个video标签，以及一个script标签引入js/main.js这个脚本。

接着去修改引入的这个main.js脚本

'use strict';
// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
   
  video: true,
};

// Video element where stream will be placed.
const localVideo = document.querySelector('video');

// Local stream that will be reproduced on the video.
let localStream;

// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
   
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
   
  console.log('navigator.getUserMedia error: ', error);
}

// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

之后刷新下测试网页http://127.0.0.1:8887，页面会询问是否允许打开摄像头，选择允许，然后就可以看到如下效果，我这里处于隐私考虑给我自己的显示内容加了马赛克

如果没有显示出摄像头内容，建议检查下浏览器版本。

几个概念

HTML5中的Audio和Video API

我们可以使用<video>和<audio>在h5页面中嵌入视频和音频，并且可以通过类似<video controls></video>这样的方式给音视频加上默认的控制器，但是大多数操作还是用鼠标完成，灵活度非常不够。

同时，h5还引入了一个叫做HTMLMediaElement的API接口提供通过程序来控制页面中音视频播放器的方法，例如HTMLMediaElement.play()和HTMLMediaElement.pause()等等。另外两个接口HTMLVideoElement和HTMLAudioElement都继承自HTMLMediaElement，分别适用于<audio>和<video>两个标签，我们这里就是使用<video>标签来进行的API操作。

src和srcObject属性

有必要区分下HTMLMediaElement.src和HTMLMediaElement.srcObject这两个属性。前者是标签的一个属性，可以赋值或者返回一个url，会显示在页面中；后者是一个HTMLMediaElement接口的一个属性，可以赋值或者返回一个MediaStream对象，或者是MediaSource、Blob以及File对象，并不会显示在页面上。

截至2020年3月，只有Safari支持对srcObject赋值除了MediaStream以外的其余类型的对象，所以如果要使用其他浏览器进行操作，建议通过URL.createObjectURL()生成一个URL然后赋值给src

MediaStream对象

MediaStream代表一个流媒体对象，一个对象包含好几个track，例如音频track以及视频track。有两种方式可以创造MediaStream对象，要么通过MediaStream()构造方法，要么通过调用MediaDevices.getUserMedia()，本小节使用的就是第二种方法。

实现原理

首先来看下面的这段代码

const mediaStreamConstraints = {
   
  video: true,
  // video: { width: 1280, height: 720 },
};

navigator.mediaDevices.getUserMedia(mediaStreamConstraints