Im trying to record a video from my webcam with the node package 'recordrtc' (im using angular).
Even though i set the mime type in the options to 'video/webm' it always seems to switch it back to 'x-matroska'...
Here is my code:
[...]
this.options = {
mimeType: 'video/webm',
bitsPerSecond: 51200000,
frameRate: 60
}
// After getting the Video Devices
this.recordRTC = RecordRTC(stream, this.options);
[...]
startRecording() {
this.recordRTC.startRecording();
}
stopRecording() {
this.recordRTC.stopRecording(this.processVideo.bind(this));
}
processVideo(videoWebMural) {
console.log(this.recordRTC.getBlob());
this.recordRTC.getDataURL((url) => {
console.log(url);
})
}
For some reason when i console log this blob, it says
> Blob {size: 149322, type: 'video/x-matroska;codecs=avc1'}
And when i log the base64 string of the video with 'this.recordRTC.getDataURL' it aswell starts with:
> data:video/x-matroska [...]
What am i doing wrong here?
Maybe you can try this
this.options = {
type: 'video',
mimeType: 'video/webm\;codecs=vp9',
recorderType: MediaStreamRecorder,
bitsPerSecond: 51200000,
frameRate: 60
}
Related
Hey guys I am using NGX Dropzone and I notice when I drag an image into the viewer it is in base64, but when I try to read the console.log(event.addedFiles); I have no information being passed to me with the base64 value. Here's an example of what I get back
[File]
0: File
lastModified: 1625149167659
lastModifiedDate: Thu Jul 01 2021 10:19:27 GMT-0400 (Eastern Daylight Time) {}
name: "210534431_764639924207804_238792847075232344_n.jpeg"
size: 101133
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
length: 1
__proto__: Array(0)
I have another piece of code which I have been using that transforms a URL into a base64 string. But thats useless to me since the URL can also be shared and opened by anyone from anywhere. However my local image in my computer is only available to me, unless I transform it into base64 which is a string I can save in a database.
This is the script
imageToShow: any;
onURLinserted() {
this.getImage(this.thumb.name).subscribe(data => {
this.createImageFromBlob(data);
}, error => {
console.log("Error occured",error);
});
console.log("Data: ", this.thumb.name);
}
getImage(imageUrl: string): Observable<Blob> {
return this.http
.get<Blob>(imageUrl, { observe: 'body', responseType: 'blob' as 'json' })
}
createImageFromBlob(image: Blob) {
let reader = new FileReader(); //you need file reader for read blob data to base64 image data.
reader.addEventListener("load", () => {
this.imageToShow = reader.result; // here is the result you got from reader which I use to view the image
this.selectedRowData.photo = reader.result; // this is my ngModel read by my HTML input fields
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
//In my HTML code
<img [src]="imageToShow" alt="">
All I am really trying to do is extract the base64 information from the image dragged in there into imageToShow either by using this code if it helps or something similar OR maybe the cdk drag an drop already has a prop that I dont know about
How do I know that the base64 is even available? When I drag an image in it, and I inspect it in the dev tool I can see the src="data:image/jpeg;base64,random stuff..."
Wish I could put some test code here but I will need the dropzone library for it
Looks like ngx-dropzone does not have a prop that provides bas64String.
You can use readAsDataURL to get base64String. The readAsDataURL is used to read the contents of the Blob or File. When the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.
The below code worked for me.
html file
<div class="custom-dropzone" ngx-dropzone [accept]="'image/jpeg,image/jpg,image/png,image/gif'"
(change)="onSelect($event)">
<ngx-dropzone-label>
<div>
<h2>Upload photo</h2>
</div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f"
[removable]="true" (removed)="onRemove(f)">
</ngx-dropzone-image-preview>
</div>
.ts file
onSelect(event) {
this.files.push(...event.addedFiles);
if (this.files && this.files[0]) {
for (let i = 0; i < this.files.length; i++) {
this.fileToBase64(this.files[i])
.then(result=>{
const base64String = result.replace('data:', '')
.replace(/^.+,/, ''); // To remove data url part
this.postMultimedias.push({ name:this.files[i].name,content:
base64String});//postMultimedias is a array which holds image name and bas64String
});
}
}
}
fileToBase64 = (file:File):Promise<string> => {
return new Promise<string> ((resolve,reject)=> {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.toString());
reader.onerror = error => reject(error);
})
}
onRemove(event) {
let position = this.files.indexOf(event);
this.postMultimedias.splice(position, 1);
this.files.splice(position, 1);
}
After updating React Native version to latest 0.63.2 and trying to upload the image to S3 bucket XHR returns error Stream Closed image upload was working fine with version 0.61.5
The Code
uploadProfile({ variables: { filetype: mime } }).then(
({ data: { uploadUserProfile } }) => {
const { presignedUrl, url } = uploadUserProfile;
console.log('presignedUrl', { presignedUrl, url });
// uploading to s3 bucket
const xhr = new XMLHttpRequest();
xhr.open('PUT', presignedUrl);
xhr.onreadystatechange = async function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
updateAccount({
variables: {
data: {
profile: url,
},
},
});
} else {
if (/Request has expired/g.test(xhr.response))
Toast({ message: 'slow network connection' });
else {
console.log({
response: xhr.response,
responseText: xhr.responseText,
status: xhr.status,
});
Toast({ message: 'internal server error' });
await report({
error: {
response: xhr.response,
responseText: xhr.responseText,
status: xhr.status,
},
}); // reporting error
}
}
}
};
xhr.setRequestHeader('Content-Type', mime);
xhr.send({ uri: path, type: mime });
setLoading(false);
},
);
When the user wants to upload a profile image first App send a request to the server and get return the pre-signed URL and upload from client-side this how App was working.
I upgraded Flipper to version 0.51.2 and it worked for me.
Go to android/gradle.properties and add this line
FLIPPER_VERSION=0.52.1
You should have the following lines in your android/app/build.gradle
dependencies {
// ....
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}
// ...
}
upgrading flipper version solves the issue for me, If upgrading flipper version doesn't solve for you then try this solution.
Whoever is still struggling with this issue. it's happening because of Flipper network plugin.
I disabled it and things work just fine.
My workaround to make this work is commenting outline number 43
38 NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39 NetworkingModule.setCustomClientBuilder(
40 new NetworkingModule.CustomClientBuilder() {
41 #Override
42 public void apply(OkHttpClient.Builder builder) {
43 // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44 }
45 });
46 client.addPlugin(networkFlipperPlugin);
in this file android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java
found this answer link
I tried to upload a base64 image cropped to 600,400 and when i do the request its tell me unexpected token '>' but when i do an upload from an image cropped 20,20 the api call works. So its a problem of length of the base64 it seems that i cannot be to large I also tried to encoded but is large too the 600,400. So i have to resign myself to send a small image or there is another way.
This is my code of the image:
ImagePicker.openPicker({
width: 600,
height: 400,
cropping: true,
includeBase64: true
}).then(image => {
uploadPictureVar = 'data:image/jpeg;base64,' + image.data;
window.picture = uploadPictureVar;
this.setState({ uploadPicture: uploadPictureVar });
});
And this is my api call
export function uploadPost(post) {
let data = {
body: post.body,
picture: post.picture,
type: post.type,
user: {
_id: post.user._id,
name: post.user.name,
picture: post.user.picture
}
}
var headers = {
'Content-Type': 'application/json',
'Access-Control-Origin': '*'
}
return fetch(URL + "/uploadPost", {
method: "post",
headers: headers,
body: JSON.stringify(data)
})
.then(response => Promise.resolve(response.json()))
.catch(err => {
return Promise.reject(err);
})
}
Thanks
Is it possible to use the Chrome inspector to see the response you're getting back from the server. Maybe the backend is throwing an error and rendering a HTML page, hence the error... Unexpected '<'. I'm guessing you're trying parse JSON but you got a HTML response instead.
I could solved it using this plugin : https://github.com/bamlab/react-native-image-resizer
This is my code:
ImageResizer.createResizedImage(window.picture, 600, 400, "PNG", 100, 0, null).then((response) => {
alert(response)
bodySendNewPost.picture = response.uri;
// response.uri is the URI of the new image that can now be displayed, uploaded...
// response.path is the path of the new image
// response.name is the name of the new image with the extension
// response.size is the size of the new image
}).catch((err) => {
alert(err)
// Oops, something went wrong. Check that the filename is correct and
// inspect err to get more details.
});
I am trying to implement file uploads for meteor using Method call.
I am using this meteor package: https://atmospherejs.com/ostrio/files.
I have no problem on client side (I can send file in a base64 encoded format). on server side I am trying to implement this function : https://github.com/VeliovGroup/Meteor-Files/blob/master/docs/write.md
but I am getting this error.
Error during upload: TypeError: Images.write is not a function
Here is the code of my Method on server:
export const insertImage = new ValidatedMethod({
name: 'images.insert',
validate: new SimpleSchema({
file: { type: String },
}).validator(),
run({ file }) {
Images.write(file, {
fileName: 'sample.png',
type: 'image/png',
}, function (error, fileRef) {
if (error) {
throw error;
} else {
console.log(`${fileRef.name} is successfully saved to FS. _id: ${fileRef._id}`);
}
});
},
});
According to the lib documentation you will need to first instantiate Images with an instance of FilesCollection, similar to as following:
https://github.com/VeliovGroup/Meteor-Files#api-overview-full-api
import { FilesCollection } from 'meteor/ostrio:files';
const Images = new FilesCollection({
collectionName: 'Images',
allowClientCode: false, // Disallow remove files from Client
onBeforeUpload(file) {
// Allow upload files under 10MB, and only in png/jpg/jpeg formats
if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {
return true;
} else {
return 'Please upload image, with size equal or less than 10MB';
}
}
});
For more details on the constructor parameters please refer to https://github.com/VeliovGroup/Meteor-Files/wiki/Constructor
I have used this syntax:
Meteor.call('images.insert', {
file: image
}, (err, res) => {
if (err) {
console.log(`Error during upload: ${err}`);
} else {
console.log(`Upload successfully!`);
}
});
I want to make an option to "Select Image From Gallery or Camera". I have tried many modules but they are only providing access to the gallery directly. I am using expo tool for creating a react native application. First I want a popup to open then then the user has to pick an option then the user is redirected according to that option. If you have any suggestion, please help me.
I´ve seen it done with React Native Image Picker, look for it in github:
https://github.com/react-community/react-native-image-picker
Add dependencies:
dependencies {
compile project(':react-native-image-picker')
}
Add permissions:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Usage:
var ImagePicker = require('react-native-image-picker');
// More info on all the options is below in the README...just some common use cases shown here
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook'},
],
storageOptions: {
skipBackup: true,
path: 'images'
}
};
/**
* The first arg is the options object for customization (it can also be null or omitted for default options),
* The second arg is the callback which sends object: response (more info below in README)
*/
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source
});
}
});
If you would like to directly start just the camera or the gallery, use it like this:
// Launch Camera:
ImagePicker.launchCamera(options, (response) => {
// Same code as in above section!
});
// Open Image Library:
ImagePicker.launchImageLibrary(options, (response) => {
// Same code as in above section!
});
Hope it helps.