How to completely kill the WebRTC media stream?
MediaStream.stop() is not working anymore.
Testing in Chrome 47, Mac OS 10.11.
Use stream.getTracks().forEach(track => track.stop());.
stream.stop() was deprecated.
For all browsers
if (microphone_data.media_stream) {
microphone_data.media_stream.getTracks().forEach(function (track) { track.stop(); });
}
Related
I have created ionic app and used cordova-plugin-speechrecognition for speech to text conversion.
The Code used in the apps is as follows:
initSpeech() {
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => {
console.log(hasPermission)
if (!hasPermission) {
this.speechRecognition.requestPermission()
.then(
() => console.log('granted'),
() => console.log('Denied')
)
}
})
}
start() {
// Start the recognition process
this.speechRecognition.startListening()
.subscribe(
(matches: Array<string>) => { this.voicetext = matches[0]; this.mainForm.controls['comments'].setValue(matches[0]); },
(onerror) => console.log('error:', onerror)
)
}
//stop listening for(ios only)
stop() {
this.speechRecognition.stopListening();
}
This code runs well on android where the google speech Api gets called.
When I ran it on iOS , I made the required changes like adding
NSSpeechRecognitionUsageDescription permission in info.plist of ios .
Not sure but speech recognition doesn't work on ios 13.3 when I am testing it through the apple developer account test flight app.
Thanks in advance
Sorry, "speechRecognition" only works on the web. I tried to run it on mobile for 2-3 days, but it didn't work.
The original video is "Sample Video 5" from https://www.appsloveworld.com/download-sample-mp4-video-mp4-test-videos/.
My /home/vagrant/Code/example/public/hls_hls.keyInfo is:
https://example.com/hls.key
/home/vagrant/Code/example/public/hls_hls.key
467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a
My /home/vagrant/Code/example/public/hls_hls.key was generated using PHP: hex2bin('467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a')
The ffmpeg command for encrypting the video as HLS playlist with "ts" files:
'/usr/bin/ffmpeg' '-y' '-i' 'storage/app/sample_media2/2020-02-27/Sample_Videos_5.mp4'
'-c:v' 'libx264' '-s:v' '1920x1080' '-crf' '20' '-sc_threshold' '0' '-g' '48'
'-keyint_min' '48' '-hls_list_size' '0'
'-hls_time' '10' '-hls_allow_cache' '0' '-b:v' '4889k' '-maxrate' '5866k'
'-hls_segment_type' 'mpegts' '-hls_fmp4_init_filename' 'output_init.mp4'
'-hls_segment_filename' 'storage/app/public/test/output_1080p_%04d.ts'
'-hls_key_info_file' '/home/vagrant/Code/example/public/hls_hls.keyInfo'
'-strict' '-2' '-threads' '12' 'storage/app/public/test/output_1080p.m3u8'
Then, I know from https://caniuse.com/#search=hls that Windows Chrome won't be able to play the HLS video without a library, so I use https://github.com/video-dev/hls.js/, and Windows Chrome successfully plays the encrypted video!
However, iOS Safari is unable to play it (with or without the hls.js library).
On iOS Safari, when I try to play the video, I see just a quick glimpse (less than a second) where the screen shows 0:15, so it must be reading and decrypting enough to know the correct duration of the video.
So, to debug, I log events:
const nativeHlsEvents = ['play', 'playing', 'abort', 'error', 'canplaythrough', 'waiting', 'loadeddata', 'loadstart', 'progress', 'timeupdate', 'volumechange'];
$.each(nativeHlsEvents, function (i, eventType) {
video.addEventListener(eventType, (event) => {//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
console.log(eventType, event);
if (eventType === 'error') {
console.error(video.error);//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
}
});
});
I see in the console log:
loadstart, {"isTrusted":true}
progress, {"isTrusted":true}
play, {"isTrusted":true}
waiting, {"isTrusted":true}
error, {"isTrusted":true}
video.error, {}
I don't know how to find more details about the error.
Note that even though Windows Chrome successfully plays the video, it too shows warnings in the console log:
{"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"TS packet did not start with 0x47","frag":{"...
{"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"no audio/video samples found","frag":{...
Where is my problem?
I would need to buy a newer iPhone.
I see at https://en.wikipedia.org/wiki/IPhone_6#Software and https://support.apple.com/guide/iphone/supported-iphone-models-iphe3fa5df43/ios that “6s” is the oldest hardware that iOS 13 supports, and https://caniuse.com/#search=hls says HLS needs >=13.2.
Iphone devices not supported media source extension.
You should by user agent checking has iphone?
If be right, you should use iphone native video player for play hls video type or more video type
I'm developing a App with Ionic 2 and I'm have problems with #ionic-native/Camera. I've this code on Upload.ts
let loader = this.loading.create({
content: 'Carregando video....'
});
loader.present().then(() => {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
mediaType: this.camera.MediaType.VIDEO,
}
this.camera.getPicture(options).then((videoData) => {
this.uploadForm.controls['file'].setValue(videoData)
loader.dismiss();
}, (err) => {
console.log(err);
});
});
This code works fine in Android, but when I run ionic cordova run ios -lc, the promise this.camera.getPicture(options) is never resolved, so the loader keep running forever.
Thanks in advance!
So, I found the problem. First thing is that native components bugs with -l (--livereload). I don't know how to explain why but I got this information from the Ionic Worldwide slack. A member from Ionic Team said:
"live-reload on a device can cause issues with plugins and file system".
So I used this video to understand how to debbug the APP using the iOS emulator and Safari.
https://www.youtube.com/watch?v=Aob749bkoLY
A little brief of the video: when using iOS emulator, you can access the menu Developer > Emulator > <App Name>. A new window with inspector tools will open and logs from the emulator will appear on this window.
I found out that's the video url was incorrect. Before, to be compatible with Android, I've this code responsible to find the video pointer in system and send to the server:
filePath = 'file:///' + this.uploadForm.controls['file'].value;
But, iOS File Picker already has a "file:///" prefix. So prefixing it again made it wrong. So I updated the code to be like this:
if (this.platform.is('android')) {
filePath = 'file:///' + this.uploadForm.controls['file'].value;
} else {
filePath = this.uploadForm.controls['file'].value;
}
This resolved the problem.
I've developed an app using Cordova and the Web Audio API, that allows the user to plug in headphones, press the phone against their heart, and hear their own heartbeat.
It does this by using audio filter nodes.
//Setup userMedia
context = new (window.AudioContext||window.webkitAudioContext);
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getUserMedia(
{audio:true},
userMediaSuccess,
function(e) {
alert("error2 " + e.message);
});
function userMediaSuccess(stream)
{
//set microphone as input
input = context.createMediaStreamSource(stream);
//amplify the incoming sounds
volume = context.createGain();
volume.gain.value = 10;
//filter out sounds below 25Hz
lowPass = context.createBiquadFilter();
lowPass.type = 'lowpass';
lowPass.frequency.value = 25;
//filter out sounds above 425Hz
highPass = context.createBiquadFilter();
highPass.type = 'highpass';
highPass.frequency.value = 425;
//apply the filters and amplification to microphone input
input.connect(lowPass);
input.connect(highPass);
input.connect(volume);
//send the result of these filters to the phones speakers
highPass.connect(context.destination);
lowPass.connect(context.destination);
volume.connect(context.destination);
}
It runs fine when I deploy to Android, but it seems most of these features aren't available on iOS mobile browsers.
I managed to make getUserMedia function using the iosRTC plugin, but createMediaStreamSource is still "not a function."
So, I'm looking for an alternative to the Web Audio API that can filter out frequencies, or if there are any plugins I could use, that would be perfect.
There's no way to do this on ios web. You'd need a native app, since Apple doesn't support audio input in safari.
Did you try to use
document.addEventListener('deviceready', function () {
// Just for iOS devices.
if (window.device.platform === 'iOS') {
cordova.plugins.iosrtc.registerGlobals();
}
});
You asked this question quite a while ago, but sadly createMediaStreamSource is still not supported in Safari Mobile (will it ever be?).
As previously said, a plugin is the only way to achieve this, and there is actually a Cordova/Phonegap plugin that does exactly that. cordova-plugin-audioinput gives you access to the sound from the microphone using either the Web Audio API or by callbacks that delivers raw audio data chunks, and it supports iOS as well as Android.
Since I don't want to post the same answer twice, I'll instead point you to the following answer here on stackoverflow, where you'll also find a code example: https://stackoverflow.com/a/38464815/6609803
I'm the creator of the plugin and any feedback is appreciated.
Good news, full support for ios safari
https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource
I'm trying to implement speech recognition on Chrome on the iPad without any luck. Just to cut to the chase and remove any dependencies on my implementation of the webkitSpeechRecognition api, Glenn Shire's excellent sample code does not run on Chrome v27 on an iPad 1 running iOS 5.1.1 or Chrome v31 on an iPad3 running iOS 7.0.4, at least as far as I can tell. It fails at this line:
if (!('webkitSpeechRecognition' in window)) {
r.onState('upgrade');
return;
}
I can't figure out a workaround, and I've not seen any online postings that say anything about speech recognition not working in the iOS version of Chrome. Anyone else run into this?
Chrome on iOS doesn't support Speech Recognition at the moment.
Google have to use iOS UIWebView that mean there is no special web interpretation feature that are not supported on Safari.
You may have a look to this link.
In case you want to recognize few simple commands you can look on Pocketsphinx.js
The code to recognize speech is simple:
var id = 0;
recognizer.postMessage({command: 'initialize', callbackId: id});
var keyphrase = "HELLO WORLD";
recognizer.postMessage({command: 'addKeyword', data: keyphrase, callbackId: id});
recognizer.postMessage({command: 'start', data: id});
recognizer.postMessage({command: 'process', data: array});
recognizer.postMessage({command: 'stop'});
recognizer.onmessage = function(e) {
if (e.data.hasOwnProperty('hyp')) {
alert(e.data.hyp);
}
};
For more details see also the full example here