2 분 동안 Vue 실시 간 생방송 시스템 의 예제 코드 를 실현 합 니 다.
우 리 는 코드 를 두 드 리 지 않 을 때 게임 생방송 을 보 러 갈 수 있 습 니 다.그러면 프론트 데스크 는 어떻게 이 루어 졌 습 니까?다음은 우리 가 말 해 보 자.
첫 번 째,클 라 우 드 생방송 서비스 구 매
우선,당신 은 아 리 운 이나 텐 센트 클 라 우 드 에 가서 생방송 서 비 스 를 등록 해 야 합 니 다.돈 도 얼마 안 들 고 연습 하면 몇 십 원 이면 충분 하 다.
여기 서 나 는 아 리 클 라 우 드 를 예 로 들 어 구 매 를 마 쳤 습 니 다.푸 시 도 메 인 이름과 방송 도 메 인 이름 을 설정 하고 다음 에 우 리 는 주소 생 성 을 진행 할 것 입 니 다.아래 에 생 성 된 주 소 를 기억 하 세 요.아래 에 사용 할 것 입 니 다.
두 번 째 단 계 는 로 컬 스 트림 도 구 를 다운로드 합 니 다.
https://obsproject.com/
세 번 째,OBS 설정
첫 번 째 단계 에서 그림 밑 에 푸 시 주소 가 있 으 므 로 주의해 야 합 니 다.두 부분 으로 나 누 어 아래 그림 에 기입 해 야 합 니 다.
AppName 필드 에서 경계선 을 두 부분 으로 나 눕 니 다.입력 이 완료 되 었 습 니 다.확인 을 누 르 면 됩 니 다.
4 단계,푸 시 오픈
OBS 오른쪽 에 푸 시 도구 가 있 습 니 다.처음 누 르 면 검은색 화면 이 느껴 집 니 다.그것 은 당신 이 없 는 것 입 니 다.
생방송 화면 을 선택 하고 소스 옵션 에서 플러스 번 호 를 누 르 고 해당 소스 를 선택 합 니 다.저 는 모니터 캡 처 를 선택 합 니 다.
다섯 번 째,코드 쓰기
hls.js 설치
npm i hls.js -S
npm i dplayer -S
<!-- -->
<template>
<div class="center">
<div class="live">
<div id="dplayer"></div>
</div>
</div>
</template>
<script>
/*
m3u8 ， ，dplayer 。
*/
let Hls = require('hls.js');
import DPlayer from 'dplayer';
export default {
name: "Live",
methods: {
//
live(){
const dp = new DPlayer({
live:true,
container: document.getElementById('dplayer'),
video: {
url: 'https://live.carvedu.com/a/b.m3u8?auth_key=1589281526-0-0-02d0913b6a725efdb53f0deed823e418', //
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
}
},
mounted() {
this.live();
},
};
</script>
<style scoped>
#dplayer{
width: 100%;
height: 500px;
}
</style>다음은 효과 그림:
2 분 동안 하나의 Vue 실시 간 방송 시스템 을 실현 하 는 예시 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 실시 간 방송 시스템 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
