如何使用JavaScript录制视频

发布于 2025-02-08 23:55:18 字数 1222 浏览 0 评论 0原文

我在Google中找到了一个可以启用网络摄像头的代码，但是我想编写一个录制视频并在停止时自动保存在我的目录服务器中的功能。我的代码：

index.html

<head>
    <title>CAM</title>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body onload="main()">
    <canvas id="myCanvas"></canvas>    
    <button id ="record">Record</button>
    <button id ="stop">Stop</button>
</body>

脚本

let VIDEO = null;
let CONTEXT = null;

function main(){
    CANVAS = document.getElementById("myCanvas");
    CONTEXT = CANVAS.getContext("2d");
    CANVAS.width = window.innerWidth;
    CANVAS.height = window.innerHeight;


    let promise = navigator.mediaDevices.getUserMedia({video:true});
    promise.then(function(signal){
        VIDEO = document.createElement("video");
        VIDEO.srcObject = signal;
        VIDEO.play();

        VIDEO.onloadeddata = function(){
            updateCanvas();
        }
    }).catch(function(err){
        alert("Camera error: "+err);
    })
}

function updateCanvas(){
    CONTEXT.drawImage(VIDEO, 0, 0);
    window.requestAnimationFrame(updateCanvas);
}

。

原文

I found a code in the google that I can enable my webcam, but I would like to write a function that record the video and save in my directory server automatically when I stop it.
My code:

index.html

<head>
    <title>CAM</title>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body onload="main()">
    <canvas id="myCanvas"></canvas>    
    <button id ="record">Record</button>
    <button id ="stop">Stop</button>
</body>

Script.js

let VIDEO = null;
let CONTEXT = null;

function main(){
    CANVAS = document.getElementById("myCanvas");
    CONTEXT = CANVAS.getContext("2d");
    CANVAS.width = window.innerWidth;
    CANVAS.height = window.innerHeight;


    let promise = navigator.mediaDevices.getUserMedia({video:true});
    promise.then(function(signal){
        VIDEO = document.createElement("video");
        VIDEO.srcObject = signal;
        VIDEO.play();

        VIDEO.onloadeddata = function(){
            updateCanvas();
        }
    }).catch(function(err){
        alert("Camera error: "+err);
    })
}

function updateCanvas(){
    CONTEXT.drawImage(VIDEO, 0, 0);
    window.requestAnimationFrame(updateCanvas);
}

Someone can help me?

分享到QQ

分享到微博