RTMP 스트리밍(Docker Desktop)
페이지 정보
작성자
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
에필로그
댓글 6건
조회 48,032회
작성일 20-04-02 19:27
본문
RTMP는 아직 유용하게 쓸 수 있다.
사용하고 있는 윈도우 컴퓨터에서 실시간 방송을 송출하고 웹으로 시청하게 한다.
컴퓨터/OBS/RTMP <-------- HTTP
먼저 컴퓨터에 도커를 설치한다.
docker pull alfg/nginx-rtmp
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
댓글목록
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
HLS 사용
<script src="/hlsjs스크립트경로/hls.js"></script>
<video id="video" width="640" autoplay controls></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
모바일에서 이용
<script src="/hlsjs/hls.js"></script>
<video id="video" width="100%" autoplay controls></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if(video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
그냥 video 태그 사용
<video width="100%" controls autoplay data-setup='{}'>
<source src="http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8" type="application/x-mpegURL">
</video>
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
JWPlayer 사용시, 주석을 지우면 플래시로 스트리밍
<script src="JW플레이어경로/jwplayer.js"></script>
<script>jwplayer.key='JW플레이어키';</script>
<div id="player"></div>
<script>
jwplayer('player').setup({
width: "100%",
height: "360",
//primary: "flash",
autostart: "true",
androidhls: "true",
aspectratio: "16:9",
sources:[
//{file: "rtmp://컴퓨터가사용하는공인아이피/stream/스트림키"},
{file: "http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8"}
]
});
</script>
<div>
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
video-js 사용시
<link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.5/video.js"></script>
<div class="video-js-box">
<video id="vod" class="video-js vjs-default-skin"></video>
<script type="text/javascript" charset="utf-8">
var myPlayer =videojs("vod",
{"controls":true,
"autoplay":true,
"preload":"auto",
"poster":"",
"loop":"false",
"width":640,
"height":360
});
myPlayer.requestFullScreen();
videojs("vod").ready(function(){
myPlayer.src({ type: "video/mp4", src: "http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8" });
});
var onPlay = function(){
console.info("on Play");
};
myPlayer.on("play",onPlay);
</script>
상석하대님의 댓글
상석하대
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
video-js로 플래시 또는 HLS 재생
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360"
data-setup='{}'>
<source src="rtmp://컴퓨터가사용하는공인아이피/live/스트림키" type="rtmp/flv">
</video>
<video id="my_video_2" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360"
data-setup='{}'>
<source src="http://컴퓨터가사용하는공인아이피:8080/live/스트림키.m3u8" type="application/x-mpegURL">
</video>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</body>
</html>