在firefox mobile上使用相机的问题

时间:2018-11-22 02:54:17

标签: javascript html node.js express

在我的手机网络应用程序中,我想显示使用Firefox移动浏览器的手机摄像头,我使用具有Express作为服务器的Node.js,并通过智能手机通过本地主机连接到服务器。 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>

server.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 快车-4.16.4 移动Firefox-63.0.2 桌面版Chrome-69.0.3497.100

有人知道如何解决问题吗?如果不清楚,请提出问题。

1 个答案:

答案 0 :(得分:0)

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

video.srcObject = stream;

您在Chrome中也应该遇到相同的问题...如果没有,那么您将很快进行更新。

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