Babylon使用麦克风并处理常见问题解决

更新时间：2023年04月03日 15:00:02 作者：方寸匠心

这篇文章主要为大家介绍了Babylon使用麦克风并处理常见问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

在Babylon.js中媒体设备流使用起来有很多坑，我们将在本文中逐一说明这些坑并提供相应的解决方案。

问题1：Property 'constraints' does not exist on type 'Window & typeof globalThis'.

在比较新的浏览器中，navigator对象中的getUserMedia方法已经被废弃了。取而代之的是navigator.mediaDevices.getUserMedia()，并且constraints应该作为参数传入。

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)

如果在使用媒体设备流时，你遇到了“Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)” 这个问题出现在TypeScript项目中。因为该类型Script不认识window.stream, 所以我们需要将它声明为any类型。解决方法如下：

(window as any).stream = stream;

这让编译器知道 window 对象现在具有一个名为stream的属性。

问题3： Property 'oninactive' does not exist on type 'MediaStream'.ts(2339)

在较新版本的Web API中，MediaStream对象不再包含oninactive属性，需要更改事件监听方式。解决方法如下：

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

而不是

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

此更改暴露了更多事件，同时也需要更改您的代码来处理它们。

总结

在 Babylon.js 中，使用媒体设备流时出现的问题通常是由于您没有根据最新的约定执行操作，或者由于 TypeScript 编译器不知道您所做的更改而导致的。通过遵循我们提供的指南和解决方案，您应该能够轻松地解决这些问题。

示例源码(修改前)：

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使用麦克风并处理常见问题解决的详细内容，更多关于Babylon麦克风常见问题的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js中获取URL参数的共用方法getRequest()方法实例详解
本文通过实例代码给大家介绍了js中获取URL参数的共用方法getRequest()方法 ,文末给大家提到了js获取url参数值的两种方式，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-10-10
JS字符串常用操作方法实例小结
这篇文章主要介绍了JS字符串常用操作方法,结合实例形式总结分析了javascript字符串获取、返回、拼接、替换、搜索、计算等相关操作技巧,需要的朋友可以参考下
2019-06-06
微信小程序去哪里找小程序到底如何使用(附小程序名单)
今天凌晨，微信负责人张小龙在微信朋友圈晒出了一组图，网友看到纷纷“炸裂”，这到底是什么？是的，微信小程序如约上线，微信小程序怎么打开，微信小程序在哪里进入，请阅读本文
2017-01-01
纯JS 绘制数学函数
今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。
2009-04-04
第六章之辅组类与响应式工具
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap组件之辅组类与响应式工具，感兴趣的朋友一起学习吧
2016-04-04
js 下拉菜单实现代码
js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。
2010-05-05
实现51Map地图接口(示例代码)
这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS实现旋转木马式图片轮播效果
这篇文章主要为大家详细介绍了JS实现旋转木马式图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Bootstrap 按钮样式与使用代码详解
这篇文章主要介绍了Bootstrap -- 按钮样式与使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
JavaScript实现鼠标滑过图片变换效果的方法
这篇文章主要介绍了JavaScript实现鼠标滑过图片变换效果的方法,涉及javascript控制鼠标事件及样式变换的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04