您当前的位置：首页 > 前端 > javascript > js实现摄像头拍照录像预览

js实现摄像头拍照录像预览

日期：2021-11-03 02:11:14 浏览：577

使用js实现简单的拍照,录像

MediaRecorder用于记录视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>pz</title>
    <style>
        * {
            padding: 0;
            margin: 2px;
        }

        video, canvas, img {
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<video id="video" width="400" height="300"></video>
<video id="video2" width="400" height="300"></video>
<canvas id="canvas" width="400" height="300"></canvas>
<img id="img" width="400" height="300">
<br>
<button id="tack">拍照</button>
<button id="start_record">开始录像</button>
<button id="stop_record">停止录像</button>
<button id="closeCamera">关闭摄像头</button>
<script>

    var video = document.getElementById('video'),
        video2 = document.getElementById('video2'),
        tack = document.getElementById('tack'),
        start_record = document.getElementById('start_record'),
        closeCamera = document.getElementById('closeCamera'),
        stop_record = document.getElementById('stop_record'),
        canvas = document.getElementById('canvas'),
        img = document.getElementById('img'),
        ctx = canvas.getContext('2d'),
        mediaRecorder=null,
        streamTrack
    //媒体对象
    let container = {video: true, audio: false}
    navigator.mediaDevices.enumerateDevices().then((res) => {
        for (const x of res) {
            // console.log(x.label)//遍历设备
        }
    })

    navigator.mediaDevices.getUserMedia(container)
        .then((stream) => {
            video.srcObject = stream
            video.onloadeddata = function () {
                this.play()
                setInterval(()=>{
                    //将video绘制到canvas上
                    ctx.drawImage(video, 0, 0, video.width, video.height)
                    let url=canvas.toDataURL("image/png")
                    img.src=url;
                },200)
            }
            //录像保存
            mediaRecorder=new MediaRecorder(stream)
            let chunks=[],startTime=0
            streamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
            console.log(streamTrack)

            //停止录像的时候,才会发生这个事件
            mediaRecorder.ondataavailable=function (e) {
                console.log(e)
                console.log(mediaRecorder.mimeType)
                chunks.push(e.data)
            }

            mediaRecorder.onstop=function (e) {
                // recorderFile=new Blob(chunks,{type:mediaRecorder.mimeType})
                recorderFile=new Blob(chunks,{type:'video/mp4'})
                let url=URL.createObjectURL(recorderFile)
                console.log(url)
                video2.src=url
                video2.onloadeddata=function () {
                    this.play()
                }
                chunks=[]
            }
            mediaRecorder.start()
            setTimeout(function () {
                mediaRecorder.stop()
            },10000)

        }).catch((error) => {
        console.log(error,"请确保浏览器允许获取音视频权限")
    })

    stop_record.onclick=function () {
        navigator.mediaDevices
    }
    stop_record.onclick=function (e) {
        mediaRecorder.stop()
    }
    closeCamera.onclick=function (e) {
        streamTrack && streamTrack.stop()
    }
</script>
</body>
</html>

Tags: 拍照 js