javascript - Firefox 移动设备上的相机访问问题

标签 javascript html node.js express

在我的手机网络应用程序中,我想使用 Firefox 移动浏览器显示移动摄像头,我使用带有express的nodejs作为服务器,并且我使用智能手机通过本地主机连接到服务器。 Firefox 浏览器要求访问相机,我没有收到任何错误,但仍然没有看到相机输出。当我在 Chrome 桌面上测试它时,一切正常。

有一些代码:

index.html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Documentl</title>
        <base href="/">
        <link rel="stylesheet" type="text/css" href ="main.css" >
    </head>

    <body>
        <p id="demo"></p>
        <div class="booth">
            <video id= "video" autoplay></video>
        </div>

        <!--<script src = "script.js"></script>-->
        <script>
            (function(){
                var video = document.getElementById("video"),
                    vendorUrl = window.URL || window.webkitURL;

                navigator.getMedia =    navigator.getUserMedia ||
                                        navigator.webkitGetUserMedia ||
                                        navigator.mozGetUserMedia ||
                                        navigator.msGetUserMedia;

                navigator.getMedia({
                    video: {exact: "environment",
                            width: 1280,
                            height: 720 },

                    audio: false
                }, function(stream) {
                    document.getElementById("demo").innerHTML = stream;
                    video.src = vendorUrl.createObjectURL(stream);
                    video.play();
                }, function(err){
                    document.getElementById("demo").innerHTML = err.message;
                });
            })();
        </script>
    </body>
</html>

服务器.js

    const express = require('express')
const app = express()
const port = 3000

app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))

app.listen(port, () => console.log(`listening on port ${port}!`))

我没有使用 Chrome 移动版,因为“此处只允许安全来源”

版本:

nodejs - v8.10.0 express - 4.16.4 移动版 Firefox - 63.0.2 桌面版 Chrome - 69.0.3497.100

有人知道如何解决这个问题吗?如果有不清楚的地方,请提问。

最佳答案

对于最新的浏览器,您需要为 MediaStreams 设置srcObject。对象 URL 不再起作用。试试这个:

video.srcObject = stream;

您在 Chrome 中应该也会遇到同样的问题...如果没有,您很快就会收到更新。

另请参阅:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

关于javascript - Firefox 移动设备上的相机访问问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53423225/

相关文章:

javascript - 如何直接在 HTML 页面中拍照(而不打开相机应用程序)?

javascript - 如何在html中读取具有特殊字符的属性值

html - 如何阻止 MPAVItem 使用 UIWebView 中的视频使我的 iOS 应用程序崩溃?

node.js - Nodejs - 如何让功能只发生一次?

node.js - 如何在 Dockerfile.template 中的 `tsc` 之前运行 TypeScript `COPY`?

javascript - JsViews 复选框从内部循环绑定(bind)

javascript - Node js可以在for循环期间通过外部函数修改数组吗?

javascript - 使用 Javascript 创建 HTML...从页面复制或存储在变量中?

javascript - Windows 8 应用栏无法在 Google map 上运行

mysql - 将输入与 mysql 数据库进行比较