HTML5调用摄像头录制视频

最新推荐文章于 2025-03-17 12:11:01 发布

justingq

最新推荐文章于 2025-03-17 12:11:01 发布

阅读量2.2w

点赞数 6

分类专栏：代码积累文章标签： html5 视频 webrtc

本文链接：https://blog.youkuaiyun.com/justingq/article/details/78552030

版权

这篇博客介绍了如何利用HTML5的WebRTC API来调用摄像头并录制视频，特别指出该方法不适用于不支持WebRTC的IE浏览器，并提到了fileSaver.js库在保存录制视频时的作用。

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

HTML5调用摄像头录制视频

不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头


<!DOCTYPE html>
<html>

<head>
    <title>video recoder</title>
    <script src="fileSaver.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<style>
    body{
        background-color:#EFEDEF;
    }
</style>
<body>
    <article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;">

        <section class="experiment" style="width:320px; height:240px;border:1px solid green; margin:50px auto;">
            <div id="videos-container" style="width:320px; height:240px;">
            </div>
        </section>
        <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
            <button id="openCamera">打开摄像头</button>
            <button id="start-recording" disabled>开始录制</button>
            <button id="save-recording" disabled>保存</button>
            <!--<a href="javascript:void(0)" onclick="send()">发送</a>-->
        </section>
 </article>
<script>
            var mediaStream;
            var recorderFile;
            var stopRecordCallback;
            var openBtn = document.getElementById("openCamera");
            var startBtn = document.getElementById("start-recording");
            var saveBtn = document.getElementById("save-recording");
            openBtn.onclick = function() {
    
                this.disabled = true;
                startBtn.disabled=false;
                openCamera();
            };

            startBtn.onclick = function() {
    
                this.disabled =