html5+JS调用摄像头示例

最新推荐文章于 2024-06-24 14:22:31 发布

学习&实践爱好者

最新推荐文章于 2024-06-24 14:22:31 发布

阅读量5.6k

点赞数 4

分类专栏： HTML5与CSS3 JavaScrip技术前端开发文章标签： html5 javascript

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

版权

JavaScrip技术同时被 3 个专栏收录

123 篇文章 24 订阅

订阅专栏

HTML5与CSS3

78 篇文章 14 订阅

订阅专栏

前端开发

65 篇文章 4 订阅

订阅专栏

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 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>

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