欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Babylon使用麥克風(fēng)并處理常見問題解決

 更新時間:2023年04月03日 15:00:02   作者:方寸匠心  
這篇文章主要為大家介紹了Babylon使用麥克風(fēng)并處理常見問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引言

在Babylon.js中媒體設(shè)備流使用起來有很多坑,我們將在本文中逐一說明這些坑并提供相應(yīng)的解決方案。

問題1:Property 'constraints' does not exist on type 'Window & typeof globalThis'.

在比較新的瀏覽器中,navigator對象中的getUserMedia方法已經(jīng)被廢棄了。取而代之的是navigator.mediaDevices.getUserMedia(),并且constraints應(yīng)該作為參數(shù)傳入。

const constraints = { audio: true, video: false };
navigator.mediaDevices.getUserMedia(constraints)

對于問題 Property 'constraints' does not exist on type 'Window & typeof globalThis'.ts(2339)。這是因為 TypeScript 沒有識別到constraints變量的類型,可以嘗試直接定義一個 const constraints 常量。

問題2: Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)

如果在使用媒體設(shè)備流時,你遇到了“Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)” 這個問題出現(xiàn)在TypeScript項目中。因為該類型Script不認識window.stream, 所以我們需要將它聲明為any類型。解決方法如下:

(window as any).stream = stream;

這讓編譯器知道 window 對象現(xiàn)在具有一個名為stream的屬性。

問題3: Property 'oninactive' does not exist on type 'MediaStream'.ts(2339)

在較新版本的Web API中,MediaStream對象不再包含oninactive屬性,需要更改事件監(jiān)聽方式。 解決方法如下:

stream.addEventListener('inactive', () => {
    console.log('Stream ended ... ...');
});

而不是

stream.oninactive = () => {
    console.log('Stream ended ... ...');
};

此更改暴露了更多事件,同時也需要更改您的代碼來處理它們。

總結(jié)

在 Babylon.js 中,使用媒體設(shè)備流時出現(xiàn)的問題通常是由于您沒有根據(jù)最新的約定執(zhí)行操作,或者由于 TypeScript 編譯器不知道您所做的更改而導(dǎo)致的。通過遵循我們提供的指南和解決方案,您應(yīng)該能夠輕松地解決這些問題。

示例源碼(修改前):

loadingASoundFromTheMicrophone = (scene: Scene, canvas: HTMLCanvasElement) => {
        let engine = scene.getEngine();
        let freeCamera = new FreeCamera("freeCamera", new Vector3(0, 5, -10), scene);
        freeCamera.setTarget(Vector3.Zero());
        freeCamera.attachControl(canvas, true);
        let hemisphericLight = new HemisphericLight("hemisphericLight", new Vector3(0, 1, 0), scene);
        hemisphericLight.intensity = 0.7;
        let sphere = MeshBuilder.CreateSphere("sphere", {segments: 16, diameter: 2}, scene);
        const constraints = window.constraints = { audio: true, video: false };
        function handleSuccess(stream: MediaStream) {
            const audioTracks = stream.getAudioTracks();
            console.log('Got stream with constraints:', constraints);
            console.log(`Using audio device: ${audioTracks[0].label}`);
            stream.oninactive = function() {
                console.log('Stream ended');
            };
            window.stream = stream; // make variable available to browser console
            var bjsSound = new Sound("mic", stream, scene);
            bjsSound.attachToMesh(sphere);
            bjsSound.play();
        }
        function handleError(error: any) {
            console.log('navigator.getUserMedia error: ', error);
        }
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        return scene;
    }

示例源碼(修改后):

loadingASoundFromTheMicrophone = (scene: Scene, canvas: HTMLCanvasElement) => {
        let engine = scene.getEngine();
        let freeCamera = new FreeCamera("freeCamera", new Vector3(0, 5, -10), scene);
        freeCamera.setTarget(Vector3.Zero());
        freeCamera.attachControl(canvas, true);
        let hemisphericLight = new HemisphericLight("hemisphericLight", new Vector3(0, 1, 0), scene);
        hemisphericLight.intensity = 0.7;
        let sphere = MeshBuilder.CreateSphere("sphere", {segments: 16, diameter: 2}, scene);
        const constraints = {  audio: true, video: false };
        function handleSuccess(stream: MediaStream) {
            const audioTracks = stream.getAudioTracks();
            console.log('Got stream with constraints:', constraints);
            console.log(`Using audio device: ${audioTracks[0].label}`);
            stream.addEventListener('inactive', () => {
                console.log('Stream ended ... ...');
            });
            (window as any).stream = stream; // make variable available to browser console
            var bjsSound = new Sound("mic", stream, scene);
            bjsSound.attachToMesh(sphere);
            bjsSound.play();
        }
        function handleError(error: any) {
            console.log('navigator.getUserMedia error: ', error);
        }
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        return scene;
    }

以上就是Babylon使用麥克風(fēng)并處理常見問題解決的詳細內(nèi)容,更多關(guān)于Babylon麥克風(fēng)常見問題的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Javascript 正則表達式校驗數(shù)字的簡單實例

    Javascript 正則表達式校驗數(shù)字的簡單實例

    下面小編就為大家?guī)硪黄狫avascript 正則表達式校驗數(shù)字的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • javascript操作Cookie(設(shè)置、讀取、刪除)方法詳解

    javascript操作Cookie(設(shè)置、讀取、刪除)方法詳解

    這篇文章主要詳細向大家介紹了javascript操作Cookie的方法,包括設(shè)置、讀取、刪除操作,十分的細致全面,附上示例,是篇非常不錯的文章,這里推薦給大家。
    2015-03-03
  • JavaScript實現(xiàn)橫版菜單欄

    JavaScript實現(xiàn)橫版菜單欄

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)橫版菜單欄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 設(shè)置BFC功能及使用示例詳解

    設(shè)置BFC功能及使用示例詳解

    這篇文章主要為大家介紹了設(shè)置BFC功能及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • jquery插件bootstrapValidator數(shù)據(jù)驗證詳解

    jquery插件bootstrapValidator數(shù)據(jù)驗證詳解

    這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator數(shù)據(jù)驗證使用教程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 完美的js div拖拽實例代碼

    完美的js div拖拽實例代碼

    這篇文章主要為大家詳細介紹了完美的js div拖拽實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Bootstrap?按鈕下拉菜單的實現(xiàn)示例

    Bootstrap?按鈕下拉菜單的實現(xiàn)示例

    本文主要介紹了Bootstrap?按鈕下拉菜單的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • 利用JS判斷數(shù)據(jù)類型的四種方法

    利用JS判斷數(shù)據(jù)類型的四種方法

    面試的時候經(jīng)常會問到JS 中 判斷數(shù)據(jù)類型的方法,一般常用的 就是typeof了 ,其他的也想不起來,今天特意在網(wǎng)上查了一下來總結(jié),這篇文章主要介紹了利用JS判斷數(shù)據(jù)類型的四種方法,需要的朋友可以參考下
    2021-08-08
  • js放大鏡放大購物圖片效果

    js放大鏡放大購物圖片效果

    這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)放大鏡放大購物圖片效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • JS解密入門之憑直覺解

    JS解密入門之憑直覺解

    什么叫直覺解?根據(jù)目前流行的免殺方法,有這么幾種初級加密方法。進制加密,URLEncode加密,加花
    2008-06-06

最新評論