master

分支 (1)

管理

管理

master

screen-recording-demo
/
screen.html

<!--
 * @Author: 东方凝洛 [email protected]
 * @Date: 2023-05-15 18:49:04
 * @LastEditors: 东方凝洛 [email protected]
 * @LastEditTime: 2023-06-25 15:09:00
 * @FilePath: \gccrcc:\Users\张帆\Desktop\a.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html 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>
    <style>
        button{
            width:100px;height:30px;color:aqua;background:#021a3f;border-radius: 5px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <button onClick="init()" >打开摄像头</button>
            <button onClick="screenInit()" >获取屏幕信息</button>
            <div style="margin-top:10px;">
                <button c1ass="btn" onClick="startRecord()">升始录制</button>
            <button class="stop" onClick="stop()">停止录制</button>
            <button class="play" onClick="play()">播放</button>
            </div>

        </div>
        <div style="display:flex;margin-top:10px;">
            <div >
            <video style="width:400px;height:300px;" id="video"  muted autoplay controls></video>
                <div style="text-align: center;">录制内容</div>
            </div>
            <div style="margin-left:10px;">
                <video  style="width:400px;height:300px;" id="playVideo" autoplay controls></video>
                <div style="text-align: center;">播放内容</div>
            </div>
        </div>

    </div>


<script>
    var myVideo=document.getElementById("video")
    var playVideo=document.getElementById("playVideo")
    let stream=null
    let recordInstance=null
    let  blobSlice=[]
    const init=async ()=>{

        this.stream= await navigator.mediaDevices.getUserMedia({
            audio: true,
          video:{
            width:1000,
            height:600
          },

         })

          myVideo.srcObject=this.stream
          myVideo.play()


      }
      const screenInit=async ()=>{

        this.stream= await await navigator.mediaDevices.getDisplayMedia({audio: true,video:true})

          myVideo.srcObject=this.stream
          myVideo.play()


      }
    const startRecord=()=>{
        this.recordInstance=null
        this.recordInstance =new MediaRecorder(myVideo.srcObject,{mimeType:'video/webm'})
          console.log('this.recordInstance ',this.recordInstance )
          if(this.recordInstance){
                this.recordInstance.start()
                this.recordInstance.ondataavailable=(e)=>{
                    blobSlice=[]
                    blobSlice.push(e.data)
                }

            this.recordInstance.onstop=(e)=>{
                console.log(blobSlice,'123')
            }
          }

    }
    const stop=()=>{
        if( this.recordInstance){
             this.recordInstance.stop()
        }

    }
    const play=()=>{
        const blob =new Blob(blobSlice,{type:'video/mp4'})
        const videoUrl =URL.createObjectURL(blob)
        console.log(videoUrl)
        playVideo.src=videoUrl
        playVideo.play()
    }
</script>
</body>
</html>