如果想在浏览器中调用摄像头录制视频，似乎是一个比较高级的技术。然而，现有的浏览器已经支持这一功能，使得我们可以很方便地进行视频录制和视频通话。

浏览器调用摄像头的原理是，借助WebRTC技术实现的。WebRTC是一种开放标准，它提供了实时通信的能力，包括音频、视频和数据。借助WebRTC，我们可以在浏览器中直接调用摄像头或麦克风，并进行录制或者直接发送。

接下来，我们将步入正题，介绍如何在浏览器中调用摄像头并录制视频。

第一步：检查支持情况

首先，要确认一下当前的浏览器是否支持WebRTC技术。通常情况下，最新版本的Chrome、Firefox和Edge都支持WebRTC，而Safari仅仅支持部分功能。

如果你需要确保你的用户能够使用这一功能，你可以使用WebRTC检验器网站来检测浏览器对这一技术的支持情况。

第二步：获取视频流

在使用WebRTC进行视频录制之前，我们需要请求并获得本地的视频流。通常情况下，我们可以在HTML代码中添加一个`video`元素，通过JavaScript代码来获取视频流。

以下是获取视频流的代码样例：

```

navigator.mediaDevices.getUserMedia({ video: true })

.then(function (stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function (e) {

video.play();

};

})

.catch(function (err) {

console.log(err);

});

```

在这段代码中，我们使用`getUserMedia`方法请求一个视频流，并将其绑定到页面中的`video`元素上。

第三步：录制视频

一旦我们成功获取了视频流，我们就可以准备开始录制视频了。在WebRTC中，我们可以通过`MediaRecorder`API来实现录制视频的功能。

以下是录制视频的代码样例：

```

var video = document.querySelector('video');

var recorder = new MediaRecorder(video.srcObject);

var chunks = [];

recorder.ondataavailable = function (e) {

chunks.push(e.data);

};

recorder.onstop = function (e) {

var blob = new Blob(chunks, { type: 'video/mp4' });

var url = URL.createObjectURL(blob);

var a = document.createElement('a');

a.href = url;

a.download = 'video.mp4';

document.body.appendChild(a);

a.click();

};

recorder.start();

setTimeout(function () {

recorder.stop();

}, 5000);

```

在这段代码中，我们使用`MediaRecorder`API来进行录制，并在录制停止之后生成一个下载链接，用户可以点击该链接下载录制好的视频。

需要注意的是，在实际应用中，你可能需要增加一些控件，例如开始/停止按钮，并在这些控件的事件中来启动/停止录制视频。

第四步：进行视频通话

除了录制视频之外，WebRTC还可以用来进行视频通话。并且，借助WebRTC技术，我们可以在不同的设备和浏览器之间进行实时通信。

以下是创建一个视频通话的代码样例：

```

var peer = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({ video: true })

.then(function (stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function (e) {

video.play();

};

peer.addStream(stream);

});

peer.onaddstream = function (e) {

var video = document.createElement('video');

video.srcObject = e.stream;

video.onloadedmetadata = function (e) {

video.play();

};

document.body.appendChild(video);

};

peer.createOffer()

.then(function (offer) {

return peer.setLocalDescription(offer);

})

.then(function () {

console.log(peer.localDescription);

})

.catch(function (err) {

console.log(err);

});

```

在这段代码中，我们创建了一个`RTCPeerConnection`对象，并请求了本地的视频流。然后，我们将这个视频流添加到`RTCPeerConnection`对象中，并在远程设备加入通话的时候接收到视频流。

需要注意的是，在实际应用中，你需要保证两个远程设备都能够连接到同一个`RTCPeerConnection`对象，并实现双向通信。

总结

在本文中，我们介绍了如何在浏览器中调用摄像头并录制视频。具体来说，我们需要检查浏览器的WebRTC支持情况、获取视频流、使用`MediaRecorder`API进行视频录制，并实现视频通话。

值得注意的是，WebRTC技术涉及到浏览器API的调用以及复杂的网络协议。因此，我们需要仔细思考和研究这些API和协议，以保证我们的应用程序能够稳定地工作。