동영상 액세스 용이성

모든 사람을 위해 네트워크를 구축하는 유일한 방법은 관련 미디어(오디오, 이미지, 동영상)를 포함하여 가능한 한 모든 관중이 접근할 수 있도록 하는 것이다.
시각 매체는 정보를 전달하는 데 도움이 된다.이미지는 이미지 형식으로 정보를 전달한다.동영상은 이 점을 새로운 높이로 끌어올렸다.특히 간결한 영상은 주의를 끌고 이야기를 효과적으로 할 수 있다.
그러나 영상은 시각장애인 사용자 부분과만 관련이 있다.농아와 귀머거리도 마찬가지다. 그들은 내용의 절반만 흡수할 수 있을 뿐 내용과 다른 언어를 말하는 사람은 말할 것도 없다.
그림을 접근할 수 있는 해결 방안은 <alt> 텍스트를 추가하는 것이지만 audio in videos 텍스트는?자막과 성적표를 추가할 수 있다. 이 자막과 성적표도 그 사람들에게 환영을 받는다. 예를 들어 잠든 배우자 옆에서 동영상을 보는 사람이나 아이를 깨우고 싶지 않은 사람이다.
Cloudinary를 사용하면 청력이나 시각이 어려운 사람이 영상과 오디오에 참여할 수 있습니다.이 강좌는 당신에게 어떻게 사용하는지 보여 줄 것입니다.

선결 조건 을 얻다

이 자습서의 단계를 따르려면 다음이 필요합니다.

자바스크립트의 기초 지식을 습득한다.

노드에 대한 숙련도.js 및 Cloudinary

일종의 능력to integrate Cloudinary into Node.js apps.

클라우드 컴퓨팅 계좌.Sign up 무료 계좌가 없으면.

개시하다

우선 유튜브에서 온 영상 같은 영상을 올리겠습니다.다음 단계를 따르십시오.

비디오를 컴퓨터에 다운로드합니다.

미디어를 백엔드에 업로드할 수 있도록 기본 전단과 백엔드를 가진 프로젝트를 만듭니다. 예를 들어 노드에 업로드합니다.js 서버와 Multer.

참고: 업로드된 비디오의 사본을 저장하지 않으려면 [Cloudinary upload widgethttps://cloudinary.com/documentation/upload_widget]을 사용하여 Cloudinary에 업로드하십시오.
백엔드에는 다음과 같은 Cloudinary 구성 및 API 라우트가 있습니다.

const multer = require('multer')
const express = require('express')
const cors = require('cors')
const cloudinary = require('cloudinary').v2

require('dotenv').config()
const upload = multer({ dest: 'uploads/' })

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
})

const app = express()

app.use(cors())

app.use(express.json())
app.post('/video/upload', upload.single('video'), uploadVideo)

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video1',
      resource_type: 'video'
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

의존항을 설치하고 정확한 환경 변수를 .env 파일에 저장합니다.
변수CLOUD_NAME, API_KEY 및 API_SECRET를 계정 대시보드의 값으로 바꿉니다.

프런트에서 file input를 사용하여 비디오를 Cloudinary로 보냅니다.

비디오 액세스 향상

Cloudinary는 동영상의 탭과 자막을 포함한 자원의 메타데이터를 지원합니다.Cloudinary에서 통합 자막이 있는 동영상을 얻을 수 있습니다. 자막은 기존의 텍스트 기록에서 나와야 합니다.이것은 미디어 플레이어에서 동영상을 볼 때 반드시 플레이어에 자막을 표시해야 하는 위치와 유사하다.
라벨과 자막을 수동으로 생성하면 지루할 수 있습니다.보다 효과적인 대체 방법은 Cloudinary를 통해 다음 두 단계에서 생성되는 것입니다.

청력에 장애가 있거나 영상 언어에 익숙하지 않은 사람들의 요구를 충족시키기 위해 다양한 언어로 성적표를 작성한다.

시각장애인을 위해 영상과 화면 판독기의 관련성을 확인하는 라벨을 생성하고 표시한다.

구글 인공지능 영상 중계 플러그인 활용

CloudinaryGoogle AI Video Transcription add-on는 구글의 음성과 텍스트 API를 결합하여 자동으로 영상 기록을 생성한다.따라서 Cloudinary API를 사용하여 비디오를 업로드하거나 업데이트할 때 비디오와 동일한 폴더에 성적표를 작성할 수 있습니다.
다음 단계는 다음과 같습니다.

Activate the add-on for your account . 공짜 계획이 있어요.

Cloudinaryupload 방법에 Upload API reference의 옵션을 추가raw_convert합니다.raw_convert 업로드된 파일을 기반으로 비동기적으로 파일을 생성합니다.

이 파일이 생기자 구글은 올린 동영상을 위해google_speech값의 성적표를 만들었다.다음은 메서드입니다.

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video2',
      resource_type: 'video',
      raw_convert: 'google_speech'
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

주의: videos의video2/public_id값은 자막이 있는 영상을 표시한다.필요에 따라 값을 할당하고 나중에 사용할 수 있도록 기록해 두십시오.

프런트엔드로 돌아가 동일한 비디오를 업로드합니다.

Cloudinary를 사용하여 계정의 미디어 라이브러리에 다른 파일을 생성합니다.
video2.transcript 파일은 코드 편집기에서 다음과 같이 읽습니다.

위의 JSON 구조에 따르면'하루에 24시간만 있다면 성공은 24시간을 어떻게 사용하느냐에 달려 있다'는 줄이 영상에서 0.1에서 7.3초 사이에 나타난다.
다음을 생성할 수도 있습니다.
SubRip(SRT) 및 VITec(VTT) 같은 기타 표준 자막 형식은 다른 미디어 플레이어에서 지원됩니다.
다른 언어의 문자 기록은 더 많은 관중들이 동영상의 오디오에 접근할 수 있게 할 것이다.예를 들어, 프랑스어에는 다음과 같은 값raw_convert이 있습니다.

...
  raw_convert: 'google_speech:fr:BE'
...

이 코드는 프랑스어 번역이 있는 .transcript 파일을 생성합니다.fr:BE는 언어와 지역을 나타내는데 본 예는 벨기에 프랑스어이다.구글은 다양한 언어와 사투리를 지원한다.

비디오에 텍스트 트랙 추가

그런 다음 필요에 따라 비디오를 비디오로 변환하여 자막을 추가합니다.이를 위해 백엔드에서 업로드된 비디오에 라우트를 추가하면 생성된 .transcript 파일이 변환됩니다.

app.get('/video', getVideo)

function getVideo(req, res) {
  try {
    cloudinary.api.resource('videos/video2', {}, (err, result) => {
      const video = cloudinary.video('videos/video2', {
        resource_type: 'video',
        type: 'upload',
        transformation: [
          {
            overlay: {
              resource_type: 'subtitles',
              public_id: 'videos/video2.transcript',
            },
          },
          { flags: 'layer_apply' },
        ],
      })
      res.json({
        ...result,
        videoElem: video.replace(/poster=/, 'controls poster='),
      })
    })
  } catch (err) {
    console.log({ err })
  }
}

다음은 몇 가지 설명입니다.transformation 속성에 subtitles 자원 형식의 덮어쓰기를 추가하고 이 파일을 복사하는 경로를 지정했습니다.cloudinary.video() 메서드의 반환 값은 다음 형식을 사용합니다.

<video poster='http://res.cloudinary.com/dillionmegida/video/upload/l_subtitles:videos:motivational-video.transcript/fl_layer_apply/v1/videos/motivational-video.jpg'>
  <source src='http://res.cloudinary.com/dillionmegida/video/upload/l_subtitles:videos:motivational-video.transcript/fl_layer_apply/v1/videos/motivational-video.webm' type='video/webm'>
  <source src='http://res.cloudinary.com/dillionmegida/video/upload/l_subtitles:videos:motivational-video.transcript/fl_layer_apply/v1/videos/motivational-video.mp4' type='video/mp4'>
  <source src='http://res.cloudinary.com/dillionmegida/video/upload/l_subtitles:videos:motivational-video.transcript/fl_layer_apply/v1/videos/motivational-video.ogv' type='video/ogg'>
</video>

poster=를 문자열controls poster=로 바꾸고 controls 속성을 video 요소에 추가했습니다. 다음과 같습니다.

맨 위에 있는 Get Video 버튼이 백엔드get에 요청하여 video 요소를 가져와 사용자 인터페이스에 표시합니다.
이제 동영상에 쉽게 액세스할 수 있고 캡션이 제공됩니다.텍스트에 다른 언어를 지정하면 자막에서 해당 언어를 사용합니다.

구글의 자동 영상 라벨 기능을 이용하다

리소스를 분류하거나 그룹으로 나누는 것 외에 클라우드는 시청자들이 동영상을 보기 전에 동영상의 유형이나 관련 라벨을 보여준다.이 정보들은 시력이 나쁜 사람들을 크게 도왔다.
비디오에 수동으로 태그를 추가하려면 다음과 같이 하십시오.

비디오 관리 버튼을 클릭한 다음 메타데이터 탭을 클릭합니다

.

입력 레이블:

이런 수공 과정은 평범할 뿐만 아니라 시간도 소모된다.구글의 자동 영상 라벨 기능으로 자동화.다음 순서에 따라 조작하다.

구글 동영상 탭 플러그인 활성화.공짜 계획이 있어요.

백엔드 기능 업데이트uploadVideo:

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video3',
      resource_type: 'video',
      raw_convert: 'google_speech',
      categorization: 'google_video_tagging',
      auto_tagging: 0.7,
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

categorization 속성 설정은 자동으로 비디오 태그를 생성하는 추가 구성 요소를 설정합니다.auto_tagging 속성에 지정한 신뢰 수준은 라벨과 자원에 대한 보증 정도를 나타냅니다.auto_tagging 지정한 값보다 신뢰도가 높은 라벨만 수락합니다.신뢰수준1은 특정한 키워드를 만들어 내지만 소수에 불과하다.위의 코드에서 0.7단계는 관련 표기와 충분한 표기 사이의 절충이다.
마운트 항목이 비동기적으로 표시를 생성하기 때문에, 표시하는 데 시간이 걸릴 수 있습니다.

나중에 화면을 새로 고치면 다음 결과가 표시됩니다.

영상의 상하문에 따라 생성된 라벨은 특정한 관람자에게 의미가 있을 수도 있고 의미가 없을 수도 있다.그럼에도 불구하고 라벨은 항상 영상의 이미지를 묘사한다. 예를 들어'자동차'와'환경'등이다.

비디오 관련 태그 표시

이제 백엔드의 getVideo 함수를 다음과 같이 업데이트하여 Cloudinary에서 비디오를 가져옵니다.

...
    cloudinary.api.resource('videos/video3', {}, (err, result) => {
...

브라우저의 네트워크 탭(또는 Postman 또는 API 클라이언트)은 다음과 같습니다.

다음과 같은 방법으로 비디오 태그를 표시할 수 있습니다.

이러한 태그는 정확하지 않을 수 있으므로 대시보드에서 수동으로 편집하거나 다른 태그를 추가할 수 있습니다.예를 들어 이 동영상에 대해 라벨'격려 어록'을 추가할 수 있습니다.

구글 번역 플러그인으로 번역 추가

방금 생성한 탭은 영어를 하는 시청자만 방문할 수 있습니다.구글 번역 플러그인이 있으면 이미지를 올릴 때 사용하거나 동영상과 함께 자동으로 표시할 수 있으며 번역을 추가할 수 있다.
다음 단계를 따르십시오.

마운트 활성화 및 무료 계획 선택:

업데이트uploadVideo 기능은 구글 번역 플러그인과 구글 영상 자동 표기 기능을 결합하여 사용한다.

function uploadVideo(req, res) {
  cloudinary.uploader.upload(
    req.file.path,
    {
      public_id: 'videos/video4',
      resource_type: 'video',
      raw_convert: 'google_speech',
      categorization: 'google_video_tagging:en:fr',
      auto_tagging: 0.7,
    },
    () => {
      res.json({ message: 'Successfully uploaded video' })
    }
  )
}

:en:fr 속성의 접미사categorization는 로드 항목에 태그를 생성하여 영어와 프랑스어로 저장하고 Cloudinary 대시보드에 표시하는 방법을 알려줍니다.

API를 통해 리소스 세부 정보를 보면 다음과 같은 결과를 얻을 수 있습니다.

외부 프로그램의 데이터는 이 흐름의 속성으로 채워집니다info속성:
분류하다→ 구글 비디오 태그→ 데이터
여기에 생성된 표기수 그룹은 tag 대상을 포함하고 이 대상은 en(영어 번역용)과 fr(프랑스어 번역용) 속성을 가지고 있다.
마지막으로, 이 추가 구성 요소를 사용하면 뷰어의 위치나 언어와 일치하는 태그를 표시할 수 있습니다.

총결산

모든 사람, 특히 당신의 목표 시청자들이 미디어를 포함하는 인터넷 애플리케이션에 접근할 수 있다는 점은 매우 중요하다.
이제 Cloudinary의 추가 구성 요소를 어떻게 사용하는지 알고 있습니다. 자막을 추가하고 관련 라벨을 자동으로 생성하고 표시함으로써 동영상의 접근성을 높일 수 있습니다. 이 모든 것은 필요에 따라 다양한 언어를 사용할 수 있습니다.
이후 당신의 영상은 청력이나 시력 장애자, 다른 언어를 하는 사람, 심지어 음소거 상태에서 영상을 보는 것을 좋아하는 사람들을 포함하여 더욱 광범위한 관중을 접할 수 있다.
Cloudinary는 또 다른 강력하고 효과적인 추가 구성 요소를 많이 제공합니다.꼭 봐야 돼.