BalenaCam error 403 (Forbidden) when tried to embeded into another site

leondevil · January 17, 2020, 4:37pm

Hi Balena team,

I followed the instruction in Build a Raspberry Pi-based network camera using WebRTC and can get BalenaCam activated on my Raspberry Pi 3. I am able to see the streaming video from my pi via the public device url option.

I can view the mjpeg stream directly with this URL https://----BalenaPublicURL—/mjpeg. So, I would like to embeded mjpeg stream into my personal website, but it seems to be not possible. I received the below error.

GET https://----BalenaPublicURL—/mjpeg 403 (Forbidden)

Not sure if it would be possible to manage any permission to allow this mjpeg stream to be embeded as a video source into another website? Or I need to go for premium account?

video id=“cam_switch” src= “https://----BalenaPublicURL—/mjpeg” height=“600” width=“100%”/>

NOTE: I already tried iframe> and yes! it works. However, it’s impossible to fit the page in iframe to my static iframe size.

Please kindly advise. Thank you.

Best regards,
Leondevil.

thgreasi · January 17, 2020, 4:59pm

Hi @leondevil,
Can you share a bit more from your code that you used to embed the mjpeg stream to your website?
BalenaCam internally uses a dynamically created <img /> tag and simply set it’s src property to the mjpeg url.
Let me point you to that part of the code:

github.com

balenalabs/balena-cam/blob/68310b0a9bbb2746c15a45dc97baace90fb44d16/balena-cam/app/client/client.js#L250


  primaryPeerConnection = null;
}
document.getElementById('vpn').style.display = 'initial';
console.warn('WebRTC does not work! Starting MJPEG streaming.')
state = 2;


var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
document.getElementById('mjpeg').appendChild(canvas);


var mjpeg = new Image();
mjpeg.id = 'mjpeg-image';
mjpeg.src = '/mjpeg';
mjpeg.style.visibility = 'hidden';
mjpeg.style.position = 'absolute';
document.getElementById('mjpeg').appendChild(mjpeg);


mjpeg.onload = function() {
  canvas.style.width = mjpeg.width;
  canvas.style.height = mjpeg.height;
  canvas.width = mjpeg.width;

A simple <img src="https://----BalenaPublicURL—/mjpeg" /> html tag should be enough though.

Since this is a forbidden error, are there any other warnings or error logs printed on your browser console?
Could this be a CORS or CSP related error?
I could take a closer look if you could share with us the url of the website that will host the mjpeg?

Kind regards,
Thodoris

leondevil · January 17, 2020, 5:19pm

Hi @thgreasi,

Thank you very much. It seems working with img tag.

Best regards,
Leondevil.

thgreasi · January 17, 2020, 5:22pm

I’m glad that it work for you.
Thanks for letting us know.

Kind regards,
Thodoris

Topic		Replies	Views
BalenaCam to external website Product support	6	311	September 13, 2019
Using raspberry pi camera with BalenaOS balenaOS raspberrypi3	2	1066	February 28, 2021
How to use balenaCam with USB camera device Project help	10	1334	November 4, 2020
Bring a dummy security camera to life, using a Raspberry Pi and WebRTC Discussions	0	279	July 22, 2021
BalenaCam Connection Always Fails, ValueError: ... does not appear to be an IPv4 or IPv6 address balenaOS raspberrypi3 , picamera	4	1907	May 8, 2024

BalenaCam error 403 (Forbidden) when tried to embeded into another site

Related topics