dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add webcam example

Browse Source
This commit is contained in:
jeromewu 2019-11-10 03:57:05 +00:00
parent 561d854d66
commit 3e254b724d
3 changed files with 77 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/browser/run.html
View File

@ -18,7 +18,7 @@
<h3>Upload a video to transcode to mp4 (x264) and play!</h3> <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls></video><br/> <video id="output-video" controls></video><br/>
<input type="file" id="uploader"> <input type="file" id="uploader">
<p id="message" /> <p id="message"></p>
<script> <script>
const { createWorker } = FFmpeg; const { createWorker } = FFmpeg;
const worker = createWorker({ const worker = createWorker({

2
examples/browser/transcode.html
View File

@ -18,7 +18,7 @@
<h3>Upload a video to transcode to mp4 (x264) and play!</h3> <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls></video><br/> <video id="output-video" controls></video><br/>
<input type="file" id="uploader"> <input type="file" id="uploader">
<p id="message" /> <p id="message"></p>
<script> <script>
const { createWorker } = FFmpeg; const { createWorker } = FFmpeg;
const worker = createWorker({ const worker = createWorker({

75
examples/browser/webcam.html Normal file
View File

@ -0,0 +1,75 @@
<html>
<head>
<script src="/dist/ffmpeg.dev.js"></script>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<h3>Record video from webcam and transcode to mp4 (x264) and play!</h3>
<div>
<video id="webcam" width="320px" height="180px"></video>
<video id="output-video" width="320px" height="180px" controls></video>
</div>
<button id="record" disabled>Start Recording</button>
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
logger: ({ message }) => console.log(message),
});
const webcam = document.getElementById('webcam');
const recordBtn = document.getElementById('record');
const startRecording = () => {
const rec = new MediaRecorder(webcam.srcObject);
const chunks = [];
recordBtn.textContent = 'Stop Recording';
recordBtn.onclick = () => {
rec.stop();
recordBtn.textContent = 'Start Recording';
recordBtn.onclick = startRecording;
}
rec.ondataavailable = e => chunks.push(e.data);
rec.onstop = async () => {
transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));
};
rec.start();
};
(async () => {
webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
await webcam.play();
recordBtn.disabled = false;
recordBtn.onclick = startRecording;
})();
const transcode = async (webcamData) => {
const message = document.getElementById('message');
const name = 'record.webm';
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
message.innerHTML = 'Start transcoding';
await worker.write(name, webcamData);
await worker.transcode(name, 'output.mp4');
message.innerHTML = 'Complete transcoding';
const { data } = await worker.read('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
</script>
</body>
</html>