웹페이지의 버튼에서 AWS MediaLive 시작

9990 단어 MediaLive HTML 람다 APIGateway AWS

소개

라이브 전송에 사용되는 AWS MediaLive 시작 및 중지는
일반적으로 AWS 콘솔이나 CLI에서 작업하는 경우가 많습니다.

다만, 개발자 이외의 사람에게 조작 받는 경우는, 그렇다면 장애물이 높기 때문에,
Web 페이지에 배치한 버튼으로부터 기동・정지를 조작할 수 있는 구조를 생각해 보았습니다.

구성도

S3에 HTML을 배치하고 CloudFront에서 게재합니다.

웹 사용자는 HTML에 배치된 버튼을 누릅니다.
그러면 API가 실행되고 Lambda가 킥되어 MediaLive가 시작 및 중지되는 메커니즘이 됩니다.

MediaLive

이번, 조작 대상으로 하는 MediaLive 채널은, 1개로 합니다.

IAM

Lambda용 IAM Role을 만들어 둡니다.
필요한 정책은 다음과 같습니다.

AWSLambdaBasicExecutionRole

AWSElementalMediaLiveFullAccess

람다

런타임: Python3.8
환경 변수: 'channel_id'에서 MediaLive의 채널 ID를 설정합니다.

start 함수

※벌써 채널이 기동하고 있었을 경우, strat 처리를 실행하지 않게 하고 있습니다.

lambda_function.py

import boto3
import os

channelid = os.environ['channel_id']
medialive = boto3.client('medialive')

def lambda_handler(event, context):

    channels = medialive.describe_channel(ChannelId=channelid)

    if channels['State'] == 'RUNNING':
        ngmsg = ("チャンネルはすでに起動されています")
        return ngmsg
        pass

    else:
        medialive.start_channel(ChannelId=channelid)
        okmsg = ("チャンネルを起動しています")
        return okmsg

stop 함수

※start 함수와 같이, 이미 채널이 정지하고 있었을 경우, stop 처리를 실행하지 않게 하고 있습니다.

lambda_function.py

import boto3
import os

channelid = os.environ['channel_id']
medialive = boto3.client('medialive')

def lambda_handler(event, context):

    channels = medialive.describe_channel(ChannelId=channelid)

    if channels['State'] == 'IDLE':
        ngmsg = ("チャンネルはすでに停止されています")
        return ngmsg
        pass

    else:
        medialive.stop_channel(ChannelId=channelid)
        okmsg = ("チャンネルを停止しています")
        return okmsg

API 게이트웨이

1. API 만들기

2. 리소스 만들기 : 시작과 중지를 각각 만듭니다.

3. 메소드 생성 : POST, PUT 등

4. CORS 활성화

5. 메소드 응답 : 실행 결과가 일본어로 표시되도록 application/json;charset=UTF-8을 추가합니다.

6. API 배포

그러면 아래와 같은 URL이 발행됩니다.

(자세한 설정 방법은, 본 페이지 최하부의 참고문헌의 기사가 참고가 되었습니다)

HTML

그런 다음 HTML을 만듭니다.

HTML에 익숙하지 않고 더 잘 쓰는 방법이 있다고 생각하기 때문에,
참고 정도에 올려 둡니다.

url :은 이전 API 게이트웨이에서 게시 한 URL의 끝에
start나 stop의 자원명을 더한 URL을 기입합니다.

예:

url:"https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/start "

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <title>MediaLive操作Web</title>
</head>
<script>
  $(function(){
    // ボタンを押すと処理を開始する
    $("#btn1").on("click", function() {
    $.ajax({
        type: "POST",
        url: "https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/start",
        cache : false,
    })
        .done(function(result) {
            console.log(result);
    })
        .fail(function(result) {
            console.log(result);
    })
            console.log = function (log) {

        // API実行結果と実行日時を表示させる
        var date = new Date();
        document.getElementById('console_log1').innerHTML = log + "<br>" + "（"　+ date.toLocaleString() + "）" + "<br>";
        }
    })
})

   function stop(){
    // ボタンを押下すると確認ダイアログを表示する
    ret = confirm("本当にチャンネル停止してよろしいですか？");
    if (ret == true){
    $.ajax({
        type: "PUT",
        url: "https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/stop",
        cache : false,
    })
        .done(function(result) {
            console.log(result);
    })
        .fail(function(result) {
            console.log(result);
    })
            console.log = function (log) {

        // API実行結果と実行日時を表示させる
        var date = new Date();
        document.getElementById('console_log2').innerHTML = log + "<br>" + "（"　+ date.toLocaleString() + "）" + "<br>";
        }
    }
}
</script>
<button type="button" id="btn1" style="width:150px;height:50px">チャンネル起動</button>
<div id="console_log1" div class="disp-area" style="width:400px;height:50px;padding:15px;background-color: #f0f18b2c;"></div>
<br>
<button type="button" onClick="stop()" style="width:150px;height:50px">チャンネル停止</button>
<div id="console_log2" div class="disp-area" style="width:400px;height:50px;padding:15px;background-color: #f0f18b2c;"></div>
</html>