尝试使用 getUserMedia（next.js 应用程序）时出现 SyntaxError Unexpected Token答案

【问题标题】：SyntaxError Unexpected Token in trying to use getUserMedia (next.js app)尝试使用 getUserMedia（next.js 应用程序）时出现 SyntaxError Unexpected Token
【发布时间】：2020-07-12 13:42:27
【问题描述】：

尝试通过 Next.js 使用 getUserMedia 设置应用。在尝试创建可以获取媒体的组件时，出现语法错误。

试图找到其他获取数据的方法，但似乎 getUserMedia 是最适合我的方法。 Next.js 也是首选框架，虽然我不是这方面的专家。

这就是我尝试设置组件的方式：

const Recorder = () => (

        var constraints = {audio: true, video: true};

        navigator.mediaDevices.getUserMedia(constraints)
        .then(funtion(mediaStream) {
            var video = document.querySelector('video');
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) {console.log(err.name + ": " + err.message);})
)

export default Recorder;

当我尝试运行应用程序时，我在第三行收到 SyntaxError...

编辑：修正了代码的格式

【问题讨论】：

您可以尝试在第 3 行的开头添加 window. 吗？像这样：window.navigator.mediaDevices.getUserMedia(constraints)
对不起，SO 对代码的格式做了一些奇怪的事情。第三行是带有 var 约束的那一行
那是什么语法错误？你能显示整个日志输出吗？
也许.then(funtion(mediaStream) { 应该是.then(function(mediaStream) {。

标签： syntax next.js getusermedia

【解决方案1】：

也许尝试等待？

try {
    var video = document.querySelector('video');
    video.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
    video.onloadedmetadata = function(e) {
        video.play();
    };
}
catch(err) {
    console.log(err.name + ": " + err.message);
}

我在使用 await 时遇到了同样的问题，当我将其更改为 .then() 时它开始工作，但我真的不知道它失败的原因，它们都应该工作。

【讨论】：