IP 摄像机 - 在 Chrome 上使用基本身份验证流式传输视频

Question

我有一台 Amcrest IP 摄像机。我想将视频流式传输到我的网页。它的 url 是 rtsp://mycamera.com:5554/stream

为了获取摄像头的码流，摄像头有如下APIhttp://mycamera.com/video.mjpg

它需要基本身份验证才能工作。

通过格式化 URL 并将其放入图像标签中，如下所示，我可以使其在 Firefox、Safari 上运行

<img src="http://username:password@mycamera.com/video.mjpg" />

但是，Chrome（我的v.40）不允许这种URL，浏览器会提示填写用户密码表单，或者干脆拒绝请求。在脚本中设置 header 授权："Basic encode64(username, password)" 没有帮助，URL 总是 return 401 错误（未授权）

有时，它会引发 CORS 错误。如果我的网站是运行 HTTPS，HTTP API 调用将被浏览器阻止。

Answer 1

禁用 IP 摄像机的身份验证：

如果相机在管理面板上没有该选项，只需添加一个没有密码的用户，使用任何用户名，如"none"，然后我们可以这样设置

<iframe src="http://none:@mycamera.com/video.mjpg" width="1280" height="768"></iframe>

没有密码，我的 Chrome 不再抛出用户 name/password。（在 Windows 的 Chrome 和 MacOSX 和 Safari 上测试）

将输出代理到我自己网站的服务器：

下载framework CORS of the mohsen1

安装 node js 和运行此服务器与网站的域相同。我们需要编辑 index.js 文件如下

var fs = require('fs');
var request = require('request');
var http = require('http');
var https = require('https');
var privateKey = fs.readFileSync('/var/private_key.pem', 'utf8');
var certificate = fs.readFileSync('/var/certificate.crt, 'utf8');

var credentials = {key: privateKey, cert: certificate};
var express = require('express');


var proxy_http_port = 9009
var proxy_https_port = 9443

var app = express();

// your express configuration here

var auth = "";

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

    next();
});

var t = app.get('/', function (req, res, next) {
    var username = "";
    var password = "";

    if (req.query.auth) {
        username = req.query.auth.split(":")[0];
        password = req.query.auth.split(":")[1];

        auth = 'Basic ' + new Buffer(username + ':' + password).toString('base64');


        res.header('Authorization', auth);

    } else {
        res.send('please specify auth query param');
    }

    if (req.query.url) {



        var options = {
            method: 'GET',
            url: req.query.url,
            headers: {
                "Authorization": auth,
                //'User-Agent': req.headers['user-agent']
            },
            encoding: null
        };


        var r = request(options, function callback(error, response, body) {

            if (!error && response.statusCode == 200) {
                res.write(body);

                delete response.headers['access-control-allow-origin'];

            }
        }).pipe(res);


    } else {
        res.send('You have to specify URL query');
    }

});

http.globalAgent.maxSockets = 100; 

var httpServer = http.createServer(app);
var httpsServer = https.createServer(credentials, app);

httpServer.listen(proxy_http_port);
httpsServer.listen(proxy_https_port);

Encode 下面的视频流 URL:

http://mycamera.com/video.mjpg

至：

http%3A%2F%2Fmycamera.com%2Fvideo.mjpg

流视频的URL应该是

https://mywebsite.com:9443/?auth=username:password&url=(put above encoded video URL here)

这种方法的优点是绕过大部分问题并消除错误（CORS、HTTPS），因为我的网站将请求到它自己的服务器

缺点是视频会被fetch两次，造成延迟比较大

Answer 2

错误 401 表示凭据无效，因此您很可能没有正确格式化基本身份验证字符串。 header 格式应该是 Authorization Basic [base64 encoded username:password] 使用冒号符号：在将整个字符串编码为 base 64 之前将两者分开。

例如，结果 header 应如下所示： Authorization: Basic QWxhZGRpbjpPcGVuU2VzYW1l

您可以尝试安装 Chrome "Advanced REST Client" 插件并使用该插件测试使用基本身份验证参数访问您的 URL link。如果您可以让它与 REST 客户端插件一起使用，那么返回并更新您的脚本以修复 auth headers.

的格式

Link 到高级 REST 客户端： https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=en-US

Link 验证 headers 格式信息： https://en.wikipedia.org/wiki/Basic_access_authentication

IP 摄像机 - 在 Chrome 上使用基本身份验证流式传输视频

IP Camera - Streaming video with the basic authentication on Chrome

google-chrome

video-streaming

basic-authentication

rtsp

ip-camera