We Keep Coding

Set ROS robot ip address localhost:name and set video src path

okay so i i have set robot_IP = "http://localhost:11311/"; to my localhost
and set my camera path at video.src /xtion/rgb/image_proc but the video stream still wont come out on web html . I am following what this tutorial tell me to do https://medium.com/husarion-blog/bootstrap-4-ros-creating-a-web-ui-for-your-robot-9a77a8e373f9
window.onload = function () {
// determine robot address automatically
// robot_IP = location.hostname;
// set robot address statically
robot_IP = "http://localhost:11311/";
// // Init handle for rosbridge_websocket
ros = new ROSLIB.Ros({
url: "ws://" + robot_IP + ":9090"
});
initVelocityPublisher();
// get handle for video placeholder
video = document.getElementById('video');
// Populate video source
video.src = "http://" + robot_IP + ":8080/stream?topic=/xtion/rgb/image_proc&type=mjpeg&quality=80";
video.onload = function () {
// joystick and keyboard controls will be available only when video is correctly loaded
createJoystick();
initTeleopKeyboard();
};
}

Implementing WebcamJS in C#/ASP.NET/Razor html web app

I have very little experience with C#/Asp.net/Razor HTML. I'm trying to change the webcam feature on a web app from using the old jQuery webcam (with flash) project to the jhuckaby/webcamjs (on Github) project. I think the problem right now is that the base64 image isn't saving right. I see in the below code something about String_To_Bytes2. What exactly does that do and do you have any ideas on how I could adjust it to take the input base64 image data from the JavaScript side to be saved in a directory folder?
C#:
public ActionResult Capture(int id)
{
var uniqueFileName = id + ".png";
var uploads = Path.Combine(hostingEnvironment.WebRootPath, "images/photos/");
var path = Path.Combine(uploads, uniqueFileName);
var stream = Request.Body;
string dump;
using (var reader = new StreamReader(stream))
dump = reader.ReadToEnd();
if (System.IO.File.Exists(path))
{
System.IO.File.Delete(path);
System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
}
else System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
return RedirectToAction("ServiceHistory", new { Id = id });
}
private byte[] String_To_Bytes2(string strInput)
{
int numBytes = (strInput.Length) / 2;
byte[] bytes = new byte[numBytes];
for (int x = 0; x < numBytes; ++x)
{
bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
}
return bytes;
}
JavaScript (with a bit of Razor HTML)
<script>
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
//enable_flash: false,
jpeg_quality: 80
});
Webcam.attach('#Camera');
</script>
<script>
function configure() {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
//enable_flash: false,
jpeg_quality: 80
});
Webcam.attach('#Camera');
}
// preload shutter audio clip
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? '#Url.Content("~/shutter.ogg")' : '#Url.Content("~/shutter.mp3")';
function take_snapshot() {
// play sound effect
shutter.play();
// take snapshot and get image data
Webcam.snap(function (data_uri) {
// display results in page
document.querySelector('#Camera').innerHTML =
'<img id="imageprev" src="' + data_uri + '"/>';
});
//Webcam.reset();
}
function saveSnap() {
// Get base64 value from <img id='imageprev'> source
var base64image = document.getElementById("imageprev").src;
Webcam.upload(base64image, '#Url.Action("Capture", "Guest", new { Id = #Model.Id })', function (code, text) {
console.log('Save successfully');
console.log('The server responded with a' +' '+ code);
// document.querySelector('#save-btn').style.border = "4px solid green";
configure();
});
}
</script>
Any ideas or explanation would be greatly appreciated. I'm a noob and I feel like I'm so close to getting it to work.
So far, I've tested and I can send the base64 image data to console with console.log and it does indeed generate the image.
It also saves a PNG file in the folder directory, but it's 0kb so something isn't right on the C# side I think.
Again, any assistance would be amazing! Let me know if you need more information.

HTML5 / JavaScript camera blurry, only on front facing camera, only on my app

I have built a visitor management system and have recently swapped to a surface device as the driver. The html5 webcam stream is showing as blurry / out of focus on the front facing camera. If I swap to the rear camera however it is fine. And if i use the front facing camera on another public site that uses another webcam feature, it works absolutely fine.
Here is a capture of the camera element, it looks like some form of deliberate blurring as appose to the camera just being bad...
https://ibb.co/Dzf67nC/
I have tried scanning through the code and cannot find anything that scales the camera stream at all that may cause bluring or focus changing
Below is my photo.js file that provides the stream to my visitor sign in page and also handles the capturing of screenshots.
// References to all the element we will need.
var video = document.querySelector('#camera-stream'),
image = document.querySelector('#snap'),
my_photo = document.querySelector('#my-photo'),
container = document.querySelector('.camera-container'),
//start_camera = document.querySelector('#start-camera'),
controls = document.querySelector('.controls'),
take_photo_btn = document.querySelector('#take-photo'),
delete_photo_btn = document.querySelector('#delete-photo'),
download_photo_btn = document.querySelector('#download-photo'),
imgeurl = document.querySelector('#imagesource'),
open_camera = document.querySelector('#open-camera'),
error_message = document.querySelector('#error-message');
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
// Mobile browsers cannot play video without user input,
// so here we're using a button to start it manually.
open_camera.addEventListener("click", function(e){
if($('#my-photo').attr('src') == '') {
e.preventDefault();
container.classList.add("visible");
// Start video playback manually.
//video.play();
//showVideo();
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream){
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.srcObject=stream;
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err){
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}
}
});
open_camera.click();
take_photo_btn.addEventListener("click", function(e){
e.preventDefault();
var count=4;
var counter=setInterval(timer, 500); //1000 will run it every 1 second
$('.countdown-container').addClass('visible');
function timer(){
count=count-1;
if (count <= 0)
{
$('.countdown-number').html('<i class="far fa-smile"></i>');
clearInterval(counter);
//counter ended, do something here
return;
}
$('.countdown-number').text(count);
//Do code for showing the number of seconds here
}
setTimeout(function(){
$('.countdown-container').removeClass('visible');
$('.countdown-number').text('Get Ready');
},2500);
setTimeout(function(){
video.pause(snap);
var snap = takeSnapshot();
// Show image.
image.setAttribute('src', snap);
imgeurl.value = snap;
image.classList.add("visible");
//tumbnail image
my_photo.setAttribute('src', snap);
my_photo.value = snap;
// Enable delete and save buttons
delete_photo_btn.classList.remove("disabled");
download_photo_btn.classList.remove("disabled");
take_photo_btn.classList.add("disabled");
},3000);
// Set the href attribute of the download button to the snap url.
// Pause video playback of stream.
});
delete_photo_btn.addEventListener("click", function(e){
e.preventDefault();
// Hide image.
image.setAttribute('src', "");
image.classList.remove("visible");
my_photo.setAttribute('src', "");
// Disable delete and save buttons
delete_photo_btn.classList.add("disabled");
download_photo_btn.classList.add("disabled");
take_photo_btn.classList.remove("disabled");
// Resume playback of stream.
video.play();
});
function showVideo(){
// Display the video stream and the controls.
//hideUI();
video.classList.add("visible");
controls.classList.add("visible");
}
function takeSnapshot(){
// Here we're using a trick that involves a hidden canvas element.
var hidden_canvas = document.querySelector('canvas'),
context = hidden_canvas.getContext('2d');
var width = video.videoWidth,
height = video.videoHeight;
if (width && height) {
// Setup a canvas with the same dimensions as the video.
hidden_canvas.width = width;
hidden_canvas.height = height;
// Make a copy of the current frame in the video on the canvas.
context.drawImage(video, 0, 0, width, height);
// Turn the canvas image into a dataURL that can be used as a src for our photo.
return hidden_canvas.toDataURL('image/png');
}
}
download_photo_btn.addEventListener("click", function(e){
e.preventDefault();
container.classList.remove("visible");
my_photo.classList.add("visible");
});
function displayErrorMessage(error_msg, error){
error = error || "";
if(error){
console.log(error);
}
error_message.innerText = error_msg;
hideUI();
error_message.classList.add("visible");
}
function hideUI(){
// Helper function for clearing the app UI.
controls.classList.remove("visible");
//start_camera.classList.remove("visible");
video.classList.remove("visible");
snap.classList.remove("visible");
error_message.classList.remove("visible");
}
The camera should be a lot crisper than it is. No errors or anything in the console.

VIdeo playback not working on samsung tv

I created a sample application using samsung tv sdk and added video player with the bellow code.but it does not playing my video
SceneScene1.prototype.initialize = function () {
alert("SceneScene1.initialize()");
// this function will be called only once when the scene manager show this scene first time
// initialize the scene controls and styles, and initialize your variables here
// scene HTML and CSS will be loaded before this function is called
sf.service.VideoPlayer.init({
onend:function(){
sf.service.VideoPlayer.setFullScreen(false);
}
});
sf.service.VideoPlayer.setKeyHandler(sf.key.RETURN,
function(){
sf.service.VideoPlayer.setFullScreen(false);
});
var vLeft = parseInt($("#svecVideo_y5ww").css('left'));
var vTop = parseInt($("#svecVideo_y5ww").css('top'));
var vHeight = parseInt($("#svecVideo_y5ww").css('height'));
var vWidth = parseInt($("#svecVideo_y5ww").css('width'));
sf.service.VideoPlayer.setPosition({
left:vLeft,
top:vTop,
width:vWidth,
height:vHeight
});
sf.service.VideoPlayer.show();
sf.service.VideoPlayer.play({
url: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
fullScreen: false,
title: 'Samsung movie',
startTime: 5,
liveStream: false,
timeString: true,
authHeader: 'none'
});
};
and if we try to inspect using web inspector.it shows the bellow errors
Service is unavailable due to network or service interference.
The file can't be played because the format isn't supported.
Unable to play the file. Please check it and try again later.
i tried with different files,and shows the same error

Selecting Multiple photos from a device's image gallery using PhoneGap

I was able to build a test app based on the camera.getPicture full example in PhoneGap's documentation. It allows me to take a photo or retrieve a photo from the gallery and place it in a div.
However, I want to be able to select multiple images from the gallery and place each in its own div. Can anyone point me in the right direction to learn how to accomplish this?
Thanks.
Here is the javascript I'm using:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
// A button will call this function
function capturePhoto() {
//add new div
var newPhoto = document.createElement("div");
newPhoto.id = "div";
newPhoto.className ="photo";
newPhoto.innerHTML = "<img id='largeImage' src='' />";
document.getElementById("photos").appendChild(newPhoto);
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 });
}
// A button will call this function
function getPhoto(source) {
//add new div
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);

As of Phonegap 3.5 there is no support for selecting multiple images at the same time. You will need to write or find a plugin that will work with the native code to enable you to do this. Here is the issue described in the Phonegap development plan. https://issues.apache.org/jira/browse/CB-1215
I am working on doing this as well. Here is a link for an Android solution.
http://webcache.googleusercontent.com/search?q=cache:http://www.technotalkative.com/android-select-multiple-photos-from-gallery/

you need to create the div dynamically after every photo is taken.
Your success callback would be something like this:
function onPhotoDataSuccess(imageData) {
// the following is all one line.
document.getElementById("photos").innerHTML+=
"<div>\
<img src=\"data:image/jpeg;base64,"+imageData+"\">\
</div>";
}
then you can style all the imgs via css using something like this
#photos > div {
width: 100px;
margin:10px;
float:left;
}