AngularアプリをS3でホスティングするとこけた話

前回までのあらすじ

https://qiita.com/NoOne/items/51383d096b6a4760b2dd

HTMLvideoが使えない!

こちらの記事の通りにS3へホスティングするもnavigator.mediaDevicesでビデオが起動しないエラー。 https://qiita.com/BBA/items/4de0132e63a371da4626

調べたところ記事の内容でS3へのホスティングはできてはいるのですが、SSL化されていない(http)とvideoデバイスへのアクセスができないとのことです。

app.component.ts

import { Component } from '@angular/core';
import { ImgService } from './img.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  { 
  constructor(private service: ImgService) { }
  private video: any;
  result: String = ""; 

  ngOnInit(): void {
    this.video = document.querySelector('video')!;

    const options = {
      video: true
    }
    //ここが怒られてしまう
    navigator.mediaDevices.getUserMedia(options)
    .then(stream => {
      this.video.srcObject = stream;
    })
    .catch((error) =>{
      console.log(error);
    })
  }

  captureImg(){
    let canvas = document.getElementById('canvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    context?.drawImage(this.video, 0, 0, canvas.width, canvas.height);
    let base64CapturedImg : ConstrainDOMString = canvas.toDataURL("image/png");
    this.service.transferImg(base64CapturedImg).subscribe(
      data => this.result = data,
      error => console.log(error)
    );
  ;
  }
}

CloudFrontでドメインをSSL化

以下の手順でDistributionを設定し作成すると無事SSL化でき、ビデオもアクセス可能になりました。

①S3にデプロイして取得したドメイン名を選択


---

②Viewer Protocol PolicyをRedirect HTTP to HTTPSに


---

③Default Root ObjectにS3で指定したインデックスドキュメントと同じように記述(デフォルトはindex.html)


感想など

S3にホスティングだけでこけるとは思いませんでしたが、カメラ等デバイスにアクセスするにはSSL化が必要というのは今後またどこかで役立ちそうな知識でよかったです。Springの方も確実にホスティングこけますが頑張ります。