search

DayBySay / firebase-misc

0 stars 0 forks source link

HLSのお勉強 #1

Open DayBySay opened 6 years ago

DayBySay commented 6 years ago

TODO:

must

should

資料

DayBySay commented 6 years ago

資料: https://developer.apple.com/streaming/

DayBySay commented 6 years ago

特徴:

ざっくり:

DayBySay commented 6 years ago

ちなみにAppleが HLS テスト用の環境を用意してくれてる（オンデマンド配信） https://developer.apple.com/streaming/examples/

DayBySay commented 6 years ago

↑のHTML部の実装

<div>
<video src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8" controls autoplay width="960" height="540"></video>
</div>

こんだけ

DayBySay commented 6 years ago

通ってる

➜  firebase-misc git:(master) ruby validate-hls/validate-hls.rb "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8"

validate-hls

Validating: Set of 1 URL(s)
| Validating: Playlist(https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8)
| | ✔ Downloadable with 200 OK
| | Validating: Playlist(https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/v5/prog_index.m3u8)
| | | ✔ Downloadable with 200 OK
| | | Validating: Fragment(https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/v5/fileSequence0.ts)
| | | | ✔ Downloadable with 200 OK
| | | | ✔ Keyframe is first frame
| | | Validating: Fragment(https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/v5/fileSequence1.ts)
| | | | ✔ Downloadable with 200 OK
| | | | ✔ Keyframe is first frame
| | | Validating: Fragment(https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/v5/fileSequence2.ts)
...
DayBySay commented 6 years ago

次はクライアントアプリの勉強。 Apple公式のサンプルを見てみる。

https://developer.apple.com/library/content/samplecode/AVFoundationQueuePlayer-iOS/Introduction/Intro.html

DayBySay commented 6 years ago

このサンプルエラー吐いとる・・

2018-05-20 11:33:47.131200+0900 AVFoundationQueuePlayer-Swift[57302:822679] Error occurred with message: Optional("Media \"Progressive Download\" failed to load key \"playable\""), error: Optional(Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSUnderlyingError=0x604000440150 {Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSURLErrorFailingURLPeerTrustErrorKey=<SecTrustRef: 0x60800011c950>, NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9802, NSErrorPeerCertificateChainKey=(
    "<cert(0x7f83c705bc00) s: *.test.edgekey.net i: DigiCert SHA2 Secure Server CA>",
    "<cert(0x7f83c705c600) s: DigiCert SHA2 Secure Server CA i: DigiCert Global Root CA>"
), NSUnderlyingError=0x6040004400c0 {Error Domain=kCFErrorDomainCFNetwork Code=-1200 "(null)" UserInfo={_kCFStreamPropertySSLClientCertificateState=0, kCFStreamPropertySSLPeerTrust=<SecTr
DayBySay commented 6 years ago

動作確認したいだけなので下記対応した

DayBySay commented 6 years ago

ちとごちゃついてるけど、この辺で再生するための動画を渡しているっぽい

                let newPlayerItem = AVPlayerItem(asset: loadedAsset)

                self.player.insert(newPlayerItem, after: nil)
DayBySay commented 6 years ago

この実装でいけた

//
//  ViewController.swift
//  Study-HTTPLiveStreaming
//
//  Created by 清 貴幸 on 2018/05/20.
//  Copyright © 2018年 daybysay. All rights reserved.
//

import UIKit
import AVFoundation

class ViewController: UIViewController {
    @IBOutlet weak var playerView: PlayerView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let item = AVPlayerItem(url: URL(string: "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8")!)
        let player = AVPlayer(playerItem: item)

        playerView.playerLayer.player = player
        player.play()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

class PlayerView: UIView {
    var player: AVPlayer? {
        get {
            return playerLayer.player
        }

        set {
            playerLayer.player = newValue
        }
    }

    var playerLayer: AVPlayerLayer {
        return layer as! AVPlayerLayer
    }

    override class var layerClass: AnyClass {
        return AVPlayerLayer.self
    }
}
DayBySay commented 6 years ago

他所様のHLS配信を覗いてみようのコーナー

仕様ツール

なるほど

2018-05-20 12:10:34 GET https://edge-210-140-227-42.showroom-live.com/liveedge/b6f466163e7540bf9717f233f693ffa2f08968bb7ec23c351405d0981ab22415_low/chunklist_w1070664597.m3u8
                        ← 200 OK application/vnd.apple.mpegurl 177b 46ms
                                    Request                                                                       Response                                                                        Detail
Accept-Ranges:                  bytes
Access-Control-Expose-Headers:  Content-Length
Server:                         WowzaStreamingEngine/4.2.0
Cache-Control:                  no-cache
Access-Control-Allow-Origin:    https://www.showroom-live.com
Access-Control-Allow-Methods:   GET, POST, OPTIONS
Access-Control-Allow-Headers:   Range
Date:                           Sun, 20 May 2018 03:10:37 GMT
Content-Type:                   application/vnd.apple.mpegurl
Content-Length:                 177
Raw                                                                                                                                                                                                                                 [m:auto]
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:735
#EXTINF:2.002,
media_w1070664597_735.ts
#EXTINF:2.002,
media_w1070664597_736.ts
DayBySay commented 6 years ago

2秒に1回くらい？更新しているっぽい

2018-05-20 12:10:37 GET https://edge-210-140-227-42.showroom-live.com/liveedge/b6f466163e7540bf9717f233f693ffa2f08968bb7ec23c351405d0981ab22415_low/chunklist_w1070664597.m3u8
                        ← 200 OK application/vnd.apple.mpegurl 177b 90ms
                                    Request                                                                       Response                                                                        Detail
Accept-Ranges:                  bytes
Access-Control-Expose-Headers:  Content-Length
Server:                         WowzaStreamingEngine/4.2.0
Cache-Control:                  no-cache
Access-Control-Allow-Origin:    https://www.showroom-live.com
Access-Control-Allow-Methods:   GET, POST, OPTIONS
Access-Control-Allow-Headers:   Range
Date:                           Sun, 20 May 2018 03:10:39 GMT
Content-Type:                   application/vnd.apple.mpegurl
Content-Length:                 177
Raw                                                                                                                                                                                                                                 [m:auto]
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:736
#EXTINF:2.002,
media_w1070664597_736.ts
#EXTINF:2.002,
media_w1070664597_737.ts
DayBySay commented 6 years ago

これどんなクライアントからも見れてしまうのだろうか？と思って試した所、私の手元のクライアントから見ることができました。

image

実装

        let item = AVPlayerItem(url: URL(string: "https://edge-210-140-227-42.showroom-live.com/liveedge/b6f466163e7540bf9717f233f693ffa2f08968bb7ec23c351405d0981ab22415_low/playlist.m3u8")!)
DayBySay commented 6 years ago

これ、VRChatにHLS対応のスクリーンを作れば、東雲めぐちゃんの配信をVRChat内で見られる可能性

DayBySay commented 6 years ago

視聴側の雰囲気はわかってきたので、次は配信

DayBySay commented 6 years ago

FFMpegでできそう

https://trac.ffmpeg.org/wiki/Capture/Webcam

DayBySay commented 6 years ago

見ている https://stackoverflow.com/questions/37960828/webcam-streaming-from-mac-using-ffmpeg http://ffmpeg.org/ffmpeg.html#Synopsis

DayBySay commented 6 years ago

ffmpegでwebcamのビデオをエンコードでしてmediastreamsegmenterに渡せるかなーというのを試している

DayBySay commented 6 years ago

それっっぽい https://stackoverflow.com/questions/16469704/mediastreamsegmenter-stops-sending-id3-metadata-using-hls

DayBySay commented 6 years ago

https://www.ffmpeg.org/ffmpeg-formats.html

DayBySay commented 6 years ago

ローカルでサーバをたてて、MacのCameraから取得した映像をHLS形式で配信してiOS Simulatorで見ている所 image

DayBySay commented 6 years ago

Macのサファリからみているところ image