Question

这是一个代码，我们在其中使用网络摄像头录制视频并将其再次显示在网页上。

我想做的是将该视频下载到我的录制视频中10秒钟，然后将视频剪辑直接传递给javascript，供我可以使用的后端。我不需要下载按钮。

我想在我的ML项目中使用该视频，但是我陷在此网页问题上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>MediaCapture and Streams API</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header>
        <h1>Title</h1>
    </header>

    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Impedit molestiae itaque facere totam saepe tempore
            esse temporibus, quae reprehenderit aliquid iusto ea laborum, iure eligendi odio exercitationem sapiente
            illum quos.</p>
        <p><button id="btnStart">START RECORDING</button><br />
            <button id="btnStop">STOP RECORDING</button></p>
        <video controls></video>
        <video id="vid2" controls></video>
        <!-- could save to canvas and do image manipulation and saving too -->
    </main>
    <script>
        let constraintObj = {
            audio: false,
            video: {
                facingMode: "user",
                width: { min: 640, ideal: 1280, max: 1920 },
                height: { min: 480, ideal: 720, max: 1080 }
            }
        };

        // width: 1280, height: 720  -- preference only
        // facingMode: {exact: "user"}
        // facingMode: "environment"
        //handle older browsers that might implement getUserMedia in some way

        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
            navigator.mediaDevices.getUserMedia = function (constraintObj) {
                let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraintObj, resolve, reject);
                });
            }
        } else {
            navigator.mediaDevices.enumerateDevices()
                .then(devices => {
                    devices.forEach(device => {
                        console.log(device.kind.toUpperCase(), device.label);
                        //, device.deviceId
                    })
                })
                .catch(err => {
                    console.log(err.name, err.message);
                })
        }
        navigator.mediaDevices.getUserMedia(constraintObj)
            .then(function (mediaStreamObj) {
                //connect the media stream to the first video element
                let video = document.querySelector('video');
                if ("srcObject" in video) {
                    video.srcObject = mediaStreamObj;
                } else {
                    //old version
                    video.src = window.URL.createObjectURL(mediaStreamObj);
                }
                video.onloadedmetadata = function (ev) {
                    //show in the video element what is being captured by the webcam
                    video.play();
                };

                //add listeners for saving video/audio
                let start = document.getElementById('btnStart');
                let stop = document.getElementById('btnStop');
                let vidSave = document.getElementById('vid2');
                let mediaRecorder = new MediaRecorder(mediaStreamObj);

                let chunks = [];

                start.addEventListener('click', (ev) => {
                    mediaRecorder.start();
                    console.log(mediaRecorder.state);
                })

                stop.addEventListener('click', (ev) => {
                    mediaRecorder.stop();
                    console.log(mediaRecorder.state);
                });

                mediaRecorder.ondataavailable = function (ev) {
                    chunks.push(ev.data);
                }

                mediaRecorder.onstop = (ev) => {
                    let blob = new Blob(chunks, { 'type': 'video/mp4;' });
                    chunks = [];
                    let videoURL = window.URL.createObjectURL(blob);
                    vidSave.src = videoURL;
                }
            })

            .catch(function (err) {
                console.log(err.name, err.message);
            });

        /*********************************
        getUserMedia returns a Promise
        resolve - returns a MediaStream Object
        reject returns one of the following errors
        AbortError - generic unknown cause
        NotAllowedError (SecurityError) - user rejected permissions
        NotFoundError - missing media track
        NotReadableError - user permissions given but hardware/OS error
        OverconstrainedError - constraint video settings preventing
        TypeError - audio: false, video: false
        *********************************/
    </script>
</body>

</html>

如何使用javascript下载视频

0 个答案: