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调用摄像头截图示例源码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>html5调用摄像头截图</title>
</head>
<body><video id="video" width="500px" height="500px" autoplay="autoplay"></video><canvas id="canvas" width="500px" height="500px"></canvas><br> <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()" /><input type="button" title="关闭摄像头" value="关闭摄像头" onclick="stopMedia(video)" /><button id="snap" onclick="takePhoto()">拍照</button><script>function getMedia() {let constraints = {//参数video: {width: 500, height: 500},audio: true};//获得video摄像头区域let video = document.getElementById("video");//返回的Promise对象let promise = navigator.mediaDevices.getUserMedia(constraints);//then()异步，调用MediaStream对象作为参数promise.then(function (MediaStream) {video.srcObject = MediaStream;video.play();});}function takePhoto() {//获得Canvas对象//let video = document.getElementById("video");let canvas = document.getElementById("canvas");let ctx = canvas.getContext('2d');//绘图ctx.drawImage(video, 0, 0, 300, 300);}function stopMedia(videoElem) {const stream = videoElem.srcObject;const tracks = stream.getTracks();tracks.forEach(function(track) {track.stop();  //停止视频流});videoElem.srcObject = null;  } </script>
</body>
</html>

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

二、HTML5使用MediaRecorder录制视频

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

可以录制任何的媒体形式标签，例如<audio>, <video>, <canvas>。<audio>, <video>可以是网络上的媒体文件，也可以是本机的设备采集（麦克风和摄像头）。 <canvas>的内容更自由，任何绘制在画布上的用户操作，2d或3d图像，都可以进行录制。录制结果是标准编码后的媒体数据流，该流可以注入<video>标签，也可以打包成为文件，甚至可以进一步进行流级别的数据处理（例如：画面识别，动态插入内容，播放跳转等）。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5调用摄像头录制视频</title>
</head>
<body>
<div class="left"><div id="startButton" class="button">Start</div><h2>Preview</h2><div class="video"><video id="preview" width="50%" height="auto" autoplay muted></video></div>
</div><div class="right"><div class="rightBtn"><div id="stopButton" class="button">Stop</div><a id="downloadButton" class="button">Download</a></div><h2>Recording</h2><div class="video"><video id="recording" width="160" height="120" controls></video></div>
</div><script>let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let dataChunks = [];
let recorder;// 开始录制
function startRecording(stream, lengthInMS) {recorder = new MediaRecorder(stream);recorder.ondataavailable = (event) => {let data = event.data;dataChunks.push(data);};recorder.start(1000);console.log(recorder.state + " start to recording .....");
}stopButton.addEventListener("click", () => {// close the recordingpreview.srcObject.getTracks().forEach((track) => track.stop());recorder.stop();// Play recorded videolet recordedBlob = new Blob(dataChunks, { type: "video/webm" });recording.src = URL.createObjectURL(recordedBlob);// Save download video， click the download button， you can download itdownloadButton.href = recording.src;downloadButton.download = "RecordedVideo.webm";
});startButton.addEventListener("click", () => {// get the streamnavigator.mediaDevices.getUserMedia({audio: true,video: true,}).then((stream) => {// set the stream to left videopreview.srcObject = stream;// set the stream to <a> for downloaddownloadButton.href = stream;// captureStream: which is streaming a real-time capture of the content being rendered in the media element. // A MediaStream object  which can be used as a source for audio or video data by other mediapreview.captureStream =preview.captureStream || preview.mozCaptureStream;startRecording(preview.captureStream());}).catch((err) => {console.log("recording error: ", err);});
});</script>
</body>
</html>

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

html5+JS调用摄像头示例相关推荐

JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
js调用摄像头并截图
js调用摄像头并截图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
js调用摄像头解析二维码
因为需求做一个扫码功能,发觉网上的资料不是不能用就是不完善,遂借鉴各种资料把这个功能搞出来了. 注意要点: 1.需要https验证通过才可以, 2.仅支持安卓端,iOS理论上也没问题的但是就是摄像 ...
html5 直接调用摄像头,HTML5调用摄像头并拍照
利用html5特性,调用摄像头,并利用canvas拍照先简单的添加需要的控件PICTURE 并在script中定义var video = document.getElementById(" ...
google html5 摄像头,chrome html5如何调用摄像头？
如果是通过chrome调用摄像头的话: navigator.mediaDevices.enumerateDevices() .then(gotDevices) .catch(errorCallback ...
html+js 调用摄像头识别二维码
1. html调起摄像头,参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 2.识别二维码 ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
html5 摄像头拍摄视频教程,html5实现调用摄像头并拍照功能
相关介绍: 我们知道通常情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onl ...

html5+JS调用摄像头示例

html5+JS调用摄像头示例

html5+JS调用摄像头示例相关推荐

最新文章

热门文章