looking for assistance from anyone who might have some insight into this. having a problem with the MediaRecorder API built into Chrome, specifically on macOS, a problem that does not appear at all on windows
i am needing to capture the desktop screen as well as the desktop audio, and currently i get the stream using:
navigator.mediaDevices.getDisplayMedia({
video: {
cursor: 'always',
width: 1280,
height: 720,
frameRate: {
ideal: 12,
max: 15
},
},
audio: true
})
this of course gives the prompt for the user to select a screen/application/tab
following that, i load that into a new MediaRecorder:
new MediaRecorder(screenCaptureStream, {mimeType: "video/webm"})
on windows this all works fine. as long as the "Share Audio" checkbox on the bottom left is marked, audio will be heard in the ending file.
on mac however, the only time a "Share Audio" option is allowed is when a chrome tab is selected. this is fine for something like a youtube tab playing music, it captures both video and audio without a problem.
however, on a tab running an opentok video session, no audio coming from the video session is captured. at first i thought it may have been ffmpeg incorrectly processing it, but simply playing back the raw webm file gives no audio. checking with mediaInfo the file does indeed come back with an audio stream at "48.0kHz, 32bits, 1 channel, Opus"
because this isnt a problem on windows, i imagine that the Opentok video session is somehow outputting in such a way that it it bypassing the chrome tab altogether, so that even is the user can hear the audio, the recorder doesnt capture it.
does anyone know how to allow chrome to record audio on the Application/Screen choices on macOS?
EDIT: upon more experimentation, ive discovered that the issue lies in tokbox streams themselves.
setup: using a second pc, i hooked up my phone to a line-in port to use as the "mic" for the tokbox stream, and started up the session again. on that same page i have a youtube embedded iframe link to a random video, and on firefox, another video entirely.
selecting entire screen and making sure "Share Audio" is selected, i check that i can hear the audio being played from the phone on the other pc and its fine. the recording is going, and the checks for if there is an audio track pass. i swap to the next audio source by muting the 'phone' stream, and start playing the youtube embed. after a little bit, i stop it, and play the firefox video.
the results are that the embed and firefox audio got captured, but NONE of the tokbox audio got captured. (this was done on windows, so now i know its not a mac issue)
where is it being outputted?
Related
I am retrieving tweets via the Twitter api and attempting to embed their video attachments.
Embed Code:
<video controls="">
<source src="https://video.twimg.com/ext_tw_video/1444247208514113546/pu/vid/1280x720/6rw0rzMWMSk39eoz.mp4?tag=12" type="video/mp4">
</video>
Firefox:
The above code fails to render the video player altogether in firefox, choosing instead to simply return: No video with supported format and MIME type found.
Note: There is no issue in playback when the video url is entered directly into the address bar.
Chrome:
Chrome spontaneously stops playback after 0-4 seconds, returning to the first frame. This behavior is somewhat sporadic, occurring sometimes, but not always. When it does occur, no matter how many times the play button is pressed, the video is unable to progress any further. Once a video is in memory and has been successfully loaded by refreshing the page, it no longer behaves in this way. Like firefox, there is no issue in loading or playback if the video url is entered directly into the address bar.
Video demonstration:
Some more examples of twitter videos to play with:
Many site issues such as the No video with supported format and MIME type found error can be caused by corrupted cookies or cache.This can cause streaming problems in any browser
Firefox Solution:
I suggest you Clear the Cache and Remove Cookies in your settings
Warning ! ! This will log you out of sites you're logged in to.
To do this enter about:preferences in the url bar.
To clear Cookies: Select Privacy under History, then select Firefox will Use Custom Settings. Press the button on the right side called Show Cookies, then use the search bar to look for the site. There may be more than one cookie in use for this site. Remove All of them.
To clear cache: Select Advanced > Network. Across from Cached Web Content, Press Clear Now.
If there is still a problem, Start Firefox in Safe Mode {web link} While you are in safe mode;
Then restart.
Chrome solution:
At the top right, click the More button
Navigate to More tools > Clear browsing data .
At the top, choose a time range. To delete everything, select All time.
Next to Cookies and other site data and Cached images and files, check the boxes.
Click the Clear data button.
I used Simple Peer(WebRTC), ReactJS for my video call service. In the video call screen, I used 2 video tags(contact video and user video) for video playback. When the call gets started after a successful connection, only the contact video is getting played(1st video tag) and when the contact turns off their video user video is getting played(2nd video tag).
This only happens on Safari(I only tested on Mac). It works fine in other browsers(Google Chrome, Firefox).
Is there a way to fix this issue?
WebRTC depends a lot on browsers and Safari has specific requirements (like strict order of tracks). Check JS console to identify any errors.
You can experiment with a turnkey html5 videocall solution that works and try to replicate.
I have a security cam that sends via rtsp, which I'm able to capture on vlc player, but I want to embed that into my webpage. I've been searching for hours on how to do this, but have failed to find any recent documentation on how to do this.
I am not set on vlc either, so I'm basically trying to go from cam -> rtsp -> player (if required) -> html embed.
Any help would be appreciated. And I know this is an open question, but I'm failing to find what I need on the net, so I'm open to any solutions.
With that said, I'm not looking for 3rd party providers to send the stream to me. For security reasons, the stream will not exit the compound.
Please do not send me old links to old articles either. I have scoured and probably read them already, and my experience is that things have changed. I'm looking for some answers from people who have experienced similar issues and been able to resolve them. Thanks!
I. Open VLC and select "Open Network Stream" via the Media menu.
II. Input your IP camera's RTSP string (credentials included) i.e
rtsp://test:test#192.168.0.37:554/cam/realmonitor?channel=1&subtype=1
which would be for my IP camera.
III. Click the down arrow next to the Play button and select "Stream".
IV. For the destination set it to "HTTP" then select "ADD". In the port field this is where you can set what port VLC uses to stream the video. In this example I used 8080. The path you can leave as "/".
V. Check the box for Activate Transcoding and set the profile to "Video - Theora + Vorbis (OGG).
VI. Click the Screwdriver + Wrench icon, set encapsulation to Ogg/Ogm, the video codec to "Theora" then set the bitrate to what you want to broadcast the stream to your site at (for what its worth I simply use the same bit rate as I am having the camera stream at. In addition you can also set your framerate
VII. Using the sub tab "Resolution" you can use "Auto" for scale, width, and height. You can disable the audio codec if you camera does not have a mic or do not want to broadcast the audio, & disable subtitles. Finally click "Save" then "Next".
VIII. Check the box for "Stream all elementary streams" and then click "Stream". Keep in mind VLC will show a black box where video would normally be which is intended. You should see the video timer moving just above the Pause/Play button.
IX. Then drop this code into your page:
<video id="video" src="http://IP_of_VLC_computer:VLC_Port" autoplay="autoplay" width="videowidth" height="videoheight"></video>
One of mine is as follows:
<video id="video" src="http://192.168.0.4:8080" autoplay="autoplay" width="704" height="480"></video>
X. Load your web page to see what the video looks like. Do not be concerned if you see what looks like a green screen. Just refresh the page every 5 secs or so to force the page to update the stream. That is common with RTSP video transport.
To sum it up you are turning your PC into a transcoder by way of VLC to spit out RTSP video that is HTML5 friendly.
I uploaded a 1min 46sec video to youtube to show you how to complete this process:
I have web application(similar to Karaoke) where user can record his voice over instrumental.
After recording user plays back recording. Here I play instrumental in <audio> tag and voice using web audio api. To sync both audios on play/pause I calculate time like this
pausedAt = Date.now() - startedAt;
startedAt = Date.now() - pausedAt;
This works fine. Issue is when user uses slider on audio tag to move forward/backward. I am thinking of solution like this
Use ontimeupdate event, stop the voice and then use startAt(currentTime) where currentTime is of instrumental playing in audio tag.
Since there is no seekTo function in api, I have to stop and then start audio. Is there any better solution for this?
Second issue I face is seeking on audio tag is not smooth. If I arbitrarily clicks on progress bar sometimes it doesn't work. When I saw network tab in developer tool window I saw something like shown in image. It sends out some 600 requests and some 86 MB data downloaded whereas file size is less than 10 MB.
You really should use the Web Audio API to do this. will never give you precise synchronization, and it will rely on streaming to seek - which is going to result in extra downloading, as you saw. Just load the song via XHR and decodeAudioData, and provide your own playback controls.
This MPEG-DASH stream
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11.smil/manifest_mpm4sav_mvlist.mpd
doesn't play in dash.js -- it plays the first segment at the lowest bitrate, switches to the next higher bitrate and stops after loading the second bitrate's init information. You can see this by pointing Chrome at the dash.js reference player, entering the stream URL in the top box and hitting Load. Open the JavaScript console to see that dash.js reported a media error, which means that the video element had a .error.
The same player is able to play this stream in IE11 without error.
These streams, each of which contains only one of the bitrates that play in the above sequence, both play without error in Chrome, so it's not that the underlying media is just somehow corrupt.
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_0.smil/manifest_mpm4sav_mvlist.mpd
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_1.smil/manifest_mpm4sav_mvlist.mpd
Any ideas?
A Chromium person says that this is due to audio sample rate switching, which Chrome doesn't support yet: https://code.google.com/p/chromium/issues/detail?id=315330 Although each of our videos' video bitrates should have had the same audio bitrate, some videos had different audio bitrates for different video bitrates. The solution was to reencode those videos correctly.