在 HTML5 规范中，HTML5 定义了一个非常有用的 API --- MediaStream API，用于访问 WebRTC（网页实时通信）的用户数据，例如实时音频、视频和屏幕分享。其中，使用 MediaStream API 调用摄像头和麦克风是最常见的使用场景之一。
MediaStream API 工作原理：
在前端使用 MediaStream API 调用手机摄像头的过程中，其实主要是通过浏览器来实现控制的。MediaStream API 的作用是将摄像头的输出媒体流嵌入到 web 页面中，实现透明的嵌入式媒体应用程序。
MediaStream API 的工作流程可以分为三个步骤：
1. 获取流媒体对象
使用 MediaStream API 权限API获取流媒体对象，通过这个对象访问摄像头或麦克风，使用方法如下。
```javascript
var constraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// stream 就是获取的摄像头对象，可以直接使用。
})
.catch(function (err) {
// 处理获取媒体流异常
});
```
getUserMedia 方法是一个浏览器 API，用于获取流媒体对象，其中的 constraints 参数用于控制获取摄像头或者麦克风等对象参数，video 和 audio 表示获取视频和音频。
2. 处理流媒体对象
获取到流媒体对象后，可以对媒体流进行处理。例如，获取视频流，然后将视频输出到网页上。
```javascript
var videoEle = document.querySelector('#myvideo');
videoEle.srcObject = stream;
videoEle.play();
```
在这段代码中，videoEle 表示网页中的 video 标签元素，使用 stream 对象设置视频源，然后调用 play 方法即可将视频播放出来。
3. 关闭流媒体对象
最后，务必要关闭流媒体对象，以释放媒体资源和回收内存资源。
```javascript
stream.getVideoTracks()[0].stop();
stream.getAudioTracks()[0].stop();
```
这段代码用于关闭视频和音频流。
总结：
通过 MediaStream API，可以很容易的使用 JavaScript 代码调用手机摄像头来实现视频聊天、扫描二维码等功能。MediaStream API 的优点是兼容性好、使用方便，而且支持多种设备类型，适合各种不同场合的应用。如果您需要开发基于浏览器的移动应用软件，MediaStream API 不容错过。
