h5页面如何调用摄像头实现录像功能
dearweb
发布：2023-03-21 09:13:18阅读：
H5页面调用摄像头实现录像功能同样可以使用HTML5的API。下面是一个简单的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头录像</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="startRecord">开始录制</button>
<button id="stopRecord">停止录制</button>
<script>
var video = document.querySelector("#video");
var startRecord = document.querySelector("#startRecord");
var stopRecord = document.querySelector("#stopRecord");
var mediaRecorder;
var chunks = [];
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then(function(stream) {
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
chunks = [];
var videoURL = window.URL.createObjectURL(blob);
video.src = videoURL;
};
});
startRecord.onclick = function() {
mediaRecorder.start();
};
stopRecord.onclick = function() {
mediaRecorder.stop();
};
</script>
</body>
</html>在这个例子中，我们使用了`<video>`标签来显示摄像头的视频流，同时添加了两个按钮`开始录制`和`停止录制`。当用户点击`开始录制`按钮时，我们创建了一个`MediaRecorder`对象来录制视频流，并将录制的数据存储到`chunks`数组中。当用户点击`停止录制`按钮时，我们停止录制，并将`chunks`数组中的数据合并成一个`Blob`对象，然后使用`window.URL.createObjectURL()`方法将`Blob`对象转换成一个URL，最后将这个URL设置为`<video>`标签的`src`属性，从而实现了录制和播放视频的功能。
需要注意的是，不同的移动设备和浏览器对HTML5的API支持程度不同，有些设备可能无法调用摄像头或相机。同时，为了保护用户隐私，浏览器也有一些限制，比如在HTTPS协议下才能调用摄像头和相机。
小礼物走一波，支持作者
赏还没有人赞赏，支持一波吧
