快捷導(dǎo)航

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

更新時(shí)間：2023年04月03日 15:00:02 作者：方寸匠心

這篇文章主要為大家介紹了Babylon使用麥克風(fēng)并處理常見(jiàn)問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

問(wèn)題1：Property 'constraints' does not exist on type 'Window & typeof globalThis'.

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

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

對(duì)于問(wèn)題 Property 'constraints' does not exist on type 'Window & typeof globalThis'.ts(2339)。這是因?yàn)?TypeScript 沒(méi)有識(shí)別到constraints變量的類型，可以嘗試直接定義一個(gè) const constraints 常量。

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

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

(window as any).stream = stream;

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

問(wèn)題3： Property 'oninactive' does not exist on type 'MediaStream'.ts(2339)

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

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

而不是

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

此更改暴露了更多事件，同時(shí)也需要更改您的代碼來(lái)處理它們。

總結(jié)

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

示例源碼(修改前)：

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)并處理常見(jiàn)問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于Babylon麥克風(fēng)常見(jiàn)問(wèn)題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: