React hook中调用摄像头 实现拍照 录制_hook摄像头虚拟拍照

import {useEffect,useState} from 'react';

export default function webrtc() {

  const [mediaStream,setmediaStream]=useState(null);

  const [Stream ,setStream]=useState(false);

  const [videoBlob,setvideoBlob]=useState(null);

  const [mediaRecorder,SetmediaRecorder]=useState(null);

  const [Type,setType]=useState(false)

    useEffect(()=>{

    },[])

      const getUserMediaStream=(constraints, cb)=>{

        let video = document.querySelector('#viodes');

        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){

              navigator.mediaDevices.getUserMedia({audio: true, video: { facingMode:Type?"user":"environment" }}).then((stream) => {

                  if ("srcObject" in video) {

                        video.srcObject = stream;

                        video.play();

                        // onluzhis(stream)

                        setStream(stream)

                  } else {

                      video.src = window.URL && window.URL.createObjectURL(stream) || stream;

                      console.log('第二种');

                  }

              })

        } else if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {

             // webkit内核浏览器

              if (navigator.mediaDevices === undefined) {

                navigator.mediaDevices = {};

              }

              console.log('我是webkit内核');

        }

     }

     const onClickzp= ()=>{

        const viodes = document.getElementById('viodes')

        const canvas = document.getElementById('canvas')  // canvas元素

        const context = canvas.getContext('2d')

        context.drawImage(viodes, 0, 0) // 将video在canvas上绘制出来

        canvas.toBlob(blob => {   // 将canvas转换为blob

            console.log(blob)

        })

     }

    const updateVideo=(ctx, video , rate)=>{

      ctx.drawImage(video, 0, 0, 600, 600*rate);// 使用视频帧(当前帧)绘制canvas

      video.requestVideoFrameCallback( updateVideo );

   }

const onluzhis= ()=>{

        let options = {

          audioBitsPerSecond: 128000,

          videoBitsPerSecond: 2500000,

          mimeType: "video/webm;codecs=vp8,opus"//webm类型一定要加codecs=vp8,opus，否则会导致录制时候时而可以用时而不能用

      }

      let recorder = new MediaRecorder(Stream,options);

        SetmediaRecorder(recorder)

        recorder.ondataavailable = function(evt) {

            window.bobals = new Blob([evt.data], { type: evt.data.type });

              // setvideoBlob(bobal)

          }

          recorder.start();

          console.log('开始录制');

}

const endsTartOnload = ()=>{

     mediaRecorder.stop();

     setTimeout(function(){

      console.log("录像上传",window.bobals);

      let blob = new Blob([window.bobals]);

      let downloadElement = document.createElement("a");

      let href = window.URL.createObjectURL(blob); //创建下载的链接

      downloadElement.href = href;

       downloadElement.download =  formatDateTime(new Date())+'.webm'; //下载后文件名

      document.body.appendChild(downloadElement);

      downloadElement.click(); //点击下载

      document.body.removeChild(downloadElement); //下载完成移除元素

      window.URL.revokeObjectURL(href); //释放掉blob对象

    },1000);

}

let formatDateTime = function (date) {

        var y = date.getFullYear();

        var m = date.getMonth() + 1;//注意这个“+1”

        m = m < 10 ? ('0' + m) : m;

        var d = date.getDate();

        d = d < 10 ? ('0' + d) : d;

        var h = date.getHours();

        h=h < 10 ? ('0' + h) : h;

        var minute = date.getMinutes();

        minute = minute < 10 ? ('0' + minute) : minute;

        var second=date.getSeconds();

        second=second < 10 ? ('0' + second) : second;

        return y+'-'+m+'-'+d+' '+h+':'+minute+':'+second;

};

const qiehuan=()=>{

    setType(!Type)

    stopCapture()

}

const stopCapture=()=>{

  var video = document.getElementById('viodes');

  if (!video.srcObject) return

  let stream = video.srcObject

  let tracks = stream.getTracks();

  tracks.forEach(track => {

      track.stop()

      getUserMediaStream()

  })

}

  return (

    <div className='webrtc'>

        <div className='tops'>

            <video  id='viodes'></video>

            <canvas id="canvas"></canvas>

        </div>

        <div>当前摄像头：{Type?'前置':'后置'}</div>

          <div className='buttons'>

            <button onClick={getUserMediaStream}>获取摄像头</button>

            <button onClick={onClickzp}>点击抓拍</button>

            <button onClick={onluzhis}>点击录制</button>

            <button onClick={endsTartOnload}>结束录制并且下载视频</button>

            <button   onClick={qiehuan}>切换摄像头</button>

          </div>

    </div>

  )

}