html调用摄像头实现拍照或录制视频

最新推荐文章于 2024-09-10 12:55:25 发布

么么哒思密达

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量3.3k

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_46410916/article/details/120064705

版权

这篇博客展示了如何使用HTML5的getUserMedia和MediaRecorder API来调用摄像头实现拍照和录制视频。提供了三个示例代码，分别演示了基本的视频流播放、录制和下载，以及保存视频到本地和上传的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html调用摄像头实现拍照或录制视频

从网上搜刮了两个可以实现的demo，记录一下。

示例1

<!--
 * @Date: 2020-05-22 09:59:35
 * @LastEditors: Lee
 * @LastEditTime: 2020-05-22 16:30:39
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="begin" onclick="getUserMediaStream({ audio: true, video: { facingMode: 'user' } })">开始</button>
    <button id="record" disabled onclick="toggleRecording()">录制</button>
    <button id="play" disabled onclick="play()">播放</button>
    <button id="download" disabled onclick="bufferToDataUrl()">下载</button>
    <button id="reStart" disabled>重新开始</button>
    <button id="upload">上传</button>
    <video id="gumVideo" width="500" height="500" autoplay='autoplay' muted></video>
    <video id="gumVideo2" width="500" height="500" autoplay='autoplay' muted></video>
    <canvas id="myCanvas"></canvas>
    <style>
        /* 镜像显示哈哈 */
        #gumVideo {
     
            transform: rotateY(180deg);
        }
    </style>
    <script>
        var beginButton = document.querySelector('button#begin');
        var recordButton = document.querySelector('button#record');
        var playButton = document.querySelector('button#play');
        var downloadButton = document.querySelector('button#download');
        var reStartButton = document.querySelector('button#reStart');
        var uploadBtn = document.querySelector('button#upload');
        var gumVideo = document.querySelector('#gumVideo');
        var gumVideo2 = document.querySelector('#gumVideo2');

        var mediaRecorder;
        var recordedBlobs;
        var sourceBuffer;
        console.log(gumVideo)
        //打开摄像头
        function getUserMediaStream(constraints, cb) {
     
            navigator.mediaDevices.getUserMedia(constraints)
                .then(handleSuccess)
                .catch(err => {
      cb(err, null); });
        }
        //页面播放视频流
        function handleSuccess(stream) {
     
            console.log(stream)
            recordButton.disabled = false;
            console.log('getUserMedia() got stream: ', stream);
            window.stream = stream;
            if (window.URL) {
     
                // gumVideo.src = window.URL.createObjectURL(stream);
                gumVideo.srcObject = stream;
                // return new Promise((resolve) => {
     
                //     gumVideo.onloadedmetadata = () => {
     
                //         resolve(gumVideo);
                //     };
                // });
                // gumVideo.play()
                console.log(gumVideo.srcObject)
            } else {
     
                gumVideo.src = stream;
                console.log(gumVideo)
            }

            var c = document.getElementById("myCanvas");
            c.width = 400;
            c.height = 300;
            var i;
            gumVideo.addEventListener('play', function () {
     
                var p = document.createElement('p');
                p.innerText = 'hello';
                // i = window.setInterval(function () {
     
                //     if (littleVideo) {
     
                //         drawLittleVideo(c);
                //     } else {
     
                //         drawBigVideo(c);
                //     }
                // }, 20);
            }, false);
            gumVideo.addEventListener('pause', function () {
      if (i) {
      window.clearInterval(i); } }, false);
            gumVideo.addEventListener('ended', function () {
      if (i) {
      clearInterval(i); } }, false);
        }

        function startRecording() {
     
            recordedBlobs = [];
            var options = {
      mimeType: 'video/webm;codecs=vp9' };
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
     
                console.log(options.mimeType + ' is not Supported');
                options = {
      mimeType: 'video/webm;codecs=vp8' };
                if (!MediaRecorder.isTypeSupported(options.mimeType)) {
     
                    console.log(options.mimeType + ' is not Supported');
                    options = {
      mimeType: 'video/webm' };
                    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
     
                        console.log(options.mimeType + ' is not Supported');
                        options = {
      mimeType: '' };
                    }
                }
            }
            try {
     
                mediaRecorder = new MediaRecorder(window.stream, options);
            } catch (e) {
     
                console.error('Exception while creating MediaRecorder: ' + e);
                alert('Exception while creating MediaRecorder: '
                    + e + '. mimeType: ' + options.mimeType);
                return;
            }
            console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
            recordButton.textContent = '停止';
            playButton.disabled = true;
            downloadButton.disabled = true;
            reStartButton.disabled = true;
            mediaRecorder.onstop = handleStop;
            mediaRecorder.ondataavailable = handleDataAvailable;
            mediaRecorder

最低0.47元/天解锁文章