html5+JS调用摄像头示例

html5+JS调用摄像头示例

本文主要介绍了：一、html5+JS使用navigator.MediaDevices调用摄像头截图； 二、HTML5+JS使用MediaRecorder录制视频。

一、html5使用navigator.MediaDevices调用摄像头截图

html5调用音视频等多媒体硬件的API已经很成熟，核心的api就是navigator.MediaDevices，详细情况可参见 MediaDevices - Web API 接口参考 | MDN

【先重点了解其中的

MediaDevices的getUserMedia方法

MediaDevices.getUserMedia() - Web API 接口参考 | MDN

MediaStreamTrack接口的stop方法MediaStreamTrack.stop() - Web API 接口参考 | MDN

下面的示例用到】

下面给出一个html5使用navigator.MediaDevices调用摄像头截图示例源码

拍照

保存文件名为：html5调用摄像.html。运行之，效果如下：

二、HTML5使用MediaRecorder录制视频

MediaRecorder 是浏览器提供的一个强大且简单的 API。专门用于音频和视频的录制。可参见 MediaRecorder - Web API 接口参考 | MDN

可以录制任何的媒体形式标签，例如

关于MediaRecorder在浏览器上的具体实现能够支持指定MIME类型可参见MediaRecorder.isTypeSupported - Web API 接口参考 | MDN

下面给出一个html5使用MediaRecorder调用摄像头录制视频示例源码

保存文件名为：html5调用摄像2.html。运行之，效果如下：