Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.09.2014, 18:55
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Как записать видео из canvas?
Как можно записать видео из элемента canvas html5 ? Например, чтобы можно было записать игровой процесс и сохранить на компьютер, либо загрузить на youtube? Только не предлагайте программы для записи видео с экрана. Это нужно не для меня самого, а для моей игры. Т.е. все это нужно реализовать средствами JavaScript.
Я знаю, что сейчас это возможно(с появлением html5 и новых API), но не знаю как это сделать. Может подкинете какую-нибудь статейку по этой теме?
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2014, 20:00
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Может я и не прав, но на сколько я понимаю средствами js нельзя записать видео (ввиду того что js не работает с файловой системой, если у вас конечно не nodewebkid). Можно сохранять покадрово состояние канваса и отправлять его на сервер, который соберет видео из кадров (при этом отправлять лучше конечно сразу много кадров).

Последний раз редактировалось tsigel, 10.09.2014 в 20:03.
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2014, 20:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

tsigel, почему же. Можно. Скомпоновать всё в файл raw video, пожать jszip'ом и отдать пользователю на "скачку" с помощью blob.

Только на raw никакой памяти не хватит, нужна js имплементация кодека для сжатия видео на лету.

Первые результаты в гугле.
https://github.com/muaz-khan/WebRTC-...ster/RecordRTC
https://github.com/muaz-khan/WebRTC-...nvas-Recording
__________________
29375, 35

Последний раз редактировалось Aetae, 10.09.2014 в 20:20.
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2014, 20:45
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Aetae,
Видел подобное, но слишком мало кадров в видео. Курсор перепрыгивает с места на место. Можно было бы не кадры записывать, а перемещение объектов, а уже потом создать кадры. Знать бы как это сделать)
А с помощью чего можно на сервере видео собрать из кадров? Хотя на клиенте я думаю это тоже возможно. Только нужно знать по какому алгоритму кодировать в определенный видеоформат.
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2014, 21:20
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Dimaz,
Цитата:
Можно было бы не кадры записывать, а перемещение объектов, а уже потом создать кадры. Знать бы как это сделать)
Так а в чём проблема? В массив записывать координаты объектов.
А когда нужно "воспроизвести", читаешь из массива эти самые координаты и по ним выстраиваешь объекты.
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2014, 21:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Safort, ему надо полноценное видео, чтоб на youtube загрузить можно было.

Dimaz, сколько поставишь кадров столько и будет.
__________________
29375, 35

Последний раз редактировалось Aetae, 10.09.2014 в 21:33.
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2014, 21:39
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Aetae,
ах да, совсем забыл про это.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта. Zemsky Общие вопросы Javascript 30 19.12.2013 19:44
Как нарисовать один canvas в другом BorodinKO Общие вопросы Javascript 0 06.04.2012 18:20
Как записать в куки код из 5 цифр на 3 суток? GrayHunter Общие вопросы Javascript 6 31.03.2012 22:24
Как втавить видео? Геворг (X)HTML/CSS 3 26.05.2011 01:20
как записать строку в атрибут тега из js DmitryT Элементы интерфейса 5 21.03.2011 10:50