最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【未解决】WebAudioRecorder初始化出错:Try getUserMedia error: DOMException: Failed to construct ‘Worker’

JS crifan 627浏览 0评论

折腾:

【未解决】用WebAudioRecorder.js去实现录音并保存为wav格式

期间,不去参考demo网页,自己写代码,结果还是出现类似错误

代码:

<code>    // audio context + .createScriptProcessor shim
    var audioContext = new AudioContext;

    var testTone = (function() {
        var osc = audioContext.createOscillator(),
            lfo = audioContext.createOscillator(),
            ampMod = audioContext.createGain(),
            output = audioContext.createGain();
        lfo.type = 'square';
        lfo.frequency.value = 2;
        osc.connect(ampMod);
        lfo.connect(ampMod.gain);
        output.gain.value = 0.5;
        ampMod.connect(output);
        osc.start();
        lfo.start();
        return output;
      })();

    function testWebAudioRecorder(){
        console.log("testWebAudioRecorder")


        if (audioContext.createScriptProcessor == null) {
            audioContext.createScriptProcessor = audioContext.createJavaScriptNode;
        }

        var testToneLevel = audioContext.createGain(),
            microphone = undefined,     // obtained by user click
            microphoneLevel = audioContext.createGain(),
            mixer = audioContext.createGain();
        testTone.connect(testToneLevel);
        testToneLevel.gain.value = 0;
        testToneLevel.connect(mixer);
        microphoneLevel.gain.value = 0;
        microphoneLevel.connect(mixer);
        mixer.connect(audioContext.destination);
        

        audioRecorder = new WebAudioRecorder(mixer, {
            workerDir: "js/WebAudioRecorder/", // must end with slash
            onEncoderLoading: function(recorder, encoding) {
                console.log("onEncoderLoading: recorder=", recorder, ", encoding=", encoding)
              },
              onEncoderLoaded: function() {
                console.log("onEncoderLoaded")
              }
        });

        console.log("audioRecorder=", audioRecorder)
    }
</code>

和文件:

已确保都各个js都放在了同一目录下了

但是运行出错:

<code>Try getUserMedia error: DOMException: Failed to construct 'Worker': Script at 'file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorderWav.js' cannot be accessed from origin 'null'.
    at WebAudioRecorder.initWorker (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorder.js:151:21)
    at new WebAudioRecorder (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorder.js:61:10)
    at testWebAudioRecorder (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/main.js:421:25)
    at onSuccessGetUserMedia (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/main.js:441:9)
</code>

Try getUserMedia error: DOMException: Failed to construct ‘Worker’: Script at WebAudioRecorderWav.js’ cannot be accessed from origin ‘null’

Try getUserMedia error: DOMException: Failed to construct ‘Worker’

web worker的使用 – CSDN博客

但是我就想要本地测试,怎么解决?

DOMException: Failed to construct ‘Worker’

Uncaught SecurityError: Failed to construct ‘Worker’: Script · Issue #8 · webpack-contrib/worker-loader

Failed to construct ‘Worker’: Script at ….. · Issue #84 · medialize/sass.js

HTML5规范之Web Worker入门 – CSDN博客

谷歌浏览器web worker出现cannot be accessed from origin ‘null’错误 – CSDN博客

换Safari试试

结果Safari中报错:

<code>ReferenceError: Can't find variable: AudioContext
(匿名函数) — main.js:383
fire — jquery-1.11.1.js:3119
fireWith — jquery-1.11.1.js:3231
ready — jquery-1.11.1.js:3443
completed — jquery-1.11.1.js:3474
</code>

Web Worker – zhoulixue – 博客园

safari ReferenceError: Can’t find variable: AudioContext

javascript – AudioContext on Safari – Stack Overflow

Can I use… Support tables for HTML5, CSS3, etc

Safari 浏览器

版本 11.1.1 (13605.2.8)

是支持:audio api的:

然后试了试:

<code>    // var audioContext = new AudioContext;
    var audioContext = null;
    if (window.AudioContext) {
        audioContext = new window.AudioContext()
    } else if (window.webkitAudioContext) {
        audioContext = new window.webkitAudioContext()
    } else {
        console.error("Not support AudioContext!")
    }
</code>

是可以的:

但是后面的

<code>
    function testAudioInput(){
        console.log("testAudioInput");

        var mediaConstraints = {
            audio: true,
            video: false
        };
        console.log("mediaConstraints=%o", mediaConstraints);

        navigator.mediaDevices
            .getUserMedia(mediaConstraints)
            .then(onSuccessGetUserMedia)
            .catch(function (error) {
                console.error("Try getUserMedia error: %o", error);
                //Chorome click not allow -&gt; DOMException: Permission denied
                //Safari -&gt; Trying to call getUserMedia from an insecure document.
            });
    }
</code>

却报错了:

结果是还是无法正常使用audio的录音功能:

不过前面的写法改为:

Not working on Safari / Chrome (MacOS) · Issue #7 · Okazari/Rythm.js

中的:

<code>    var AudioContext = window.AudioContext   // Default
              || window.webkitAudioContext;  // Safari and old versions of Chrome
    if (!AudioContext) {
        console.error("Not support AudioContext!")
    }
    var audioContext = new AudioContext()
</code>

更合适。

javascript – 音频上下文在Safari – 开源问答

【总结】

此处的WebAudioRecorder去初始化audio时,用到了Web Worker

而Web Worker对于Chrome,不支持:本地调试,会报错:

<code>Try getUserMedia error: DOMException: Failed to construct 'Worker': Script at WebAudioRecorderWav.js' cannot be accessed from origin ‘null'
</code>

而换用(好像是)支持Web Worker的Safar,此处对于代码:

<code>        navigator.mediaDevices
            .getUserMedia(mediaConstraints)
            .then(onSuccessGetUserMedia)
            .catch(function (error) {
                console.error("Try getUserMedia error: %o", error);
                //Chorome click not allow -&gt; DOMException: Permission denied
                //Safari -&gt; Trying to call getUserMedia from an insecure document.
            });
</code>

却又出错:

<code>Trying to call getUserMedia from an insecure document.
Try getUserMedia error: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
</code>

而自己又不想要去:

本地搭建web服务器,然后才能基于Chrome去调试这个用到了Web Worker的WebAudioRecorder

所以只能放弃。

【后记】

后来去:

【已解决】用Recorderjs实现js录音保存为wav格式

看到:

https://github.com/mattdiamond/Recorderjs/blob/master/examples/example_simple_exportwav.html

中提到了:

<code>navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
</code>

试试Safari中改为:

<code>        navigator.mediaDevices
            // .getUserMedia(mediaConstraints)
            .webkitGetUserMedia(mediaConstraints)
</code>

结果:

<code>TypeError: navigator.mediaDevices
            // .getUserMedia(mediaConstraints)
            .webkitGetUserMedia is not a function. (In 'navigator.mediaDevices
            // .getUserMedia(mediaConstraints)
            .webkitGetUserMedia(mediaConstraints)', 'navigator.mediaDevices
            // .getUserMedia(mediaConstraints)
            .webkitGetUserMedia' is undefined)
</code>

看来不是这个问题。

转载请注明:在路上 » 【未解决】WebAudioRecorder初始化出错:Try getUserMedia error: DOMException: Failed to construct ‘Worker’

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
60 queries in 0.094 seconds, using 18.85MB memory