2012年12月4日火曜日

Node.jsでめっちゃ簡単に動画をストリーミング配信しよう

前回の続きです。
作業ディレクトリに移動しましょう。
高木はtestディレクトリの中にserver.jsがある状態です。

今回はhtml5で登場したvideoタグを使って動画をストリーミング配信します。
そのためvideoタグを使ったhtmlファイルを用意します。


  • htmlファイルの用意

中身はこんな感じです。


10行目〜13行目がvideoタグです。10行目のcontrolsをつけると再生ボタンやシークバーなどが現れます。
11行目のsourceタグに動画の場所を書きます。今回のコードだとserver.jsがある場所と同じところですね。
typeにはmimeタイプを書きます。


  • 前回のserver.jsの書き換え
サーバのコードを変更しましょう。


前回は

res.write('好きな文字列');

でクライアントに文字を送りましたが、今回はhtmlファイルを送ります。
  • クライアントからのリクエストが動画の送信かどうかチェックする
  • 動画の送信でない場合、送りたいhtmlを読み込む
  • 読み込んだファイルの中身をクライアントに送る
という流れで行きたいと思います。

そのために7行目のように「fs」モジュールを読み込みます。
11行目でリクエストが動画ではないことをチェックして、13行目のようにfs.readFileにhtmlファイルへのパス(./video.html)を渡します。
ファイルを読み込めるとコールバックのdataに渡されるので、それをres.writeで書きこめば終わりです。

20〜26行目は動画のストリーミングです。
20行目のfs.createReadStrem(path)はpathで指定したファイルの読み込みストリームを作ります。今回はこのpathに配信したい動画のパス(./test.mp4)を書きます。

21〜24行目はエラーイベントが起こった時の処理です。

26行目のreadStream.pipe(destination)は作成した読み込みストリームをdestinationで指定した書き込み先に接続します。
このdestinationに「res」を指定することでリクエストがあったクライアントに読み込んだ動画をそのまま流せます。

じゃあ実行しましょう!

こんな感じで3つのファイルがあるはずです。

node server.js

で実行してブラウザから http://localhost:30000 にアクセスします。

このように再生できるはずです。


これからNode.jsをはじめる人の入門として軽く見てくれればいいなーと思ってこの記事を書きました。
特に3年生の後輩でサーバー側やウェブアプリに興味のある人はやってみてはどうですか

27 件のコメント:

  1. Students find International Relations Research Paper Services as being of great assistance since they are able to complete their custom international research papers and international relations essay services on time.

    返信削除
  2. There is a reliable Healthcare Assignment Writing Service that is very popular for students in search of healthcare coursework writing services and nursing essay writing help services.

    返信削除
  3. The ultimate goal of entrepreneurship coursework writing services is to provide Entrepreneurship Writing Services and entrepreneurship essay writing services since entrepreneurship assignments writing service seekers lack time to complete their entrepreneurship term paper writing services.

    返信削除
  4. There are reliable PowerPoint Presentation Writing Services that are very popular for students in search of powerpoint presentation preparation services and pay for powerpoint presentations.

    返信削除
  5. American literature review writing service seekers have an advantage of hiring the best American literature research writing services that are familiar with American literature essay writing services for their American Literature Writing Services.

    返信削除
  6. Your post is very knowledgeable. Thank you I am an Academic Writer & I provide Assignment Help Service For Students. I’ve Top Assignment Experts If Any Students Wants to Help So Kindly Visit My Website. aol mail login | yahoo mail login |
    yahoo mail login | cash app login | www.amazon.com/mytv |
    cash app login | amazon login

    返信削除
  7. Amazon Prime is a top of the pedigree Television Based App tote taking place giving a lot of on the subject of-demand and live movies and TV shows, especially without any advertisements.
    visit www.amazon.com/mytv or www.primevideo.com/mytv and enter Amazon activation code to activate amazon prime videos on your smart tv and pc. Read More click below

    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv

    返信削除
  8. Amazon Prime is a top of the pedigree Television Based App tote taking place giving a lot of on the subject of-demand and live movies and TV shows, especially without any advertisements.
    visit www.amazon.com/mytv or www.primevideo.com/mytv and enter Amazon activation code to activate amazon prime videos on your smart tv and pc. Read More click below

    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv
    amazon.com/mytv

    返信削除
  9. The best way to watch Amazon Prime Video on talking your gadget is to enroll your gadget at amazon.com/mytv by enter the register

    code displayed on your TV Screen. This will serve you to watch your Prime Video shows and films in regards to the request for your

    number one gadget as capably as at your favored period. Amazon Prime Video is currently simple to use for through and through the

    gadgets which are qualified for getting to it. Amazon Video expanded the rundown of their qualified gadgets because of the substantial

    interest of the Prime video clients. To watch Prime Video in con to talking your gadget you should have a record viewing the gadget and

    just as you should have the membership.

    www.amazon.com/mytv

    返信削除
  10. Thank you for this great read. I absolutely enjoyed every bit of your content. I've got this page bookmarked to come back for more ideas. Romantic Text Messages

    返信削除
  11. Wonderful article! We will be linking to this great article on our site. Keep up the good writing. See instagram usernames not yet taken

    返信削除
  12. Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your next post. See birthday message to a boss

    返信削除
  13. This is really an excellent post. Your blog is really good and has always good and interesting content. Thank you for sharing this with us. Also, check out chromecast av receiver

    返信削除
  14. Streaming online video content is trending nowadays because people are switching to modern ways of getting entertained. They subscribe to different streaming services such as Netflix, Hulu, and more. One such streaming service among many others is Amazon Prime. This service not only gives you the eligibility to stream different videos but also lets you use many other features that come along with it. And, all of this can be done by getting and redeeming amazon.com/mytv

    amazon.com/mytv
    amazon.com/mytv enter code



    返信削除


  15. Nowadays people are switching to modern ways of getting entertained. They subscribe to different streaming services such as Netflix, Hulu, and more. One such streaming service among many others is Amazon Prime. This service not only gives you the eligibility to stream different videos but also lets you use many other features that come along with it. And, all of this can be done by getting and redeeming amazon.com/mytv

    amazon.com/mytv
    amazon.com/mytv enter code
    Amazon com mytv

    返信削除
  16. Steps to activate ESPN using Espn.com/activate. Switch on the device and launch an ESPN channel or application. &amp
    https://www.espn-comactivate.com
    https://hbomax-maxtvsign.com/
    hbomax.com/tvsignin

    返信削除
  17. HBO Max is a TV broadcasting service offered by American premium cable network HBO. Through either the HBO Maxwebsite, or apps on mobile devices, video game consoles, and digital media players, HBO subscribers can stream video and TV shows, including past and current content.
    hbomax.com/tvsignin
    https://hbomax-maxtvsign.com/
    https://www.espn-comactivate.com
    Espn.com/activate

    返信削除
  18. Hydrogen is a chemical element, which is known to be the lightest element in the periodic table. Hydrogen is the most widely available chemical substance in the universe, constituting roughly 75% of all baryonic mass.

    Hydrogen Production Cost Report

    返信削除
  19. Syngas, also known as synthesis gas, is a fuel gas. It is a mixture of gases that are composed of primarily hydrogen, carbon monoxide, and very often some carbon dioxide.

    Syngas Production Cost Report

    返信削除
  20. visit Espn plus activate, and enter the 6-character activation code. After entering the code on the web site,visit Activate ESPN

    返信削除
  21. Ethylene, also known as ethene or green ethylene, is an example of a hydrocarbon. It is a colourless gas that is also flammable and has a faint sweet and musky odour. Ethylene is a crucial natural plant hormone and is used widely in agriculture to force the ripening of fruits.

    Ethylene Production Cost

    返信削除
  22. Nylon 6 or polycaprolactam is a polymer that was developed by Paul Schlack at IG Farben. It was developed to reproduce the properties of nylon 6,6 without altering the patent on its manufacturing.

    Nylon 6 Production Cost

    返信削除
  23. xfinity.com/authorize is an official website that allows clients to access the Xfinity Gateway In fact, customers can discover the best cable, music, etc You will need to connect and activate your modem with your Comcast xfinity activate once you have it installed. xfinity.com/activate have made all reasonable attempts to offer latest and precise information and facts for the readers of this publication.

    返信削除
  24. hbomax.com/tvsignin is a premium streaming app all of HBO, app that combines all of HBO with even more must-seeclassic TV favorites, blockbuster movies, and new Max Originals with the greatest collection of movies, family & kid shows Get hbomax.com/tvsignin code at no
    extra charge with select wireless, TV & Internet plans.You'll get hbomax.com/tvsignin activate and On Demand, plus access to the new HBO Max app to stream it all.

    返信削除
  25. http://blog.t-lab.cs.teu.ac.jp/2012/12/dwr.html
    http://www.sinlung.com/2015/08/autonomous-councils-key-to-naga-deal.html
    http://blog.litecigusa.net/2014/04/what-is-drip-tip.html
    https://www.tusatphongthuy.com/2021/01/ket-sat-dien-tu-van-phong-ks80-thanh-hoa.html
    https://thepinkpineappleblog.blogspot.com/2018/01/my-favorites-cozy-sweaters-for-this.html
    https://tech.dreampirates.in/2015/08/microsoft-changes-web-access-to-on-web.html
    http://apiedeaula.blogspot.com/2010/01/glogs-para-que-os-quiero-ejemplos-de.html
    http://zhazhda-tvorchestva.blogspot.com/2019/05/blog-post_29.html
    http://fan.fc-anji.ru/blogs/blog/guest/13972.html
    https://belgischkookrecepten.blogspot.com/2015/01/preisoep-recept.html

    返信削除
  26. Amazon is not only the pioneer of the e-commerce world but also lets you take your entertainment to the next level with its Prime Video services. You can easily stream the Prime Video shows on your device by activating it via amazon mytv.www.amazon.com/mytv | cash app login

    返信削除
  27. geeksscan I appreciate you for this article this is such a wonderful blog Thanks for posting this Read our blog It is related to technology It helps you to solve your issues that you are facing. This is our latest article visit here guest post site Activate NFL Online at nfl.com/activate

    nfl activate
    nfl.com activate
    nfl.com/activate



    返信削除