Help us understand the problem. What is going on with this article?

コンビニで買った育てるサラダをrasPiで撮ってKinesisに流してゴニョゴニョする 後編

More than 1 year has passed since last update.

さて、都合により後編が3つに分かれてしまいましたがいよいよこれで最後となります。

コンビニで買った育てるサラダをrasPiで撮ってKinesisに流してゴニョゴニョする 前編
中編
後の前編
後の中編

これまでのあらすじ

前編

使ってなかったラズパイを引っ張り出してきてみて、kinesis video stream設定して、c++のsdkを落としてきてビルドしてみるとこまで

中編

kinesis vieo streamのプロデューサーSDKを使ってkinesis video streamにラズパイから動画を流す所まで。・・を試行錯誤しながら。

後の前~中編

フロントエンド部分。cognito設定して、vuejsのプロジェクト作って、lambda関数とapi gatewayを設定して、s3やcroudfrontも使う。cognite <-> api gateway <-> lambdaのあたりでけっこう時間を取られたが、kinesis video streamのエンドポイントが取得できるとこまではできた。

そんなわけで後編

あとは、kvs(kinesis vieo stream)のエンドポイントからURLを取らなくちゃいけなかったっぽいのでそれをやるのと、取得したURLをフロントでvideoJs使って流すだけ。再生と停止ぐらいができればそれでいい。何気にSPAです。(←ただ機能が少ないだけ)

まずはkvsのhlsストリーミング用のURL

難しい事は特にない。lambda関数に少し追記して返却値をストリーミング用のURLにします。
使うのはこれ
https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/kinesis-video-archived-media.html#KinesisVideoArchivedMedia.Client.get_hls_streaming_session_url

Python:app.py
        kvam = boto3.client('kinesis-video-archived-media',endpoint_url=endpoint.get('DataEndpoint'))
        url = kvam.get_hls_streaming_session_url(
            StreamARN=streamarn,
            PlaybackMode="LIVE"
        )

こんな感じでURL取れた。あとは再生するだけ。

あとは再生するだけ

こんな感じでやりたい

[小ネタ] Video.jsのvideojs-contrib-hlsを使ってHLS形式のライブ配信を再生する最低限度の設定

でもvue.jsで動かすのでちょっと変更がいる
このあたりをインスパイアさせていただく。
https://github.com/savokiss/vue-videojs-demo/tree/master/src

$ npm install --save video.js
$ npm install --save videojs-contrib-hls.js

で、だいたいできたかなってあたりでVIDEOJSに VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.っていわれる。対応してない系?

確かにこのページにURLぶっこんでみてもダメだ。
http://savokiss.me/vue-videojs-demo/#/

で、試しにCDNのjsをダイレクトで使ってみると再生できた。
使ってみたcdn( https://vjs.zencdn.net/6.6.3/video.js ) のは6.6.3で、npmだと7.3.1とかになる。むしろnpmの方が新しい。
videojs-contrib-hlsの方はというとnpmだと3.2.0、cndの方は5.14.1でnpmが古い。

あ、なんだ。こっちにすればいいのか。

$ npm install --save videojs-contrib-hls

こっちにするとver5.15.1になって無事再生されました。video.jsの方はvideojsっていうパッケージがあったけどこっちはver1.0.0だった。みたら This is not the official video.js package. Please use video.js. って書いてあったけど。

なんにせよ、いけました!

21.png

サラダ、ぼちぼち育ってます。
画質は悪いし、ラズパイはたまに固まりますけどね。。
ちなみにカメラはラズパイ用のを発注済。

動けばいいって程度で突っ走ってるのでかなり無駄はありそうですが、ソースはこちらです。

https://github.com/ikegam1/raspi-kvs-amplify-lambda-frontend
https://github.com/ikegam1/raspi-kvs-amplify-lambda-backend

小さいですが一応、lambdaとvueに分けてあります。

さて、我が家カメをお迎えする準備が整ったぜ。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away