Jak přepnu z předního na zadní fotoaparát?

Přečtěte si, jak přepnout z fotoaparátu v mobilním zařízení pomocí JavaScriptu v prohlížeči.

Když pracujete s WebRTC, budete muset udělat spoustu věcí, které uživatelům nabízejí ty nejzákladnější funkce pro interakci s vaší aplikací. Jednou z těchto funkcí je možnost ručního výběru jiného zdroje videa nebo zvuku. Například při prohlížení ukázky na tomto webu na Samsungu Galaxy S10+ uvidíte následující dostupné možnosti (Galaxy S10 má na zadní straně tři fotoaparáty: hlavní 12megapixelový s clonou, která se pohybuje mezi f/1.5 a f /2.4 v závislosti na světle. Ultra širokoúhlá 16megapixelová jednotka a 12megapixelový teleobjektiv pro zoomování):

Ačkoli příklad vypadá, že může vyžadovat komplikovanou logiku, aby fungoval, ve skutečnosti tomu tak není. Musíte porozumět základům interakce s MediaStream API v prohlížeči a za pár minut budete v provozu. Tento článek vysvětlí, jak snadno vypsat seznam všech mediálních zařízení na vašem zařízení, abyste mohli používat jejich stream.

požadavky

Prohlížeč, ve kterém budete pracovat, musí podporovat NavigatorUserMedia API. Můžete to ověřit jednoduchou podmínkou ve vašem kódu:

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices)

Pokud je podporován, můžete pokračovat.

1. Seznam mediálních zařízení bez svolení uživatele

Poznámka: Tento přístup funguje pouze v prohlížečích Chrome a Firefox. Má fungovat pouze pro ověření, zda má uživatel připojený mikrofon nebo kameru, protože neuvádí podrobnosti o zařízení, jako je štítek, ID zařízení a tak dále.

První věc, kterou se musíte naučit, je vypsat seznam všech dostupných video a audio vstupních zařízení počítače. V tomto příkladu použijeme velmi jednoduchý přístup vypsání všech ve 2 výběrech, jeden z nich bude obsahovat seznam audiovstupních zařízení (mikrofony) a jeden bude vypisovat všechna videovstupní zařízení (kamery). Označení bude vypadat takto:

Select Video Source (Camera) Select Audio Source (Microphone) 

A JavaScript, který bude spuštěn pro seznam zařízení, bude následující:

navigator.mediaDevices.enumerateDevices().then((devices) => < let videoSourcesSelect = document.getElementById("video-source"); let audioSourcesSelect = document.getElementById("audio-source"); // Iterate over all the list of devices (InputDeviceInfo and MediaDeviceInfo) devices.forEach((device) => < let option = new Option(); option.value = device.deviceId; // According to the type of media device switch(device.kind)< // Append device to list of Cameras case "videoinput": option.text = device.label || `Camera $`; videoSourcesSelect.appendChild(option); break; // Append device to list of Microphone case "audioinput": option.text = device.label || `Microphone $`; audioSourcesSelect.appendChild(option); break; >console.log(device); >); >).catch(function (e) < console.log(e.name + ": " + e.message); >);

Pomocí rozhraní Promises API získaného z navigator.mediaDevices.enumerateDevices získáme pole, které obsahuje instance InputDeviceInfo a MediaDeviceInfo každého z nich. Budeme přes ně iterovat a k definovaným výběrům připojíme nový prvek volby, kde každý z nich bude mít jednoduchý popisek, pokud je k dispozici jako text nebo číslo zařízení, a jako hodnotu vlastnost deviceId, která obsahuje ID zařízení, které můžete později použít k přepnutí ze zdroje.

Problém s tímto přístupem je, že nezískáte skutečné informace o zařízeních a i když máte připojeno více zařízení, vždy získáte jednu položku pro každou kategorii ( audiovstup , videovstup , audiovýstup ):

2. Seznam mediálních zařízení se svolením uživatele

Pokud chcete podrobné informace o všech dostupných zařízeních na počítači/mobilu uživatele, budete muset požádat o oprávnění uživatele:

To lze vyžádat prostřednictvím metody MediaDevices.getUserMedia(), která vyzve uživatele k povolení použít mediální vstup, který vytvoří MediaStream se stopami obsahujícími požadované typy médií. V tomto příkladu vytvoříme pomocníka, který nám umožní provádět vše se srozumitelným pracovním postupem. Jako označení pro tento příklad budeme mít 2 výběry a prvek videa, který přehraje stream:

Vyberte zdroj videa (fotoaparát) Vyberte zdroj zvuku (mikrofon) Živý náhled: 

Pomocník, který použijeme k vyžádání oprávnění, bude následující:

let videoSourcesSelect = document.getElementById("video-source"); let audioSourcesSelect = document.getElementById("audio-source"); let videoPlayer = document.getElementById("player"); // Create Helper to ask for permission and list devices let MediaStreamHelper = < // Property of the object to store the current stream _stream: null, // This method will return the promise to list the real devices getDevices: function() < return navigator.mediaDevices.enumerateDevices(); >, // Request user permissions to access the camera and video requestStream: function() < if (this._stream) < this._stream.getTracks().forEach(track =>< track.stop(); >); > const audioSource = audioSourcesSelect.value; const videoSource = videoSourcesSelect.value; const constraints = < audio: < deviceId: audioSource ? : undefined >, video: < deviceId: videoSource ? : undefined >>; return navigator.mediaDevices.getUserMedia(constraints); > >;

S tímto pomocníkem byste měli být schopni požádat uživatele o povolení pomocí metody MediaStreamHelper.requestStream takto:

// Request streams (audio and video), ask for permission and display streams in the video element MediaStreamHelper.requestStream().then(function(stream) < // Store Current Stream MediaStreamHelper._stream = stream; // Select the Current Streams in the list of devices audioSourcesSelect.selectedIndex = [. audioSourcesSelect.options].findIndex(option =>option.text === stream.getAudioTracks()[0].label); videoSourcesSelect.selectedIndex = [. videoSourcesSelect.options].findIndex(option => option.text === stream.getVideoTracks()[0].label); videoPlayer.data-data-srcObject = stream; // You can now list the devices using the Helper here // MediaStreamHelper.getDevices().then(. ); >).catch(function(err)< console.error(err); >); 

V tomto příkladu zobrazíme stream zvuku a videa na prvku Video dokumentu (přehrávači). Po získání streamu budete mít nyní přístup k seznamu zařízení s příslibem MediaStreamHelper.getDevices:

// Request streams (audio and video), ask for permission and display streams in the video element MediaStreamHelper.requestStream().then(function(stream) < console.log(stream); // Store Current Stream MediaStreamHelper._stream = stream; // Select the Current Streams in the list of devices audioSourcesSelect.selectedIndex = [. audioSourcesSelect.options].findIndex(option =>option.text === stream.getAudioTracks()[0].label); videoSourcesSelect.selectedIndex = [. videoSourcesSelect.options].findIndex(option => option.text === stream.getVideoTracks()[0].label); // Play the current stream in the Video element videoPlayer.data-data-srcObject = stream; // You can now list the devices using the Helper MediaStreamHelper.getDevices().then((devices) => < // Iterate over all the list of devices (InputDeviceInfo and MediaDeviceInfo) devices.forEach((device) => < let option = new Option(); option.value = device.deviceId; // According to the type of media device switch(device.kind)< // Append device to list of Cameras case "videoinput": option.text = device.label || `Camera $`; videoSourcesSelect.appendChild(option); break; // Append device to list of Microphone case "audioinput": option.text = device.label || `Microphone $`; audioSourcesSelect.appendChild(option); break; >console.log(device); >); >).catch(function (e) < console.log(e.name + ": " + e.message); >); >).catch(function(err)< console.error(err); >); 

Zobrazí se seznam zařízení, ke kterým jsme dříve neměli přístup:

3. Práce se změnou zdroje zvuku a videa

Do této chvíle kód umožňuje uživateli vidět seznam dostupných zařízení, nyní je nutné zvládnout změnu streamu, když uživatel vybere nový zdroj videa nebo zvuku ve výběrech. To lze snadno provést připojením posluchače událostí k výběrům. Když je změna spuštěna, pomocník by měl požádat o stream znovu pomocí aktuálně vybraných zdrojů a je to! Nezapomeňte také aktualizovat stream prvku videa:

let videoSourcesSelect = document.getElementById("video-source"); let audioSourcesSelect = document.getElementById("audio-source"); let videoPlayer = document.getElementById("player"); videoSourcesSelect.onchange = function()< MediaStreamHelper.requestStream().then(function(stream)< MediaStreamHelper._stream = stream; videoPlayer.data-data-srcObject = stream; >); >; audioSourcesSelect.onchange = function()< MediaStreamHelper.requestStream().then(function(stream)< MediaStreamHelper._stream = stream; videoPlayer.data-data-srcObject = stream; >); >;

Pryč jsou doby, kdy bylo nahrávání videa hlavním úkolem. Zapomeňte na videa, dokonce i pořizování snímků bylo těžkopádné. Díky neustále se rozvíjející technologii jsme nyní schopni pořizovat profesionální fotografie a videa tak snadno, a to i přímo z našich telefonů.

Existuje však jedna oblast, kde jsme stále nebyli schopni udělat žádný pokrok. Mluvím o možnosti používat obě kamery, přední i zadní, současně k nahrávání videí. Ve skutečnosti nelze při nahrávání ani otočit kameru.

Mnoho telefonů umožňuje pořizovat duální snímky, kdy jsou snímky pořízeny předním i zadním fotoaparátem současně. Nemůžete však přepínat kamery při nahrávání videa jak na Androidu, tak na iPhonu.

Problém

V zásadě platí, že jakmile člověk začne nahrávat video, není možné fotoaparát převrátit zatímco stále nahráváte. Pokud tedy chcete funkci jako je tato, mohou vám pomoci aplikace sociálních médií jako Instagram a Snapchat.

Protože jsou však tyto aplikace omezeny na zachycení pouze 15–20 sekund videa najednou, budete muset natočit více videí.

Tento trik zahrnuje dva hlavní kroky – vytvořte více videí pomocí aplikací sociálních médií a poté je sloučte dohromady pomocí aplikací pro spojování videí.

V tomto příspěvku jsme poskytli podrobné pokyny k vytvoření takových videí.

Vytvářejte videa pomocí sociálních aplikací

Vzhledem k tomu, že nativní aplikace fotoaparátu nepodporuje překlápění, můžete k překlopení fotoaparátu při nahrávání použít aplikace jako Instagram, Facebook Messenger nebo Snapchat. Zde jsou kroky.

Metoda 1: Použití Instagramu

Krok 1: Otevřete aplikaci Instagram na svém zařízení Android nebo iPhone. Klepnutím na ikonu fotoaparátu v levém horním rohu přejděte na obrazovku příběhu.

Krok 2: Klepnutím na možnost Příběh přejdete do režimu Příběh.

Krok 3: Nyní, pokud jste uživatelem iPhone, podržte ikonu fotoaparátu a začněte nahrávat video. Chcete-li fotoaparát převrátit, poklepejte druhou rukou na libovolné místo na obrazovce a zároveň držte ikonu fotoaparátu.

Na zařízeních Android nefunguje překlápění fotoaparátu v běžném příběhovém režimu. K nahrávání videa musíte použít režim handsfree. Jakmile se tedy dostanete na obrazovku režimu příběhu, rozbalte možnosti na levé straně. Najdete Hands-free. Klepněte na něj. Stisknutím tlačítka Capture zahájíte nahrávání videa.

Když je nahrávání zapnuté, dvojitým klepnutím kamkoli na obrazovku přepnete kameru. Režim Hands-free můžete použít k překlopení fotoaparátu i na iPhonech.

Krok 4: Jakmile nahrajete video, klepněte na tlačítko Uložit pro uložení videa do zařízení.

Krok 5: Protože Instagram ve Stories podporuje pouze 15sekundové video, budete muset natočit více videí, pokud chcete delší video. Já vím, já vím. Je to příliš mnoho. Ale něco je lepší než nic.

Jakmile budete mít všechna videa, musíte je sloučit dohromady. Způsob, jak toho dosáhnout, je uveden po metodě Snapchat.

Tip: Chcete-li natáčet videa s vaší tváří a obrazovkou smartphonu pro výukové programy, použijte aplikace pro nahrávání obrazovky, jako je AZ Screen Recorder a DU Screen Recorder

Metoda 2: Použití Snapchatu

Podobně jako na Instagramu můžete také použít Snapchat k překlopení fotoaparátu během nahrávání. Postup je stejný pro iPhone i Android.

Krok 1: Otevřete aplikaci Snapchat a podržte ikonu fotoaparátu pro zahájení nahrávání videa.

Krok 2: Během nahrávání poklepejte kamkoli na obrazovku pro překlopení fotoaparátu (opět pomocí druhé ruky).

Krok 3: Po nahrání videa klepněte na tlačítko Uložit a stáhněte si video do telefonu. Opět platí, že pokud chcete delší video, musíte pořídit více videí.

Metoda 3: Použití Facebook Messengeru

V aplikaci Facebook Messenger otevřete libovolný chat. Klepněte na ikonu fotoaparátu ve spodní části.

V systému Android přejděte na možnost Video. Stisknutím ikony Capture zahájíte nahrávání. Poté dvojitým klepnutím kamkoli na obrazovku překlopte fotoaparát. Po dokončení nahrávání klepněte na ikonu Uložit a stáhněte si video.

Na iPhonu zahájíte nahrávání podržením ikony Capture. Dvojitým klepnutím na obrazovku překlopíte fotoaparát. Po dokončení klepněte na ikonu uložit.

Sešít nebo sloučit videa

Jakmile natočíte všechna videa, je čas si sednout a spojit je dohromady a vytvořit jedno video. Zde je návod, jak to udělat na Androidu a iPhone.

Připojte se k videím na Androidu

V případě, že chcete videa nejprve stříhat, můžete zkontrolovat aplikace pro řezání videa v systému Android. Chcete-li sešívat videa, musíte si stáhnout aplikaci pro úpravu videa třetí strany, která podporuje sloučení.

Zde je několik aplikací, které vám umožní sloučit videa dohromady:

Po stažení jedné z aplikací pro připojení videí klepněte na možnost Připojit/Sloučit a vyberte videa, která chcete spojit. Můžete také použít vestavěný editor videa v telefonu, pokud podporuje spojování videí. Poté si stáhněte finální video do telefonu.

Tip: Pomocí jiných aplikací pro Android můžete také změnit rychlost videa a stabilizovat videa

Připojte se k videím na iPhone

Na iPhone si také musíte stáhnout aplikaci pro spojování videí, abyste mohli videa sloučit. Jednou z aplikací, kterou můžete na svém iPhonu použít k sešívání videí, je Video Joiner & Trimmer. Podívejte se na náš další seznam aplikací, které vám pomohou při slučování videí na vašem iPhone.

Po připojení všech malých videí konečně získáte celé své video v celé jeho kráse. Video pak můžete sdílet na platformách sociálních médií nebo chatovacích aplikacích.

Bonusový tip: K převrácení fotoaparátu použijte aplikaci třetí strany (pouze Android)

Na telefonu Android můžete použít aplikaci fotoaparátu třetí strany k překlopení fotoaparátu při nahrávání videa.

Po stažení otevřete aplikaci a stisknutím ikony snímání začněte nahrávat. Můžete změnit rozlišení videa a přizpůsobit další věci. Chcete-li fotoaparát převrátit, klepněte při nahrávání videa na ikonu Převrátit ve spodní části.

Obrať to!

Bez ohledu na to, zda vlastníte telefon OnePlus nebo zařízení Redmi nebo telefon Samsung, výše uvedený trik funguje na všech zařízeních Android, včetně zařízení Pixel společnosti Google.

Dokud smartphony tuto funkci nativně nepodporují, zdá se, že je to jediný možný způsob, jak převrátit fotoaparát při nahrávání videí na Android a iOS. Pokud víte o nějakém jiném způsobu, dejte nám vědět v komentářích níže.

Další: Rádi fotíte na telefonu Android? Na dalším odkazu se podívejte na 7 manuálních aplikací pro fotoaparát, které vám pomohou při nastavování různých parametrů.

Poslední aktualizace 03. února 2022

Výše uvedený článek může obsahovat přidružené odkazy, které pomáhají podporovat Guiding Tech. Nemá to však vliv na naši redakční integritu. Obsah zůstává nezaujatý a autentický.