当前位置：网站首页>Recordrtc video recording, playback, screenshot, Download

Recordrtc video recording, playback, screenshot, Download

2022-07-22 13:22:00 【Hehe cow】

RecordRTC Video recording and playing

recordRTC It is a video recording tool in the front end , Used for audio + video + The screen + canvas （2D+3D Animation ） Recorded WebRTC JavaScript library .
All relevant codes will be posted at the bottom .
Insert picture description here

1. introduce recordRTC

Get into recordRTC Of javascript library The base address Choose to use recordRTC How to introduce .
Insert picture description here

2. Write the structure of the page

<video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"
    controlslist="nofullscreen" width="500" height="500">
</video>
<canvas id="canvas"></canvas>
<img id="img"></img>
<video id="myVideo1" playsinline controls preload="auto" playsinline autoplay poster 	controlslist="nodownload"
    controlslist="nofullscreen" width="500" height="500">
</video>
<button onclick="openRecord()"> Turn on recording </button>
<button onclick="play()"> Video playback </button>
<button onclick="videoDown()"> Video downloading </button>
<button onclick="screenshot()"> Screenshot </button>

3. Real time video playback

3.1 Start recording and get video Video stream of

adopt navigator.mediaDevices.getUserMedia() Go get the video stream , Want to know more about getting the video stream Click here
Insert picture description here

3.2 Get the video stream

Get the video stream and get it video Of id, And then through srcObject Realize video recording and real-time playback , Then start playing the video stream immediately .
Insert picture description here

4. Turn video recording on and off

Get the video stream adopt RecordRTC() Method in the return value of the method to start video recording .
Then the video recording ends in ten seconds .
Turn off the camera and recording equipment at the end of recording .
call openRecord() Method to start video recording

	   			// Turn on recording 
                recorder.startRecording()
				const sleep = m => new Promise(r => setTimeout(r, m));
                await sleep(10000);
                // End the video recording in ten seconds 
                recorder.stopRecording(function (audioURL) {
                    // window.open(audioURL)
                    close()
                })

Insert picture description here

5. Play the video

Get RecordRTC() Return value of method recorder.
Through this return value call toURL() Method , This method returns a playable url
Put this url Assign to the second video id by myVideo1, Then click the video play button , You can play the video just recorded .

6. Video downloading

Get RecordRTC() Return value of method recorder
adopt recorder.getBlob() Method gets and returns blob Boolean value .
Finally through RecordRTC Methods provided invkeSaveAsDialog( Boolean value , Format of video download ) Go download the video

Insert picture description here

7. Video capture

Set up canvas Width and height video The values are the same
With id by myVideo Draw a picture to draw canvas Draw a picture .

Insert picture description here

Above is RecordRTC Playback of video recording , Recording , The playback , Screenshots and other functions Learn more You can refer to Official documents

Next, we will show all relevant codes I hope I can help you .

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
    <!-- <script script src=" https://unpkg.com/@vueuse/shared "> </script>
    <script src="https://unpkg.com/@vueuse/core"></script> -->
</head>
<video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"
    controlslist="nofullscreen" width="500" height="500">
</video>
<canvas id="canvas"></canvas>
<img id="img"></img>
<video id="myVideo1" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"
    controlslist="nofullscreen" width="500" height="500">
</video>
<button onclick="openRecord()"> Turn on recording </button>
<button onclick="play()"> Video playback </button>
<button onclick="videoDown()"> Video downloading </button>
<button onclick="screenshot()"> Screenshot </button>

<body>
    <script>
        /*
            string Database name ,number The version number is not transferred, and the default is 1
        */

        // console.log(useUserMedia)
        var myVideo = document.getElementById('myVideo')
        var canvas = document.getElementById('canvas')
        var img = document.getElementById('img')
        let recorder = new Object();
        var videoStearm = new Object();
        function openRecord() {
            console.log(123)
            navigator.mediaDevices.getUserMedia({
                video: {
                    width: 1280,
                    height: 720,
                    frameRate: 24
                },
                audio: true,
                elementClass: 'multi-streams-mixer'
            }).then(async function (stearm) {
                videoStearm = stearm
                // Assign a stream to video  Realize real-time recording 
                myVideo.srcObject = stearm;
                console.log(myVideo.srcObject, 'srcobject')
                // Start playing the video stream immediately 
                myVideo.play();
                recorder = RecordRTC(stearm, {
                    type: 'video',
                    // Video type 
                    mimeType: 'video/mp4',
                    timeSlice: 1000,
                    // The callback function must be the same as the above timeSlice Slice time is used together 
                    ondataavailable: function (blob) {
                        // blob For every second of video 
                        console.log(blob, '00000000')
                    },
                    //  Get the timestamp of the time segment 
                    onTimeStamp: function (timestamp) {
                        console.log(timestamp)
                    },
                    bitsPerSecond: 128000,
                })
                console.log(stearm, ' Video streaming ');
                // Turn on recording 
                recorder.startRecording()


                const sleep = m => new Promise(r => setTimeout(r, m));
                await sleep(10000);
                // End the video recording in ten seconds 
                recorder.stopRecording(function (audioURL) {
                    // window.open(audioURL)
                    close()
                })

            }).catch((err) => { console.log(' The user did not open the video permission ') })
        }
        // Video downloading 
        function videoDown() {
            let blob = recorder.getBlob();
            console.log(blob, '0000000')
            // Video downloading  invokeSaveAsDialog（ Parameters 1 For video streaming blob, Parameters 2 Is a video type ）
            invokeSaveAsDialog(blob, 'video.mp4');
        }
        // Video playback 
        function play() {
            let url = recorder.toURL();
            myVideo1.src = url
        }
        // Close browser video and audio 
        function close() {
            console.log(1234)
            console.log(videoStearm, '0000')
            console.log(videoStearm.getTracks(), '0000');
            videoStearm.getTracks()[0].stop()
            videoStearm.getTracks()[1].stop()
        }
        // Screenshot 
        function screenshot() {
                // Screenshot record the first screenshot of the page 
                canvas.width = myVideo.width
                canvas.height = myVideo.height
                canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height)
                let url = canvas.toDataURL('image/jpeg')
                console.log(url, '0909')
        }
    </script>
</body>

</html>

原网站

版权声明
本文为[Hehe cow]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207212259563538.html