js+html5调用手机摄像头

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>

<title>html5调用摄像头截图</title>

</head>

<body>

<br>

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>

<title>html5调用摄像头录制视频</title>

</head>

<body>

<div id="startButton" class="button">Start</div>

<h2>Preview</h2>

</div>

<a id="downloadButton" class="button">Download</a>

</div>

<h2>Recording</h2>

</div>

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 recording

preview.srcObject.getTracks().forEach((track) => track.stop());

recorder.stop();

// Play recorded video

let recordedBlob = new Blob(dataChunks, { type: "video/webm" });

recording.src = URL.createObjectURL(recordedBlob);

// Save download video， click the download button， you can download it

downloadButton.href = recording.src;

downloadButton.download = "RecordedVideo.webm";

});

startButton.addEventListener("click", () => {

// get the stream

navigator.mediaDevices

.getUserMedia({

audio: true,

video: true,

})

.then((stream) => {

// set the stream to left video

preview.srcObject = stream;

// set the stream to <a> for download

downloadButton.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 media

preview.captureStream =

preview.captureStream || preview.mozCaptureStream;

startRecording(preview.captureStream());

})

.catch((err) => {

console.log("recording error: ", err);

});

</script>

</body>

</html>

————————————————

原文链接：https://blog.csdn.net/cnds123/article/details/122515662