Comments (2)
Hey!
So what you'll want to do is combine (mix) the two audio signals before encoding and muxing them, not muxing them separately and trying to combine them later. We can do this easily using the WebAudio API, by just hooking up some MediaStreamSourceNodes to a MediaStreamDestinationNode:
let audioContext = new AudioContext()
// Create MediaStreamSource nodes
let micStream = await navigator.mediaDevices.getUserMedia({ audio: true })
let micSource = audioContext.createMediaStreamSource(micStream)
let micGain = audioContext.createGain()
let displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
let displaySource = audioContext.createMediaStreamSource(displayStream)
let displayGain = audioContext.createGain()
// Create the MediaStreamDestination
let destination = audioContext.createMediaStreamDestination()
// Connect the microphone source to gain node and destination
micSource.connect(micGain)
micGain.connect(destination)
// Connect the display source to gain node and destination
displaySource.connect(displayGain)
displayGain.connect(destination)
// Set whatever volumes you want
micGain.gain.value = 1
displayGain.gain.value = 0.7
// Create the MediaStreamTrackProcessor
let trackProcessor = new MediaStreamTrackProcessor(destination.stream.getAudioTracks()[0])
let consumer = new WritableStream({
write(audioData) {
// Assuming the AudioEncoder and stuff are set up already
audioEncoder.encode(audioData);
audioData.close();
}
});
trackProcessor.readable.pipeTo(consumer);
I added some GainNodes to also control the volume, which you might wanna do.
For your second question, of course it is. You can use a second MediaStreamTrackProcessor to get VideoFrames from a video track, which is likely what you want to do for capturing the recorded screen. Additionally, you can create VideoFrames manually. You're not limited by canvas, that's just something I did in my demo. By my knowledge, I think you can also draw a MediaStream directly to a canvas by going through a <video>
element with its srcObject
set. You could then also use that to generate a new VideoFrame.
from webm-muxer.
Do you still need help or can I close this issue?
from webm-muxer.
Related Issues (20)
- Help getting audio from audio context working HOT 8
- Recording a <canvas> and audio stream HOT 12
- Need help with YouTube Live Ingest using HLS HOT 1
- Support transparency / alpha by encoding stream HOT 8
- Timeline for Firefox VideoEncoder support HOT 4
- Are there plans to support demux webm file๏ผ HOT 2
- Provide package as ESM module HOT 2
- VideoDecoder? HOT 1
- Using with nodejs fs HOT 12
- How to use with PHP? HOT 10
- Writing to disk via node HOT 3
- Help with multimedia file (muxing audio and video) HOT 12
- is one chunk equals to one segment ? HOT 22
- webmmuxer throws Matroska cluster too big error even with 10 seconds keyframe interval. HOT 8
- Chrome throwing error and failing to export video HOT 2
- Dynamic browser support HOT 6
- StreamTarget onDone not available anymore since v4.0.0 HOT 1
- Stream to web storage HOT 2
- Video is flickering, seems to be related to slow Android device HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webm-muxer.