기록을 세우다.a. 영상 제1부분: 미디어 장치.getUserMedia()는 카메라 및 오디오 녹화용

우리는 최근에 record.a.video를 출시했다. 이것은 새로운 인터넷 응용 프로그램으로 브라우저에서 당신의 카메라와 화면을 직접 녹화할 수 있습니다!녹화가 완료되면 비디오를 api.video에 업로드하여 링크를 만들어 비디오를 쉽게 공유할 수 있습니다.
이 프로그램을 구축하는 과정에서 저는 웹 API에 대한 지식을 많이 배웠기 때문에 이 API를 어떻게 사용하는지, 그리고 그들이 어떻게 일을 하는지에 대한 세부 사항을 더 많이 쓸 것이라고 생각합니다.

본 논문에서 GetUserMedia API를 사용하여 사용자의 카메라와 마이크를 기록할 것입니다.

에서 나는 화면으로 API 녹화 화면을 포착하는 것에 대해 토론했다.

게시물 1과 게시물 2에서 만든 영상 흐름을 이용하여 나는 캔버스에 조합된 영상을 그렸다.

에서 저는 미디어Recorder API에 대해 토론할 것입니다. 여기서 저는 화보에서 영상 흐름을 만들어서 출력 영상을 만들 것입니다.이 출력 흐름은 영상 업로드(영상 팟캐스트 재생에 사용) 또는 실시간 흐름(실시간 및 실시간 재생에 사용)을 입력할 수 있다.

post 2에서 웹 음성 API에 대해 논의합니다.이 API는 오디오를 거의 실시간으로 텍스트로 변환하여 응용 프로그램에서 만든 모든 비디오에 대해 "인스턴트"자막을 만들 수 있습니다.이것은 크롬에서만 실행되는 실험적인 API였지만 매우 간결해서 나는 그것을 기록에 포함시켰다.a. 어차피 동영상이야.

우편 번호 미디어 장치.getUserMedia（）

우리 처음부터 기록합시다.a. 영상, 우리는 장비에서 카메라와 마이크의 입력을 잡아서 영상을 녹화한다.이 API를 사용하면 브라우저가 외부 미디어 장치와 상호 작용하고 해당 출력을 읽을 수 있습니다.
기록되어 있다.a. 비디오, 비디오와 오디오 입력을 열거하여 녹화 옵션으로 표시합니다.
post 4
촬영이 시작되면 선택한 카메라를 표시하고 선택한 마이크에서 녹화합니다.그럼, 이것은 어떻게 일합니까?

설비를 열거하다

이러한 장치를 호출하면 해당 장치에 대한 모든 세부 정보가 표시됩니다.

navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { console.log(device.kind + ": " + device.label +" id = " + device.deviceId); if(device.kind =="videoinput"){ //add a select to the camera dropdown list // var option = document.createElement("option"); 
console.log(device); 
deviceIds[counter] = (device.deviceId); 
deviceNames[counter]= (device.label); 
counter++; } }); 

콘솔 로그를 보면 모든 입력 및 출력 목록이 표시됩니다.

audioinput: Default - Blue Snowball (046d:0ab9) id = default audioinput: Blue Snowball (046d:0ab9) id = 693957e7a6c63d00cf9068338ec0108bfdfad2f108182bc988f7ed79430d5024 
audioinput: Logitech StreamCam (046d:0893) id = ec257829b4d910400bdff0fe8639e3e2c5b9bd761c1cd4454b8f272672e4d482 
audioinput: MacBook Pro Microphone (Built-in) id = be26a24fb1ca054193d51c80a6c875a091a285153959ddae8ab24f55c939bcd5 
audioinput: Iriun Webcam Audio (Virtual) id = 5e911d92f330fb9333fee989407c5c84c3b99af29046d8182e582545e772687f 
videoinput: Logitech StreamCam (046d:0893) id = 8d59c8e7bc02076c4230ba70125c03491020950b008769bd593bdb13e33c1ce7 
videoinput: FaceTime HD Camera (Built-in) (05ac:8514) id = e3fce20226c193876c5ff206407fd4815ad5b1e6329e67a8e82c9636d8e75c8d audiooutput: Default - External Headphones (Built-in) id = default audiooutput: U32J59x (DisplayPort) id = b342ee4661c78101936e50a2b5a3e5080d5ed748e031547e492c7ab0eeddd9df 
audiooutput: External Headphones (Built-in) id = 4a3980d8579a418193b1e8ff46771f204e87b2997b90d0d4e7e60a4acaae1235 
audiooutput: MacBook Pro Speakers (Built-in) id = b7045191ebec43d797348478004f25472c868bcae61ad04a7de73f70878e27b2 

여기에서 우리는 네, 저는 많은 오디오/영상 장치가 제 컴퓨터에 연결되어 있다는 것을 알게 되었습니다.(참고: 왜 Iriun 웹캠은 비디오가 아닌 오디오만 표시됩니까?)각 디바이스는 다음과 같습니다.

종류: 오디오 또는 영상,입력 또는 출력

라벨: 인류 소비의 텍스트 설명

deviceId: 장치를 고유하게 식별하는 임의 문자열.

DeviceId를 사용하여 브로드캐스트할 장치를 결정하지만 문서화하려고 합니다.a, 동영상, 표의 라벨을 사용합니다. 왜냐하면 이것은 우리 사용자에게 더 좋은 설명이기 때문입니다.

브로드캐스트 선택

사용자가 비디오 입력을 선택하면 해당 비디오를 요청할 수 있습니다.(같은 방법도 오디오에 적용되기 때문에 저는 여기서 영상만 설명합니다):

navigator.getUserMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.mozGetUserMedia || navigator.mediaDevices.msGetUserMedia || navigator.mediaDevices.webkitGetUserMedia); 

카메라를 요청할 때 요청에 제약조건을 적용하여 원하는 내용을 엄격히 수행할 수 있습니다. 예를 들어 다음과 같습니다.

cameraW=1280; 
cameraH=720; 
cameraFR=25; 
var camera1Options = { audio:false, 
video:{ deviceId: deviceIds[0], 
width: { min: 100, ideal: cameraW, max: 1920 }, 
height: { min: 100, ideal: cameraH, max: 1080 }, frameRate: {ideal: cameraFR} } }; 

여기서 저는 이상적인 영상을 1280x720으로 설정하지만 최소와 최대 파라미터의 차이를 고려합니다.이것은 만약 카메라가 1280x720을 제공할 수 없다면, 그것은 나에게 비슷한 크기를 주지만, 카메라의 사용 가능한 크기를 줄 것이다.
참고: 오디오를 false로 설정했습니다.이 프레젠테이션에서, 나는 동영상 라벨로 동영상을 화면에 적용했다.만약 브라우저가 카메라에서 온 오디오를 재생한다면, 마이크가 수신되고, 너는 나쁜 피드백 순환을 받게 될 것이다.나는 이런 것을 피하고 싶다.나는 동영상을 음소거할 수 있지만, 나는 다른 미디어 흐름을 오디오로 하고, 녹화할 때 (그것이 화면에 나타난 후) 이 곡을 나의 흐름에 응용하면 매우 멋있을 것이라고 생각한다.

흐름을 가져와 페이지에 놓기

나는 비디오 1 이라는 비디오 요소를 가지고 있다.여기에 getUserMedia 를 할당하여 표시합니다.

video1= document.getElementById("video1"); navigator.mediaDevices.getUserMedia(camera1Options).then(function(stream1){ video1.srcObject=stream1; 

이 전화를 걸면 브라우저가 사용자에게 카메라를 허용해 달라고 요청할 것이다.사용자가 공유 요청을 수락하면 브라우저는 카메라 요약을 가져와 비디오 1 요소에 적용합니다.


이게 다야!
getUserdevices API를 사용하면 카메라에서 브라우저로 비디오 원본을 끌어다 놓을 수 있는 코드 몇 줄만 있으면 됩니다.

만약 한 개의 카메라가 매우 좋다면 두 개는 어떻습니까?

대부분의 데스크탑에는 여러 개의 카메라가 없지만 대부분의 스마트폰은 있다.나는 한 장치에서 두 개의 카메라에서 영상을 추출하는 것이 매우 멋있을 것이라고 생각한다.
(부동산 로밍에서 주위의 환경과 그 자리에 있던 사람들의 얼굴을 볼 수 있다고 상상해 보세요.)그래서 프레젠테이션 프로그램을 만들었습니다. 에서 이 프로그램의 운행 상황을 볼 수 있습니다.
나는 기본적으로camera2와 비디오2로 위의camera1과 비디오1 코드를 반복하고 매거 조회 보고서의 앞의 두 개의 카메라를 사용한다.
내가 데스크톱에서 페이지를 테스트할 때, 나는 두 개의 카메라를 모두 흐르게 할 것이다. (이것은 너무 멋있다.)불행하게도 안드로이드와 iOS에서는 한 번에 하나의 카메라만 스트리밍을 재생할 수 있어 첫 번째 카메라가 시작하거나 포획할 때 정지 이미지를 포착하고 두 번째 카메라가 활성 상태가 되면 비활성 상태로 이동한다.(내 핸드폰에는 앞 카메라에 정지 영상이 있고 뒤 카메라에 계속 영상이 표시된다).
나는 이것이 배터리/CPU를 절약하는 설정이라고 생각한다. 왜냐하면 휴대전화 배터리에서 두 개의 카메라를 운행하면 곧 배터리가 다 소모되기 때문이다.

결론

미디어 장치.getUserMe4dia() API는 브라우저가 외부 카메라와 마이크를 사용하여 내용을 표시하고 녹화할 수 있도록 합니다.record.a.video/index1.html를 방문하여 실제 응용을 보시고 즉시 자신의 비디오 녹화 시스템 버전을 구축하세요!