use leptos::{ IntoView, ev, html::{ElementChild, button}, logging::log, prelude::{OnAttribute, Read, Show, ShowProps, ToChildren}, server::LocalResource, task::spawn_local, }; use wasm_bindgen_futures::JsFuture; use web_sys::{ HtmlAudioElement, MediaStream, MediaStreamConstraints, MediaStreamTrack, MediaTrackConstraints, wasm_bindgen::{JsCast, JsValue}, window, }; pub fn app() -> impl IntoView { let audio_stream = LocalResource::new(|| media()); let props = ShowProps::builder() .when(move || audio_stream.read().is_some()) .children(ToChildren::to_children(move || { let audio_element = HtmlAudioElement::new().unwrap(); let audio_stream = audio_stream.read(); let audio_stream = audio_stream.as_deref(); audio_element.set_src_object(audio_stream); button() .on(ev::click, move |_| match audio_element.play() { Ok(audio_element_play_promise) => { log!("{}", "Play will"); spawn_local(async move { JsFuture::from(audio_element_play_promise).await.ok(); }); log!("{}", "Play must"); } Err(err_val) => log!("{:#?}", err_val), }) .child("Happy Button") .into_view() })) .fallback(|| button().child("Sad Button")) .build(); Show(props) } async fn media() -> MediaStream { let media_devices = window().unwrap().navigator().media_devices().unwrap(); let media_stream_constraints = MediaStreamConstraints::new(); let media_track_constraints = MediaTrackConstraints::new(); media_stream_constraints.set_audio(&JsValue::TRUE); media_track_constraints.set_echo_cancellation(&JsValue::FALSE); media_track_constraints.set_noise_suppression(&JsValue::FALSE); media_track_constraints.set_auto_gain_control(&JsValue::FALSE); let media_stream_promise = media_devices .get_user_media_with_constraints(&media_stream_constraints) .unwrap(); let media_stream = JsFuture::from(media_stream_promise) .await .unwrap() .dyn_into::() .unwrap(); let audio_stream_tracks = media_stream.get_audio_tracks(); let audio_stream_tracks = audio_stream_tracks .iter() .map(|audio_track| audio_track.dyn_into::().unwrap()) .collect::>(); log!( "{:#?}\n audio_stream_track_count = {}", audio_stream_tracks, audio_stream_tracks.len() ); let audio_stream_track = audio_stream_tracks.first().unwrap(); let audio_stream_track_apply_constraints_promise = audio_stream_track .apply_constraints_with_constraints(&media_track_constraints) .unwrap(); JsFuture::from(audio_stream_track_apply_constraints_promise) .await .unwrap(); let audio_stream = MediaStream::new().unwrap(); log!("{:#?}", audio_stream_track.get_constraints()); audio_stream.add_track(audio_stream_track); audio_stream }