IP Camera - 在Chrome上使用基本身份验证流式传输视频 [英] IP Camera - Streaming video with the basic authentication on Chrome

问题描述

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

为了得到照相机的流，相机具有以下API http://mycamera.com/video.mjpg

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

通过格式化URL并将其放入下面的图像标记中，我可以使它在Firefox，Safari上运行

 < img src =http：// username：[e-mail]/video.mjpg/> 
  

不过，Chrome（我的v.40）不支持这种类型的网址，浏览器会提示要填写的用户密码表单，或者只是拒绝该请求。设置标题授权：脚本中的Basic encode64（username，password）没有帮助，URL始终返回401错误（未授权）。 a href =https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS =nofollow> CORS 错误。如果我的网站使用HTTPS运行，那么HTTP API调用将被浏览器阻止。 >禁用IP摄像头的身份验证：

如果摄像头在管理面板上没有该选项，只需添加一个没有密码的用户我们可以像这样设置

 < iframe src =http：// none： @ mycamera.com / video.mjpgwidth =1280height =768>< / iframe> 
  

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

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

下载

I have an Amcrest IP Camera. I would like to stream video to my web page. Its url is rtsp://mycamera.com:5554/stream

In order to get the stream of the camera, the camera has a following API http://mycamera.com/video.mjpg

It requires the basic authentication to work.

By formatting the URL and putting it into the image tag like below, I can make it work on Firefox, Safari

<img src="http://username:[e-mail]/video.mjpg" />

However, Chrome (v.40 on mine) does not allow this kind of URL, the browser will promt the user password form to be filled, or simply refuses the request. Setting header Authorization: "Basic encode64(username, password)" in the script does not help, the URL always return 401 error (Unauthorized)

Sometimes, it raises the CORS error. If my website is running with HTTPS, the HTTP API call will get blocked by the browser.

解决方案

1. Disable authentication of IP camera:

If the camera does not have that option on the admin panel, just add an user without a password with any username like "none", then we can setup like this

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

Without password, my Chrome no longer throws the user name/password. (tested on Chrome of Windows and MacOSX & Safari)

2. Proxy the output to my own website's server:

Download the framework CORS of the mohsen1

Install node js and run this server on the same with domain of the website. We need to edit the index.js file as below

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 the video stream URL below:

http://mycamera.com/video.mjpg

to:

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

The URL of stream video should be

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

THe advantage of this approach is to bypass most of problems around and get rid of the errors(CORS, HTTPS) because my website will request to its own server

The drawback is the video would be fetch twice, it caused delay pretty much.

这篇关于IP Camera - 在Chrome上使用基本身份验证流式传输视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！