Skip to content

Instantly share code, notes, and snippets.

@maartenbreddels
Created August 8, 2017 10:16
Show Gist options
  • Save maartenbreddels/b4b57c1acf16f5dd5ed525a0b494a92e to your computer and use it in GitHub Desktop.
Save maartenbreddels/b4b57c1acf16f5dd5ed525a0b494a92e to your computer and use it in GitHub Desktop.
webcam/media ipywidget
Display the source blob
Display the rendered blob
Raw
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%javascript\n",
"require.undef('media');\n",
"\n",
"define('media', [\"@jupyter-widgets/base\"], function(widgets) {\n",
" var MediaModel = widgets.DOMWidgetModel.extend({\n",
" defaults: _.extend({}, widgets.DOMWidgetModel.prototype.defaults, {\n",
" _model_name: 'MediaModel',\n",
" _view_name: 'MediaView',\n",
" audio: false,\n",
" video: true\n",
" }),\n",
" initialize: function() {\n",
" // Get the camera permissions\n",
" this.stream = navigator.mediaDevices.getUserMedia({audio: false, video: true});\n",
" this.stream.then(function(stream) {\n",
" window.stream = stream\n",
" })\n",
" }\n",
" });\n",
"\n",
" var MediaView = widgets.DOMWidgetView.extend({\n",
"\n",
" initialize: function() {\n",
" var el = document.createElement('video')\n",
" window.last_media_view = this;\n",
" el.setAttribute('width', 320)\n",
" el.setAttribute('height', 240)\n",
" this.setElement(el);\n",
" MediaView.__super__.initialize.apply(this, arguments);\n",
" },\n",
"\n",
" render: function() {\n",
" var that = this;\n",
" that.model.stream.then(function(stream) {\n",
" that.el.src = window.URL.createObjectURL(stream);\n",
" that.el.play()\n",
" })\n",
" }\n",
"\n",
" });\n",
"\n",
" return {\n",
" MediaModel: MediaModel,\n",
" MediaView: MediaView\n",
" }\n",
"});\n",
"require(['media'])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"from ipywidgets import Widget, register, widget_serialization, DOMWidget\n",
"from traitlets import Bool, Dict, Int, Float, Unicode, List, Instance\n",
"\n",
"@register\n",
"class Media(DOMWidget):\n",
" \"\"\"Represents a media source.\"\"\"\n",
"\n",
" # Specify audio constraint and video constraint as a boolean or dict.\n",
" audio = Bool(False).tag(sync=True)\n",
" video = Bool(True).tag(sync=True)\n",
"\n",
" _model_module = Unicode('media').tag(sync=True)\n",
" _view_module = Unicode('media').tag(sync=True)\n",
" _view_name = Unicode('MediaView').tag(sync=True)\n",
" _model_name = Unicode('MediaModel').tag(sync=True)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"media = Media()"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"media"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python [default]",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.2"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment