zoukankan      html  css  js  c++  java
  • js录制视频并保存

    使用webAPI录制视频

    经测试, 只在谷歌和火狐浏览器里起效。

    代码:

    const streamVideo = document.querySelector('.stream')
    const playVideo = document.querySelector('.play');
    let chunk;
    const download = document.querySelector('#download');
    let recorder;
    let mediaStream;
    document.querySelector('.start').addEventListener('click', start);
    document.querySelector('.end').addEventListener('click', end);
    document.querySelector('.play-video').addEventListener('click', play);
    
    // MediaRecorder 测试
    const constraints = {
      audio: false,
      video: true,
    };
    
    function start() {
      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          mediaStream = stream;
          streamVideo.srcObject = stream;
          streamVideo.play();
          recorder = new MediaRecorder(stream);
          recorder.ondataavailable = e => {
            chunk = e.data;
            download.href = URL.createObjectURL(chunk);
          };
          recorder.start();
        })
    }
    
    function end() {
      streamVideo.pause();
      recorder.stop();
      mediaStream.getTracks().forEach(track => {
        track.stop();
      });
    }
    
    function play() {
      playVideo.src = URL.createObjectURL(chunk);
      playVideo.play();
    }
    

    完整代码;
    在线演示, 使用谷歌或火狐浏览器打开

  • 相关阅读:
    php详解和优化
    接口
    抽象类
    对象转型
    面向对象2
    Super关键字
    Object类介绍
    有效处理java异常的三个原则
    this关键字
    equals方法
  • 原文地址:https://www.cnblogs.com/scarecrowlxb/p/9573976.html
Copyright © 2011-2022 走看看