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();
        });
    
    
    
    });
    
  • 相关阅读:
    第51天 [js] 字符串相连有哪些方式?哪种最好?为什么?
    第52天 [js] 什么是事件委托?它有什么好处?能简单的写一个例子吗?
    np.ndarray与Eigen::Matrix之间的互相转换
    C++向assert加入错误信息
    CeiT:训练更快的多层特征抽取ViT
    CoAtNet: 90.88% Paperwithcode榜单第一,层层深入考虑模型设计
    正式启用Danube 官方站点
    go 编译报错 package embed is not in GOROOT (/usr/local/go/src/embed)
    cloudreve兼容acme.sh脚本
    Git的交叉编译
  • 原文地址:https://www.cnblogs.com/xym4869/p/13570481.html
Copyright © 2011-2022 走看看