zoukankan      html  css  js  c++  java
  • 前端-点击stop()后删除录制图标

    我正在使用MediaStreamRecorder.js库进行Java音频捕获。我发现的唯一问题是,当我单击“停止”以停止录制时,该选项卡上的红色录制图标仍在那里。

    解决:

    navigator.getUserMedia(mediaConstraints, function(stream) {
        window.streamReference = stream;
        onMediaSuccess(stream);
    }, onMediaError);
    
    function stopStream() {
        if (!window.streamReference) return;
    
        window.streamReference.getAudioTracks().forEach(function(track) {
            track.stop();
        });
    
        window.streamReference.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    
        window.streamReference = null;
    }
    

    完整代码:

     <div id="result"></div> 
    <button class="play">Start</button>
    <button class="stop">Stop</button>
    <button class="resume">Resume</button>
    <button class="salvar">Salvar</button>
      
     <div class="contador"></div>
    
    var mediaConstraints = {
        audio: true
    };
    
    var mediaRecorder;
    var blobURL;
    
    function onMediaSuccess(stream) {
        window.streamReference = stream;
        $(function() {
    
    
            mediaRecorder = new MediaStreamRecorder(stream);
            mediaRecorder.mimeType = 'audio/wav';
            mediaRecorder.audioChannels = 1;
            mediaRecorder.ondataavailable = function(blob) {
                // POST/PUT "Blob" using FormData/XHR2
                blobURL = URL.createObjectURL(blob);
                $("#result").append('<audio controls src="' + blobURL + '"></audio><br><a href="' + blobURL + '" target="_blank">' + blobURL + '</a>');
            };
            mediaRecorder.start(5000 * 5000);
            setTimeout(function() {
                mediaRecorder.stop();
            }, 120 * 1000); //Se não clicar em parar, a gravação para automaticamente em 2 minutos.
    
        });
    }
    
    function onMediaError(e) {
        console.error('media error', e);
    }
    
    function onStop() {
        mediaRecorder.stop();
        mediaRecorder.stream.stop();
    }
    
    var interval;
    
    function contadorIncremento() {
        var count = 1;
        interval = setInterval(function() {
            if (count > 1)
                $('.contador').html("setInterval: Ja passou " + count++ + " segundos!");
            else
                $('.contador').html("setInterval: Ja passou " + count++ + " segundo!");
        }, 1000);
    }
    
    function stopContadorIncremento() {
        clearTimeout(interval);
        $('.contador').html("");
    }
    
    $(function() {
    
        $(".play").on("click", function() {
            navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
            contadorIncremento();
    
        });
    
        $(".stop").on("click", function() {
            mediaRecorder.stop();
            stopContadorIncremento();
    
            if (window.streamReference) {
                window.streamReference.getAudioTracks().forEach(function(track) {
                    track.stop();
                });
    
                window.streamReference.getVideoTracks().forEach(function(track) {
                    track.stop();
                });
    
                window.streamReference = null;
            }
        });
    
        $(".resume").on("click", function() {
            mediaRecorder.resume();
        });
    
        $(".salvar").on("click", function() {
            mediaRecorder.save();
        });
    
    
    
    });
    
  • 相关阅读:
    Spring警告: Could not load driverClass com.mysql.jdbc.Driver(待解决)
    马士兵_JAVA自学之路(为那些目标模糊的码农们)
    Spring报错:java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
    安装spring报错:Cannot complete the install because of a conflicting dependency.
    MYSQL外键(Foreign Key)的使用
    MongoDB(Roboit3T)中导出集合数据
    Express安装
    ES6学习
    C#中添加log4net(日志文件)
    登录MES系统后台服务的操作
  • 原文地址:https://www.cnblogs.com/xym4869/p/13570481.html
Copyright © 2011-2022 走看看