HTML5 라이브 스트리밍
학교에서는 HTML5 라이브 스트림 사이트를 설정해야합니다. 그들은 플래시 스트림 플레이어를 사용했지만 이제는 HTML5를 대신 사용하기를 원합니다. 어떻게 할 수 있습니까? 비디오 태그를 사용해 보았지만 작동하지 않습니다. 아래는 내가 가지고있는 코드입니다. 누군가 나를 올바른 방향으로 가리킬 수 있습니까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Deltion Live Streaming</title>
<script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>
<body>
<video id="movie" width="460" height="306" preload autoplay>
<source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
</video>
</body>
</html>
이에 대한 가능한 대안 :
인코더 (예 : VLC 또는 FFmpeg)를 사용하여 입력 스트림을 OGG 형식으로 패킷 화합니다. 예를 들어,이 경우 VLC를 사용하여 다음 코드로 화면 캡처 장치를 패킷 화했습니다.
C : \ Program Files \ VideoLAN \ VLC \ vlc.exe -I 더미 화면 : // : screen-fps = 16.000000 : screen-caching = 100 : sout = # transcode {vcodec = theo, vb = 800, scale = 1, width = 600, height = 480, acodec = mp3} : http {mux = ogg, dst = 127.0.0.1 : 8080 / desktop.ogg} : no-sout-rtp-sap : no-sout-standard-sap : ttl = 1 : sout-keep
다음
<video>과 같이 HTML 페이지 의 태그 에이 코드를 삽입 합니다.<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />
이것은 트릭을 할 것입니다. 그러나 그것은 성능이 좋지 않으며 AFAIK MP4 컨테이너 유형은 OGG보다 브라우저간에 더 나은 지원을 가져야합니다.
지금은 일부 브라우저에서만 작동하며 내가 볼 수있는 한 실제로 파일에 연결되지 않았으므로 재생되지 않는 이유가 설명됩니다.
하지만 당신이 원하는 라이브 스트림 (내가 테스트하지 않은)
HTML5에서 RTSP 또는 RTP를 통한 스트리밍 확인
HTML5의 라이브 스트리밍은 MSE (Media Source Extensions)를 사용하여 가능합니다. 비교적 새로운 W3C 표준 : https://www.w3.org/TR/media-source/ MSE는 HTML5 <video>태그 의 확장입니다 . 웹 페이지의 자바 스크립트는 서버에서 오디오 / 비디오 세그먼트를 가져 와서 재생을 위해 MSE로 푸시 할 수 있습니다. 가져 오기 메커니즘은 HTTP 요청 (MPEG-DASH) 또는 WebSocket을 통해 수행 할 수 있습니다. 2016 년 9 월부터 모든 기기의 모든 주요 브라우저가 MSE를 지원합니다. iOS는 유일한 예외입니다.
높은 지연 시간 (5 초 이상) HTML5 라이브 비디오 스트리밍의 경우 video.js 또는 Wowza 스트리밍 엔진에 의한 MPEG-DASH 구현을 고려할 수 있습니다.
짧은 지연 시간, 거의 실시간 HTML5 라이브 비디오 스트리밍을 위해 EvoStream 미디어 서버, Unreal 미디어 서버 및 WebRTC를 살펴보십시오.
RTMP 프로토콜은 서버와 플래시 플레이어 사이에서만 사용되기 때문에 HTML 5에서는 RTMP 프로토콜을 사용할 수 없습니다 . 따라서 HTML 5에서 스트리밍 비디오를보기 위해 다른 스트리밍 프로토콜을 사용할 수 있습니다.
먼저 미디어 스트리밍 서버를 설정해야합니다. Wowza, red5 또는 nginx-rtmp-module을 사용할 수 있습니다 . 원하는 OS에서 설명서 및 설정을 읽으십시오. 모든 엔진은 HLS (Apple에서 개발 한 Http Live Stream 프로토콜)를 지원합니다. config에 대한 문서를 읽어야합니다. nginx-rtmp-module을 사용한 예 :
rtmp {
server {
listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application show {
live on;
# Turn on HLS
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
}
}
server {
listen 8080;
location /hls {
# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /mnt/;
}
}
서버 설정 및 구성 성공 후. youtube 또는 twitchtv와 같은 스트리밍을 시작하려면 일부 rtmp 인코더 소프트웨어 (OBS, wirecast ...)를 사용해야합니다.
In client side (browser in your case) you can use Videojs or JWplayer to play video for end user. You can do something like below for Videojs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Streaming</title>
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
</script>
</body>
</html>
You don't need to add others plugin like flash (because we use HLS not rtmp). This player can work well cross browser with out flash.
You can use a fantastic library name Videojs. You will find more useful informations here. But with quick start you can do something like this:
<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<video
id="Video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="none"
width="auto"
height="auto"
poster="poster.jpg"
data-setup='{"techOrder": ["flash", "html5", "other supported tech"], "nativeControlsForTouch": true, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'
>
<source src="rtmp://{domain_server}/{publisher}" type='rtmp/mp4'/>
</video>
<script>
var player = videojs('Video');
player.play();
</script>
Use ffmpeg + ffserver. It works!!! You can get a config file for ffserver from ffmpeg.org and accordingly set the values.
<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
height="285" id="mediaPlayer" standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" width="360" style="margin-bottom:30px;">
<param name="fileName" value="mms://my_IP_Address:my_port" />
<param name="animationatStart" value="true" />
<param name="transparentatStart" value="true" />
<param name="autoStart" value="true" />
<param name="showControls" value="true" />
<param name="loop" value="true" />
<embed autosize="-1" autostart="true" bgcolor="darkblue" designtimesp="5311" displaysize="4"
height="285" id="mediaPlayer" loop="true" name="mediaPlayer" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
showcontrols="true" showdisplay="0" showstatusbar="-1" showtracker="-1" src="mms://my_IP_Address:my_port"
type="application/x-mplayer2" videoborder3d="-1" width="360"></embed>
</object>
참고URL : https://stackoverflow.com/questions/5858936/html5-live-streaming
'Programing' 카테고리의 다른 글
| HTML에서 소수점 정렬 (0) | 2020.11.09 |
|---|---|
| 판매 통계는 iTunes Connect에서 얼마나 자주 업데이트됩니까? (0) | 2020.11.09 |
| 이론적으로 C ++ 구현이 두 함수 인수의 평가를 병렬화 할 수 있습니까? (0) | 2020.11.09 |
| Timely와 같은 아름답고 세련된 앱을 만드는 방법 (0) | 2020.11.09 |
| HTTP Put은 어떻게합니까? (0) | 2020.11.09 |