Author Topic: Audio...heh  (Read 2284 times)

0 Members and 1 Guest are viewing this topic.

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Audio...heh
« on: March 28, 2022, 09:21:59 AM »
Messin' with it... just for the 'hades' of it in between doctors, etc... at my age.... .
Using Netcam Studio, replacing Hikvisions as they fade away, with Reolink 410 5MB...experimenting with cam audio... trick was figuring out how to access it,and embed it.Pain in the but for old brain like me, but simple once ya get it... hard part for me was a web player...
Here's the experiment as it stands at the moment,...Don't expect the player sound to blast you, unless the wind is blowing... it's relatively quiet otherwise...
https://frankfortweather.us/camsUP/cam1b.html
Don't know how this works out across devices, user bandwidth, etc...  but curious... .
 


Offline davidmc36

  • He who dies with the most toys wins!
  • Forecaster
  • *****
  • Posts: 1246
  • FN25ie61jw
    • MorewoodW34
Re: Audio...heh
« Reply #1 on: March 28, 2022, 10:02:35 AM »
Some birds chirping today. Works on my small Tab

Offline Jumpin Joe

  • Forecaster
  • *****
  • Posts: 1073
    • Joe’s Weather
Re: Audio...heh
« Reply #2 on: March 28, 2022, 10:21:05 AM »
The birds are a chirping!

https://joesweather.info
Davis Vantage Pro 2 Plus 24-FARS Wireless
WeatherLink Live

Offline Garth Bock

  • Table Rock Lake Weather
  • Forecaster
  • *****
  • Posts: 2745
Re: Audio...heh
« Reply #3 on: March 28, 2022, 10:26:16 AM »
Get a blank screen on my Android 8.1 using Chrome. 😞

Offline CNYWeather

  • Forecaster
  • *****
  • Posts: 2295
    • CNYWeather
Re: Audio...heh
« Reply #4 on: March 28, 2022, 11:47:34 AM »
I really like the Reolink camera I have. It's the RLC-410 5 Megapixel PoE.
It does get loud sometimes when the wind in howling like it is today!
Can even hear my dogs inside when they bark from time to time. I put it on YouTube also

https://youtu.be/NsnlMYm4LLE
Tony




Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Audio...heh
« Reply #5 on: March 29, 2022, 06:10:38 PM »
...It's the RLC-410 5 Megapixel PoE.
It does get loud sometimes when the wind in howling like it is today!
---
Let it grow a mustache!

The 410 on the 'test' page link doesn't have one, yet, but the 'snowcam' does, just not enabled the sound online. Helps with the wind quite a bit. This one shown is geared to replace the 'northwest' Hikie when I get 'round to it.... mustached attached with dab of RTV adhesive.

Get a blank screen on my Android 8.1 using Chrome. 😞
hmmm... don't know... Android Phone w/Chrome, and Kindle Fire 8 show it fine, EXCEPT both don't like the way I'm showing the 'max volume' speaker Icon... ain't figured that one out...CSS or somewhere in the way I've modified that older audio script...ok in FF Edge,etc... far as I've checked. If you find a setting or something in Chrome that opens page, maybe let me know? Does this one work (current production page w/o cam audio script)
https://frankfortweather.us/camsUP/cam1.html
 


Offline davidefa

  • Forecaster
  • *****
  • Posts: 436
Re: Audio...heh
« Reply #6 on: March 29, 2022, 06:51:19 PM »
Great, can you briefly describe how to embedd audio in the html page?

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Audio...heh
« Reply #7 on: March 29, 2022, 08:19:50 PM »
Great, can you briefly describe how to embedd audio in the html page?
"I Can't Do A Short Answer"..... folks who know me realize that  ](*,) :lol:
Short answer:  HTML Audio Tag.
Long Answer: First of all, today everything's got to be TLS/SSL, and not simple http... otherwise 'media' might get rejected or ignored by devices, etc.
The Weather Radio Feed, in the header, is simple HTML tag, with a small javascript... just 'on' and 'off' ....the HTTPS audio stream is my feed from 'here' (SECaster my encoder) served as HTTPS by the WxForum Communities 'NOAA WEATHER RADIO ORG', so I don't need SSL locally on those machines. (Ken True donates WxRadio.Org Icecast server, and other features are donated and hosted by several WxForum folks)
HTML for the Weather Radio stream:
Code: [Select]
<div class="seqwxrad">
<audio id="noaaRAD"><source src='https://wxradio.org/KY-Frankfort-WZ2523' type='audio/mpeg' /></audio>
        <a id="audioControl" href="#" title="NOAA All Hazards Radio. Frankfort KY 162.5 MHz."><img src="../listenB.png" id="playfwx" alt="Listen"/><img src="../stopB.png" id="pausefwx" alt="Stop"/></a>
</div>
And a bit of javascript for 'eye candy' and 'on/off'
Code: [Select]
var wxRadioFW = document.getElementById('noaaRAD'),
    ctrl = document.getElementById('audioControl'),
    playButton = document.getElementById('playfwx'),
    pauseButton = document.getElementById('pausefwx');

function toggleButton() {
    if (playButton.style.display === 'none') {
        playButton.style.display = 'block';
        pauseButton.style.display = 'none';
    } else {
        playButton.style.display = 'none';
        pauseButton.style.display = 'block';
    }
}
ctrl.onclick = function () {
    if (wxRadioFW.paused) {
        wxRadioFW.play();
    } else {
        wxRadioFW.pause();
    }
        toggleButton();
    // Prevent Default Action
    return false;
};

Now, that experimental camera audio is a different beast entirely... I DON'T stream the camera directly, for lots of reasons. Because of that, I've to work around the HTTPS thing, since I ain't payin' nobody to stream it, by golly!  Ain't worth it.  So use a program I've had a long time, Netcam Studio, which can have SSL installed in its server, and I use a basic certificate and DNS from NO IP. Audio streaming is problematic in the limitations of the applications and money I have available.  So I pull the camera's audio out of Netcam using a trick I discovered, using it as both encoder and server, access it as an MP3 file... using the certificate in Netcam S., I could access it directly, exactly as in the RADIO feed above..., or with the pure and simple HTML5 Audio tag... or other methods.
BUT:
HTML5 on an pure simple 'audio tag' has a couple of gotchas... on a Live, Continuous stream (not a 'track') it has no 'stop' attribute.  If paused, it keeps streaming, caching the audio, so when you hit 'play' again, it starts where it left off, until things may or may not catch up with the 'live' data.... confusing, and sucks.  It needed a bit more 'fuctionality' so we hacked into a 7 year old 'script', and have been messing with it... (be easier if I really knew what the hell I was doing). The Script is Jplayer, basically, and uses Jquery, with a bunch of interference from me...
Without getting into any more, here's what is in the actual HTML, as it stands, ignoring the 'scripts' which are called separately.
Code: [Select]
<div>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<table>
<tr><td><p>Live&nbsp;Audio</p>
</td><td>
<div class="jp-controls" style="width:105px">
<button class="jp-play" style="border:1px solid #008060;border-radius:4px" tabindex="0">play</button>
</div>
</td><td>
<div class="jp-volume-controls">
<button class="jp-mute" style="width:36px;left:0px" tabindex="0">mute</button>
<button class="jp-volume-max" style="display:inline;width:40px;left:44px;top:-36px" tabindex="0">max volume</button>
            <div class="jp-volume-bar" style="top:-34px">
            <div class="jp-volume-bar-value"></div>
</div>
</div>   
</td></tr>
</table>
</div>
<div class="jp-no-solution"><span>Your device cannot play the camera audio</span>
</div>
</div>
So it's just an experiment, I'm sure there's a better way, but I'm cheap, old, and confused... and this isn't polished at all, just got it working.,..
OH... you must also setup Static IPs, both locally for cams and machines, and from the web, router port forwarding, so stuff doesn't move around or live in the twilight zone....
« Last Edit: March 29, 2022, 08:28:15 PM by Cutty Sark Sailor »
 


Offline davidefa

  • Forecaster
  • *****
  • Posts: 436
Re: Audio...heh
« Reply #8 on: March 30, 2022, 03:07:37 AM »
Thanks for both answers ( the short one an the not-so-short one ; - ).

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Audio...heh
« Reply #9 on: March 31, 2022, 09:21:21 PM »
Ok...remember the 'moustache' for wind noise, above?


After about 15 seconds, the below video will switch to cam with 'moustache' as shown above
Click to play short audio comparison:

« Last Edit: March 31, 2022, 09:29:36 PM by Cutty Sark Sailor »
 


Offline weatheroz

  • Senior Contributor
  • ****
  • Posts: 216
    • http://www.jimboombaweather.com
Re: Audio...heh
« Reply #10 on: February 08, 2023, 02:40:47 AM »
how do you make the 'moustache' to cut the wind noise down ? :)
Brendan,
vk4blp
IRLP 6857 Echolink 672767


Offline ChrisB

  • Member
  • *
  • Posts: 27
Re: Audio...heh
« Reply #11 on: February 08, 2023, 05:21:53 AM »
I like it! Works for me in Edge.

Totally beyond my ability to do the same for my website but thanks for the inspiration nonetheless!
http://www.kennfordweather.com - Devon, U.K

Davis Vantage Vue | Davis AirLink | WiFi Logger

Offline Cutty Sark Sailor

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 3393
    • Frankfort Weather - TwinHollies WeatherCenter
Re: Audio...heh
« Reply #12 on: February 09, 2023, 12:25:16 PM »
how do you make the 'moustache' to cut the wind noise down ? :)


 These shots are 'experimental', but have worked well... In this case, that 'SW' view does NOT have a wind muff, as yet.  I used some a friend had extra, similar to  https://www.amazon.com/gp/product/B07T6Y76M1/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
 
Whatever, they should be a wool, fur, or similar synthetic,  tuft of weatherproof 'hair' that won't hold water and dries quickly.  Foam type, or plastic won't be acceptable in long run., maybe an inch diameter, no more than 3/4" or so 'depth'.
 
Now, I experimented with several 'attaching' modes. Using an RTV or similar sealing/adhesive is the best, trust me.  It ALSO does allow removal and replacement if necessary, and has held up very well for a year of weather extremes.

These specific muffs have self-adhesive on back.  Worthless for our purpose. Won't stay stuck.  :lol:
There is a cutout on the 'backing' which MUST center over the tiny mic air port on the camera, or the backing will 'mute' the mic.   
Sort of 'destroy' the adhesive, gently, with alcohol, and let dry...some of the 'fiber' tufts may come loose... don't sweat it too much.
Clean the area around the mic 'wind port' hole. Alcohol.
Apply a very thin narrow surface layer RTV (similar) sealant/adhesive around the mic port, about an 1/8 from the port opening, area size of 'muff'. 
On the 'muff', cover the backing with a thin layer RTV, ensuring you DO NOT get any in the cutout for the mic port, but try to cover any loose tuft ends with the adhesive sealant.

The tricky part is to center that muff' porthole directly over the mic port.  Enjoy the experience. 
Whatever, DON'T smear any RTV into that mic port gap!
Let 'er dry several hours, or overnight...

These cut noise down, but also cut overall audio some, so expect that.  If it's really muted, see if you've got the muff centered, and no sealant in the port hole area!


NETCAM STUDIO can serve both the audio (as 'mp3'), and the video from a camera source. However how to access the audio stream directly for website might be tricky. The Audio mp3 Stream Access address for the Reolink cams shown, and served out of properly configured NetCam Studio, with SSL installed,  Port Forwarded,  DNS service static IP,  (Install SSL so browsers wont fail as 'non-secure'.)
will be similar to:
  https://STATICDNSdomain:EXTERNALforwardedPortNumber/Audio/cam#.mp3?authToken=something-something&uniq=2.222"
This is the authToken and camera number from the html code generated by NCS for the video...
serverUrl"/Jpeg/id?authToken=token&"new Date().getTime();
becomes
serverUrl"/Audio/id?authToken=token&uniq=somenumber;





 
« Last Edit: February 09, 2023, 12:31:43 PM by Cutty Sark Sailor »
 


Offline weatheroz

  • Senior Contributor
  • ****
  • Posts: 216
    • http://www.jimboombaweather.com
Re: Audio...heh
« Reply #13 on: February 13, 2023, 07:33:51 PM »

 These shots are 'experimental', but have worked well... In this case, that 'SW' view does NOT have a wind muff, as yet.  I used some a friend had extra, similar to  https://www.amazon.com/gp/product/B07T6Y76M1/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
 
Whatever, they should be a wool, fur, or similar synthetic,  tuft of weatherproof 'hair' that won't hold water and dries quickly.  Foam type, or plastic won't be acceptable in long run., maybe an inch diameter, no more than 3/4" or so 'depth'.

Thanks for the details, I'll go hunt them down. :)
Brendan,
vk4blp
IRLP 6857 Echolink 672767


 

anything