js 비디오 및 오디 오 수집
카메라 와 마이크 의 동 영상 흐름 과 오디 오 흐름 을 추출 해 내 고 싶 은 대로 할 수 있다 고 상상 할 수 있 을 까?아니면 제 canvas 패 널 의 내용 을 동 영상 으로 녹화 하고 싶 습 니 다.js 가 할 수 없 을 것 같은 일 들 은 모두 할 수 있 지만 호환성 이 좋 지 않 습 니 다.나 는 여기 서 모두 chrome 브 라 우 저 로 예 를 들 었 다.
여기에 사용 할 api 를 먼저 열거 합 니 다.
1.카메라 켜 기
// （ Promise ）
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
console.log(stream) //
}).catch(err => {
console.log(err) //
})영상
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video id="video" width="500" height="500" autoplay></video>
</body>
<script>
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// srcObject ，
video.srcObject = stream
}).catch(err => {
console.log(err) //
})
</script>
지금까지 우 리 는 우리 의 카 메 라 를 페이지 에 성공 적 으로 보 여 주 었 다.다음 단 계 는 동 영상 을 수집 하고 동 영상 파일 을 다운로드 하 는 방법 이다.
2.카메라 에서 영상 채집
미디어 레 코더 대상 을 사용 합 니 다:
새 MediaRecorder 대상 을 만 들 고 MediaStream 대상 을 되 돌려 녹화 작업 을 합 니 다.설정 항목 설정 용기 의 MIME type(예 를 들 어"video/webm"또는"video/mp4")또는 오디 오 인 코딩 비디오 인 코딩 을 지원 합 니 다.
MediaRecorder 는 두 개의 매개 변 수 를 수신 합 니 다.첫 번 째 는 stream 음 영상 흐름 이 고 두 번 째 는 option 설정 매개 변수 입 니 다.다음은 위 에 있 는 카메라 에서 얻 은 흐름 을 미디어 레 코더 에 넣 을 수 있 습 니 다.
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// srcObject ，
video.srcObject = stream
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000, //
videoBitsPerSecond : 100000, //
mimeType : 'video/webm;codecs=h264' //
})
}).catch(err => {
console.log(err) //
})MediaRecorder 는 다음 과 같은 방법 과 이 벤트 를 제공 합 니 다.
미디어 Recorder.start():미디어 녹 화 를 시작 합 니 다.이 방법 을 호출 할 때 timeslice 매개 변수 에 밀리초 값 을 설정 할 수 있 습 니 다.이 밀리초 값 을 설정 하면 녹 화 된 미디어 는 설정 한 값 에 따라 하나의 단독 블록 으로 나 눌 수 있 습 니 다.기본 적 인 방식 으로 매우 큰 전체 내용 을 녹음 하 는 것 이 아 닙 니 다
//
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// srcObject ，
video.srcObject = stream
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000, //
videoBitsPerSecond : 100000, //
mimeType : 'video/webm;codecs=h264' //
})
//
start.onclick = function () {
mediaRecorder.start()
console.log(' ')
}
//
stop.onclick = function () {
mediaRecorder.stop()
console.log(' ')
}
//
mediaRecorder.ondataavailable = function (e) {
console.log(e)
//
var blob = new Blob([e.data], { 'type' : 'video/mp4' })
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = `test.mp4`
a.click()
}
}).catch(err => {
console.log(err) //
})
위의 그림 은 채집 이 끝 난 후 ondataavailable 이벤트 가 되 돌아 오 는 데이터 중 Blob 대상 이 있 습 니 다.이것 이 바로 비디오 자원 입 니 다.그 다음 에 우 리 는 URL.createObject URL()방법 을 통 해 Blob 를 url 로 다운로드 할 수 있 습 니 다.동 영상 수집 은 다운로드 가 끝나 면 간단 하고 난폭 하 다.
위 는 영상 채집 다운로드 의 예 로 오디 오 채집 만 하면 같은 이치 로'mime Type'을 설정 하면 된다.여 기 는 예 를 들 지 않 겠 습 니 다.다음은 canvas 를 비디오 파일 로 녹화 하 는 것 을 소개 하 겠 습 니 다.
2.canvas 출력 영상 흐름
capture Stream 방법 을 사용 하여 canvas 출력 흐름 을 video 로 보 여 주거 나 MediaRecorder 로 자원 을 수집 하 는 것 도 가능 합 니 다.
// 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
<video id="video" width="500" height="500" autoplay></video>
</body>
<script>
var video = document.getElementById('video')
var canvas = document.getElementById('canvas')
var stream = $canvas.captureStream(); // canvas
// ， 。
</script>아래 의 효 과 를 실현 하 시 기 를 바 랍 니 다.사실은 canvas 영상 에 배경 음악 을 삽입 할 수 있 습 니 다.이런 것들 은 비교적 간단 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
